arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(collapsible): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-08-06 10:45:30 +02:00
parent 8f5e8170e6
commit 34ba466c15
4 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/components/content/examples/collapsible/CollapsibleExample.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<UCollapsible class="w-48 mx-auto"> <UCollapsible class="w-48">
<UButton label="Open" color="gray" variant="subtle" /> <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<template #content> <template #content>
<Placeholder class="h-48" /> <Placeholder class="h-48" />

2
docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<UCollapsible class="w-48 mx-auto"> <UCollapsible class="w-48">
<UButton <UButton
class="group" class="group"
label="Open" label="Open"

4
docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
View File

@@ -7,8 +7,8 @@ defineShortcuts({
</script> </script>
<template> <template>
<UCollapsible v-model:open="open" class="w-48 mx-auto"> <UCollapsible v-model:open="open" class="w-48">
<UButton label="Open" color="gray" variant="subtle" /> <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
<template #content> <template #content>
<Placeholder class="h-48" /> <Placeholder class="h-48" />

21
docs/content/3.components/collapsible.md
View File

@@ -15,7 +15,12 @@ Use a [Button](/components/button) or any other component in the default slot of
Then, use the `#content` slot to add the content displayed when the Collapsible is open. Then, use the `#content` slot to add the content displayed when the Collapsible is open.
:component-example{name="collapsible-example"} ::component-example
---
name: 'collapsible-example'
class: 'justify-center'
---
::
## Examples ## Examples
@@ -23,7 +28,12 @@ Then, use the `#content` slot to add the content displayed when the Collapsible
You can control the open state by using the `default-open` prop or the `v-model:open` directive. You can control the open state by using the `default-open` prop or the `v-model:open` directive.
:component-example{name="collapsible-open-example"} ::component-example
---
name: 'collapsible-open-example'
class: 'justify-center'
---
::
::note ::note
In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible. In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
@@ -33,7 +43,12 @@ In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible. Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.
:component-example{name="collapsible-icon-example"} ::component-example
---
name: 'collapsible-icon-example'
class: 'justify-center'
---
::
## API ## API