arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 14:31:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: consistent icons and avatars across examples

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-12 22:20:44 +01:00
parent 8cc8e45b4f
commit 877b22c294
6 changed files with 15 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/content/examples/InputMenuExampleObjects.vue
View File

@@ -31,8 +31,8 @@ const selected = ref(people[0])
<template>
<UInputMenu v-model="selected" :options="people">
<template #leading>
<UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
<UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
<UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-5 h-5" />
<UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="2xs" />
</template>
</UInputMenu>
</template>

4
docs/components/content/examples/SelectMenuExampleObjects.vue
View File

@@ -31,8 +31,8 @@ const selected = ref(people[0])
<template>
<USelectMenu v-model="selected" :options="people">
<template #leading>
<UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-4 h-4 mx-0.5" />
<UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="3xs" class="mx-0.5" />
<UIcon v-if="selected.icon" :name="(selected.icon as string)" class="w-5 h-5" />
<UAvatar v-else-if="selected.avatar" v-bind="(selected.avatar as Avatar)" size="2xs" />
</template>
</USelectMenu>
</template>

8
docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
View File

@@ -32,13 +32,7 @@ const links = [{
<template>
<UVerticalNavigation :links="links">
<template #avatar="{ link }">
<UAvatar
v-if="link.avatar"
v-bind="link.avatar"
size="3xs"
loading="lazy"
/>
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
<UAvatar v-bind="link.avatar" size="2xs" loading="lazy" />
</template>
</UVerticalNavigation>
</template>

8
docs/content/2.components/button.md
View File

@@ -336,7 +336,7 @@ Use the `#leading` slot to set the content of the leading icon.
::component-card
---
slots:
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" />
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs" />
baseProps:
color: 'gray'
props:
@@ -347,7 +347,7 @@ excludedProps:
---
#leading
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs"}
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs"}
::
### `trailing`
@@ -357,7 +357,7 @@ Use the `#trailing` slot to set the content of the trailing icon.
::component-card
---
slots:
trailing: <UIcon name="i-heroicons-arrow-right-20-solid" />
trailing: <UIcon name="i-heroicons-arrow-right-20-solid" class="w-5 h-5" />
props:
label: Button
color: 'gray'
@@ -366,7 +366,7 @@ excludedProps:
---
#trailing
:u-icon{name="i-heroicons-arrow-right-20-solid"}
:u-icon{name="i-heroicons-arrow-right-20-solid" class="w-5 h-5"}
::
## Props

4
docs/content/2.components/input.md
View File

@@ -180,13 +180,13 @@ Use the `#leading` slot to set the content of the leading icon.
::component-card
---
slots:
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5" />
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs" />
baseProps:
placeholder: 'Search...'
---
#leading
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5"}
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="2xs"}
::
### `trailing`

8
docs/content/2.components/select.md
View File

@@ -203,7 +203,7 @@ Use the `#leading` slot to set the content of the leading icon.
::component-card
---
slots:
leading: <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5" />
leading: <UIcon name="i-heroicons-flag" class="w-5 h-5" />
baseProps:
options:
- 'United States'
@@ -213,7 +213,7 @@ baseProps:
---
#leading
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" size="3xs" class="mx-0.5"}
:u-icon{name="i-heroicons-flag" class="w-5 h-5"}
::
### `trailing`
@@ -223,13 +223,13 @@ Use the `#trailing` slot to set the content of the trailing icon.
::component-card
---
slots:
trailing: <UIcon name="i-heroicons-arrows-up-down-20-solid" />
trailing: <UIcon name="i-heroicons-arrows-up-down-20-solid" class="w-5 h-5" />
baseProps:
placeholder: 'Search...'
---
#trailing
:u-icon{name="i-heroicons-arrows-up-down-20-solid"}
:u-icon{name="i-heroicons-arrows-up-down-20-solid" class="w-5 h-5"}
::
## Props