arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 01:10:40 +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

177
docs/content/6.overlays/1.modal.md
View File

@@ -13,154 +13,29 @@ links:
Use a `v-model` to control the Modal state.
::component-example
#default
:modal-example-basic
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen">
<!-- Content -->
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-basic"}
You can put a [Card](/layout/card) component inside your Modal to handle forms and take advantage of `header` and `footer` slots:
::component-example
#default
:modal-example-card
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen">
<UCard :ui="{ divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<!-- Content -->
</template>
<!-- Content -->
<template #footer>
<!-- Content -->
</template>
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-card"}
### Disable overlay
Set the `overlay` prop to `false` to disable it.
::component-example
#default
:modal-example-disable-overlay
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" :overlay="false">
<div class="p-4">
<Placeholder class="h-48" />
</div>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-disable-overlay"}
### Disable transition
Set the `transition` prop to `false` to disable it.
::component-example
#default
:modal-example-disable-transition
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" :transition="false">
<div class="p-4">
<Placeholder class="h-48" />
</div>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-disable-transition"}
### Prevent close
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
::component-example
#default
:modal-example-prevent-close
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" prevent-close>
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Modal
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-32" />
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-prevent-close"}
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.
@@ -182,47 +57,7 @@ defineShortcuts({
Set the `fullscreen` prop to `true` to enable it.
::component-example
#default
:modal-example-fullscreen
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<UModal v-model="isOpen" fullscreen>
<UCard
:ui="{
base: 'h-full flex flex-col',
rounded: '',
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
body: {
base: 'grow'
}
}"
>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Modal
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-full" />
</UCard>
</UModal>
</div>
</template>
```
::
:component-example{component="modal-example-fullscreen"}
## Props

134
docs/content/6.overlays/2.slideover.md
View File

@@ -13,153 +13,29 @@ links:
Use a `v-model` to control the Slideover state.
::component-example
#default
:slideover-example-basic
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<!-- Content -->
</USlideover>
</div>
</template>
```
::
:component-example{component="slideover-example-basic"}
You can put a [Card](/layout/card) component inside your Slideover to handle forms and take advantage of `header` and `footer` slots:
::component-example
#default
:slideover-example-card
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen">
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<!-- Content -->
</template>
<!-- Content -->
<template #footer>
<!-- Content -->
</template>
</UCard>
</USlideover>
</div>
</template>
```
::
:component-example{component="slideover-example-card"}
### Disable overlay
Set the `overlay` prop to `false` to disable it.
::component-example
#default
:slideover-example-disable-overlay
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :overlay="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>
```
::
:component-example{component="slideover-example-disable-overlay"}
### Disable transition
Set the `transition` prop to `false` to disable it.
::component-example
#default
:slideover-example-disable-transition
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" :transition="false">
<div class="p-4 flex-1">
<Placeholder class="h-full" />
</div>
</USlideover>
</div>
</template>
```
::
:component-example{component="slideover-example-disable-transition"}
### Prevent close
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
::component-example
#default
:slideover-example-prevent-close
#code
```vue
<script setup>
const isOpen = ref(false)
</script>
<template>
<div>
<UButton label="Open" @click="isOpen = true" />
<USlideover v-model="isOpen" prevent-close>
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
Slideover
</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
</div>
</template>
<Placeholder class="h-full" />
</UCard>
</USlideover>
</div>
</template>
```
::
:component-example{component="slideover-example-prevent-close"}
You can still handle the `esc` shortcut yourself by using our [defineShortcuts](/getting-started/shortcuts#defineshortcuts) composable.

55
docs/content/6.overlays/3.popover.md
View File

@@ -11,44 +11,13 @@ links:
## Usage
::component-example
#default
:popover-example
#code
```vue
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
</template>
</UPopover>
</template>
```
::
:component-example{component="popover-example"}
### Mode
Use the `mode` prop to switch between `click` and `hover` modes.
::component-example
#default
:popover-example-mode
#code
```vue
<template>
<UPopover mode="hover">
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel>
<!-- Content -->
</template>
</UPopover>
</template>
```
::
:component-example{component="popover-example-mode"}
## Slots
@@ -56,25 +25,7 @@ Use the `mode` prop to switch between `click` and `hover` modes.
Use the `#panel` slot to fill the content of the panel. You will have access to the `open` property and the `close` method in the slot scope.
::component-example
#default
:popover-example-slot
#code
```vue
<template>
<UPopover>
<UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
<template #panel="{ close }">
<div class="p-8">
<UButton label="Close" @click="close" />
</div>
</template>
</UPopover>
</template>
```
::
:component-example{component="popover-example-slot"}
## Props

13
docs/content/6.overlays/4.tooltip.md
View File

@@ -8,18 +8,7 @@ links:
## Usage
::component-example
#default
:tooltip-example
#code
```vue
<template>
<UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']">
<UButton color="gray" label="Hover me" />
</UTooltip>
</template>
```
::
:component-example{component="tooltip-example"}
## Slots

37
docs/content/6.overlays/5.context-menu.md
View File

@@ -9,42 +9,7 @@ links:
## Usage
::component-example
#default
:context-menu-example
#code
```vue
<script setup>
const { x, y } = useMouse()
const { y: windowY } = useWindowScroll()
const isOpen = ref(false)
const virtualElement = ref({ getBoundingClientRect: () => ({}) })
function onContextMenu () {
const top = unref(y) - unref(windowY)
const left = unref(x)
virtualElement.value.getBoundingClientRect = () => ({
width: 0,
height: 0,
top,
left
})
isOpen.value = true
}
</script>
<template>
<div @contextmenu.prevent="onContextMenu">
<UContextMenu v-model="isOpen" :virtual-element="virtualElement">
<!-- Content -->
</UContextMenu>
</div>
</template>
```
::
:component-example{component="context-menu-example"}
## Props

86
docs/content/6.overlays/6.notification.md
View File

@@ -37,20 +37,7 @@ export default defineAppConfig({
Then, you can use the `useToast` composable to add notifications to your app:
::component-example
#default
:notification-example-basic
#code
```vue
<script setup>
const toast = useToast()
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Hello world!' })" />
</template>
```
::
:component-example{component="notification-example-basic"}
When using `toast.add`, this will push a new notification to the stack displayed in `<UNotifications />`. All the props of the `Notification` component can be passed to `toast.add`.
@@ -179,7 +166,7 @@ options:
- name: color
restriction: included
values:
- gray
- gray
excludedProps:
- icon
---
@@ -189,47 +176,13 @@ excludedProps:
Use the `click` prop to execute a function when the Notification is clicked.
::component-example
#default
:notification-example-click
#code
```vue
<script setup>
const toast = useToast()
function onClick () {
alert('Clicked!')
}
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: onClick })" />
</template>
```
::
:component-example{component="notification-example-click"}
### Callback
Use the `callback` prop to execute a function when the Notification expires.
::component-example
#default
:notification-example-callback
#code
```vue
<script setup>
const toast = useToast()
function onCallback () {
alert('Notification expired!')
}
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Expires soon...', timeout: 1000, callback: onCallback })" />
</template>
```
::
:component-example{component="notification-example-callback"}
### Close
@@ -261,20 +214,7 @@ excludedProps:
Use the `actions` prop to add actions to the Notification.
::component-example
#default
:notification-example-actions
#code
```vue
<script setup>
const toast = useToast()
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Click me', click: () => alert('Clicked!') })" />
</template>
```
::
:component-example{component="notification-example-actions"}
Like for `closeButton`, you can pass all the props of the [Button](/elements/button) component inside the action or globally through `ui.notification.default.actionButton`.
@@ -341,21 +281,7 @@ This can be handy when you want to display HTML content. To achieve this, you ca
This way, you can use HTML tags in the `title` and `description` props when using `useToast`.
::component-example
#default
:notification-example-html
#code
```vue
<script setup>
const toast = useToast()
</script>
<template>
<UButton label="Show toast" @click="toast.add({ title: 'Notification <i>italic</i>', description: 'This is an <u>underlined</u> and <b>bold</b> notification.' })" />
</template>
```
::
:component-example{component="notification-example-html"}
::callout{icon="i-heroicons-light-bulb"}
Slots defined in the `<UNotifications />` component are automatically passed down to the `Notification` children.