From 82ea62bb231b8c126dcf1faa497b859aa324c5cc Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 18 Jul 2024 14:12:17 +0200 Subject: [PATCH] docs(button-group): update --- .../avatar-group/AvatarGroupChipExample.vue | 2 + .../avatar-group/AvatarGroupLinkExample.vue | 2 + .../AvatarGroupTooltipExample.vue | 2 + .../ButtonGroupDropdownExample.vue | 33 ++++++++ .../ButtonGroupTooltipExample.vue | 13 +++ docs/content/3.components/avatar-group.md | 2 + docs/content/3.components/button-group.md | 79 +++++++++++++++++++ docs/nuxt.config.ts | 5 +- 8 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 docs/app/components/content/examples/button-group/ButtonGroupDropdownExample.vue create mode 100644 docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue diff --git a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue b/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue index 74a792e0..a4f66443 100644 --- a/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue +++ b/docs/app/components/content/examples/avatar-group/AvatarGroupChipExample.vue @@ -6,12 +6,14 @@ alt="Benjamin Canac" /> + + + + + + +const items = [{ + label: 'Team', + icon: 'i-heroicons-users' +}, { + label: 'Invite users', + icon: 'i-heroicons-user-plus', + children: [{ + label: 'Invite by email', + icon: 'i-heroicons-paper-airplane' + }, { + label: 'Invite by link', + icon: 'i-heroicons-link' + }] +}, { + label: 'New team', + icon: 'i-heroicons-plus' +}] + + + diff --git a/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue b/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue new file mode 100644 index 00000000..940c288e --- /dev/null +++ b/docs/app/components/content/examples/button-group/ButtonGroupTooltipExample.vue @@ -0,0 +1,13 @@ + diff --git a/docs/content/3.components/avatar-group.md b/docs/content/3.components/avatar-group.md index 723fc127..e67de270 100644 --- a/docs/content/3.components/avatar-group.md +++ b/docs/content/3.components/avatar-group.md @@ -15,6 +15,7 @@ Wrap multiple [Avatar](/components/avatar) within an AvatarGroup to stack them. --- slots: default: | + @@ -34,6 +35,7 @@ props: size: md slots: default: | + diff --git a/docs/content/3.components/button-group.md b/docs/content/3.components/button-group.md index 48324954..994f1803 100644 --- a/docs/content/3.components/button-group.md +++ b/docs/content/3.components/button-group.md @@ -9,8 +9,87 @@ links: ## Usage +Wrap multiple [Button](/components/button) within a ButtonGroup to group them together. + +::component-code +--- +slots: + default: | + + + +--- +:u-button{color="gray" variant="subtle" label="Button"} +:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"} +:: + +### Size + +Use the `size` prop to change the size of all the buttons. + +::component-code +--- +props: + size: md +slots: + default: | + + + +--- +:u-button{color="gray" variant="subtle" label="Button"} +:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"} +:: + +### Orientation + +Use the `orientation` prop to change the orientation of the buttons. + +::component-code +--- +props: + orientation: vertical +slots: + default: | + + + +--- +:u-button{color="gray" variant="subtle" label="Submit"} +:u-button{color="gray" variant="outline" label="Cancel"} +:: + ## Examples +### With input + +You can use components like [Input](/components/input), [InputMenu](/components/input-menu), [Select](/components/select) [SelectMenu](/components/select-menu), etc. within a button group. + +::component-code +--- +slots: + default: | + + + + +--- +:u-input{color="gray" variant="outline" placeholder="Enter token"} +:u-button{color="gray" variant="subtle" icon="i-heroicons-clipboard-document"} +:: + +### With tooltip + +You can use a tooltip within a button group. + +:component-example{name="button-group-tooltip-example"} + +### With dropdown + +You can use a dropdown menu within a button group. + +:component-example{name="button-group-dropdown-example"} + ## API ### Props diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index eff74dc2..8ddf3f6f 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -122,9 +122,12 @@ export default defineNuxtConfig({ 'UAvatarGroup', 'UBadge', 'UButton', + 'UButtonGroup', 'UIcon', + 'UInput', 'UKbd', - 'ULink' + 'ULink', + 'UProgress' ].includes(c.pascalName)) globals.forEach(c => c.global = 'sync')