Skip to content

[stable8] docs: Move to more outline icons #7861

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ShGKme merged 1 commit into from
Nov 14, 2025
Merged

[stable8] docs: Move to more outline icons #7861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/components/NcAppNavigation/NcAppNavigation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
<NcActions>
<NcActionButton close-after-click @click="showModal = true">
<template #icon>
<IconCog :size="20" />
<IconCogOutline :size="20" />
</template>
App settings (close after click)
</NcActionButton>
<NcActionButton @click="showModal = true">
<template #icon>
<IconCog :size="20" />
<IconCogOutline :size="20" />
</template>
App settings (handle only click)
</NcActionButton>
Expand All @@ -39,7 +39,7 @@
<div class="navigation__footer">
<NcButton wide @click="showModal = true">
<template #icon>
<IconCog />
<IconCogOutline />
</template>
App settings
</NcButton>
Expand All @@ -57,12 +57,12 @@

<script>
import IconCheck from 'vue-material-design-icons/Check.vue'
import IconCog from 'vue-material-design-icons/Cog.vue'
import IconCogOutline from 'vue-material-design-icons/CogOutline.vue'

export default {
components: {
IconCheck,
IconCog,
IconCogOutline,
},
provide() {
return {
Expand Down
24 changes: 12 additions & 12 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ button will be automatically created.

```vue
<template>
<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
<div id="app-navigation-vue-action"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
<ul>
<NcAppNavigationItem name="Item with actions">
<template #icon>
Expand Down Expand Up @@ -137,7 +137,7 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
<ul>
<NcAppNavigationItem name="Item with counter">
<template #icon>
<Folder :size="20" />
<IconFolderOutline :size="20" />
</template>
<template #counter>
<NcCounterBubble>
Expand All @@ -148,27 +148,27 @@ Just nest the counter in a template within `<NcAppNavigationItem>` and add `#cou
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder.vue'
import IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'

export default {
components: {
Folder,
IconFolderOutline,
},
}
</script>
```

#### Element with children

Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose wether to allow or
Wrap the children in a template with the `slot` property and use the prop `allowCollapse` to choose whether to allow or
prevent the user from collapsing the items.

```vue
<template>
<ul>
<NcAppNavigationItem name="Item with children" :allowCollapse="true" :open="true">
<NcAppNavigationItem name="Item with children" :allowCollapse="true">
<template #icon>
<Folder :size="20" />
<IconFolderOutline :size="20" />
</template>
<template #counter>
<NcCounterBubble>
Expand Down Expand Up @@ -204,14 +204,14 @@ prevent the user from collapsing the items.
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder.vue'
import IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'
import Delete from 'vue-material-design-icons/Delete.vue'
import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
import Pencil from 'vue-material-design-icons/Pencil.vue'

export default {
components: {
Folder,
IconFolderOutline,
Delete,
OpenInNew,
Pencil,
Expand All @@ -230,17 +230,17 @@ the placeholder is the previous name of the element.
<NcAppNavigationItem name="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" @update:name="function(value){alert(value)}">
<template #icon>
<Folder :size="20" />
<IconFolderOutline :size="20" />
</template>
</NcAppNavigationItem>
</ul>
</template>
<script>
import Folder from 'vue-material-design-icons/Folder.vue'
import IconFolderOutline from 'vue-material-design-icons/FolderOutline.vue'

export default {
components: {
Folder,
IconFolderOutline,
},
}
</script>
Expand Down
32 changes: 16 additions & 16 deletions src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,24 @@
<template #actions>
<NcActions aria-label="Filters">
<template #icon>
<IconFilter :size="20" />
<IconFilterOutline :size="20" />
</template>
<NcActionButton>
<template #icon>
<IconAccount :size="20" />
<IconAccountOutline :size="20" />
</template>
Filter by name
</NcActionButton>
<NcActionButton>
<template #icon>
<IconCalendarAccount :size="20" />
<IconCalendarAccountOutline :size="20" />
</template>
Filter by year
</NcActionButton>
</NcActions>
<NcButton aria-label="Search globally" variant="tertiary">
<template #icon>
<IconSearchGlobal :size="20" />
<IconSearchGlobalOutline :size="20" />
</template>
</NcButton>
</template>
Expand All @@ -42,12 +42,12 @@
<template #list>
<NcAppNavigationItem name="First navigation entry">
<template #icon>
<IconStar :size="20" />
<IconStarOutline :size="20" />
</template>
</NcAppNavigationItem>
<NcAppNavigationItem name="Second navigation entry">
<template #icon>
<IconStar :size="20" />
<IconStarOutline :size="20" />
</template>
</NcAppNavigationItem>
</template>
Expand All @@ -64,21 +64,21 @@
</div>
</template>
<script>
import IconAccount from 'vue-material-design-icons/Account.vue'
import IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'
import IconFilter from 'vue-material-design-icons/Filter.vue'
import IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'
import IconStar from 'vue-material-design-icons/Star.vue'
import IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'
import IconCalendarAccountOutline from 'vue-material-design-icons/CalendarAccountOutline.vue'
import IconFilterOutline from 'vue-material-design-icons/FilterOutline.vue'
import IconSearchGlobalOutline from 'vue-material-design-icons/CloudSearchOutline.vue'
import IconStarOutline from 'vue-material-design-icons/StarOutline.vue'

const exampleItem = ['Mary', 'Patricia', 'James', 'Michael']

export default {
components: {
IconAccount,
IconCalendarAccount,
IconFilter,
IconSearchGlobal,
IconStar,
IconAccountOutline,
IconCalendarAccountOutline,
IconFilterOutline,
IconSearchGlobalOutline,
IconStarOutline,
},

data() {
Expand Down
Loading