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

docs(ComponentExample): automatically read code (#789)

Browse Source
This commit is contained in:
KeJun
2023-10-09 16:44:47 +08:00
committed by GitHub
parent cf93d968af
commit fe348b48c6
35 changed files with 387 additions and 2925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
docs/content/2.elements/1.accordion.md
View File

@@ -19,31 +19,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
- `defaultOpen` - Determines whether the item is initially open or closed.
- `closeOthers` - Determines whether the item click close others or not. **It only works with multiple mode**.
::component-example
#default
:accordion-example-basic
#code
```vue
<script setup>
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
defaultOpen: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
disabled: true,
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, ...]
</script>
<template>
<UAccordion :items="items" />
</template>
```
::
:component-example{component="accordion-example-basic"}
### Style
@@ -72,7 +48,7 @@ options:
- solid
- outline
- ghost
- soft
- soft
- link
- name: size
restriction: included
@@ -169,112 +145,13 @@ You can use slots to customize the buttons and items content of the Accordion.
Use the `#default` slot to customize the trigger buttons. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
::component-example
#default
:accordion-example-default-slot
#code
```vue
<script setup>
const items = [...]
</script>
<template>
<UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
<template #default="{ item, index, open }">
<UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
<template #leading>
<div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
<UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />
</div>
</template>
<span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
<template #trailing>
<UIcon
name="i-heroicons-chevron-right-20-solid"
class="w-5 h-5 ms-auto transform transition-transform duration-200"
:class="[open && 'rotate-90']"
/>
</template>
</UButton>
</template>
</UAccordion>
</template>
```
::
:component-example{component="accordion-example-default-slot"}
### `item`
Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item`, `index`, `open` properties and `close` method in the slot scope.
::component-example
#default
:accordion-example-item-slot
#code
```vue
<script setup>
const items = [{
label: 'Getting Started',
icon: 'i-heroicons-information-circle',
defaultOpen: true,
slot: 'getting-started'
}, {
label: 'Installation',
icon: 'i-heroicons-arrow-down-tray',
defaultOpen: true,
slot: 'installation'
}, {
label: 'Theming',
icon: 'i-heroicons-eye-dropper',
defaultOpen: true,
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.'
}, ...]
</script>
<template>
<UAccordion :items="items">
<template #item="{ item }">
<p class="italic text-gray-900 dark:text-white text-center">
{{ item.description }}
</p>
</template>
<template #getting-started>
<div class="text-gray-900 dark:text-white text-center">
<Logo class="w-auto h-8 mx-auto" />
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
Fully styled and customizable components for Nuxt.
</p>
</div>
</template>
<template #installation="{ description }">
<div class="flex flex-col justify-center items-center gap-1 mb-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">
Installation
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">
Install <code>@nuxt/ui</code> dependency to your project:
</p>
<p>
{{ description }}
</p>
</div>
<div class="flex flex-col items-center">
<code>$ npm install @nuxt/ui</code>
<code>$ yarn add @nuxt/ui</code>
<code>$ pnpm add @nuxt/ui</code>
</div>
</template>
</UAccordion>
</template>
```
::
:component-example{component="accordion-example-item-slot"}
## Props

22
docs/content/2.elements/2.alert.md
View File

@@ -83,7 +83,7 @@ options:
- name: color
restriction: included
values:
- white
- white
excludedProps:
- icon
---
@@ -161,25 +161,7 @@ Use the `#title` and `#description` slots to customize the Alert.
This can be handy when you want to display HTML content. To achieve this, you can define those slots and use the `v-html` directive.
::component-example
#default
:alert-example-html
#code
```vue
<template>
<UAlert title="Heads <i>up</i>!" icon="i-heroicons-command-line">
<template #title="{ title }">
<span v-html="title" />
</template>
<template #description>
You can add <b>components</b> to your app using the <u>cli</u>.
</template>
</UAlert>
</template>
```
::
:component-example{component="alert-example-html"}
## Props

128
docs/content/2.elements/6.dropdown.md
View File

@@ -24,81 +24,13 @@ Pass an array of arrays to the `items` prop of the Dropdown component. Each arra
You can also pass any property from the [NuxtLink](https://nuxt.com/docs/api/components/nuxt-link#props) component such as `to`, `exact`, etc.
::component-example
#default
:dropdown-example-basic
#code
```vue
<script setup>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}], [{
label: 'Edit',
icon: 'i-heroicons-pencil-square-20-solid',
shortcuts: ['E'],
click: () => {
console.log('Edit')
}
}, {
label: 'Duplicate',
icon: 'i-heroicons-document-duplicate-20-solid',
shortcuts: ['D'],
disabled: true
}], [{
label: 'Archive',
icon: 'i-heroicons-archive-box-20-solid'
}, {
label: 'Move',
icon: 'i-heroicons-arrow-right-circle-20-solid'
}], [{
label: 'Delete',
icon: 'i-heroicons-trash-20-solid',
shortcuts: ['⌘', 'D']
}]
]
</script>
<template>
<UDropdown :items="items" :popper="{ placement: 'bottom-start' }">
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
</template>
```
::
:component-example{component="dropdown-example-basic"}
### Mode
Use the `mode` prop to switch between `click` and `hover` modes.
::component-example
#default
:dropdown-example-mode
#code
```vue
<script setup>
const items = [
[{
label: 'Profile',
avatar: {
src: 'https://avatars.githubusercontent.com/u/739984?v=4'
}
}]
]
</script>
<template>
<UDropdown :items="items" mode="hover" :popper="{ placement: 'bottom-start' }">
<UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />
</UDropdown>
</template>
```
::
:component-example{component="dropdown-example-mode"}
## Slots
@@ -106,61 +38,7 @@ const items = [
Use the `#item` slot to customize the items content or pass a `slot` property to customize a specific item. You will have access to the `item` property in the slot scope.
::component-example
#default
:dropdown-example-slot
#code
```vue
<script setup>
const items = [
[{
label: 'ben@example.com',
slot: 'account',
disabled: true
}], [{
label: 'Settings',
icon: 'i-heroicons-cog-8-tooth'
}], [{
label: 'Documentation',
icon: 'i-heroicons-book-open'
}, {
label: 'Changelog',
icon: 'i-heroicons-megaphone'
}, {
label: 'Status',
icon: 'i-heroicons-signal'
}], [{
label: 'Sign out',
icon: 'i-heroicons-arrow-left-on-rectangle'
}]
]
</script>
<template>
<UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" />
<template #account="{ item }">
<div class="text-left">
<p>
Signed in as
</p>
<p class="truncate font-medium text-gray-900 dark:text-white">
{{ item.label }}
</p>
</div>
</template>
<template #item="{ item }">
<span class="truncate">{{ item.label }}</span>
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
</template>
</UDropdown>
</template>
```
::
:component-example{component="dropdown-example-slot"}
## Props

19
docs/content/2.elements/8.kbd.md
View File

@@ -32,24 +32,7 @@ props:
As explained in the [Shortcuts](/getting-started/shortcuts) page, you can use the `metaSymbol` property of the `useShortcuts` composable to display the meta key according to the user's OS.
::component-example
#default
:kbd-example
#code
```vue
<script setup>
const { metaSymbol } = useShortcuts()
</script>
<template>
<div class="flex items-center gap-0.5">
<UKbd>{{ metaSymbol }}</UKbd>
<UKbd>K</UKbd>
</div>
</template>
```
::
:component-example{component="kbd-example"}
### Size