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

docs(content): consistent callouts links style (#2786)

Browse Source
This commit is contained in:
Alex
2024-11-27 18:28:19 +05:00
committed by GitHub
parent a6c22052e1
commit 3496b2d541
22 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/content/1.getting-started/3.theme.md
View File

@@ -570,14 +570,14 @@ These default values can be customized in your [`vite.config.ts`](#config) to ad
You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
::note
Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
Tailwind Variants uses [`tailwind-merge`](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
::
::tip
You can explore the theme for each component in two ways:
- Check the `Theme` section in the documentation of each individual component.
- Browse the source code directly in the GitHub repository at https://github.com/nuxt/ui/tree/v3/src/theme.
- Browse the source code directly in the GitHub repository at [`v3/src/theme`](https://github.com/nuxt/ui/tree/v3/src/theme).
::
### Config

2
docs/content/2.composables/use-toast.md
View File

@@ -18,7 +18,7 @@ const toast = useToast()
- When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.
::warning
Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
::
::tip{to="/components/toast"}

2
docs/content/3.components/calendar.md
View File

@@ -12,7 +12,7 @@ navigation.badge: New
---
::note
This component relies on the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
::
## Usage

2
docs/content/3.components/chip.md
View File

@@ -120,7 +120,7 @@ props:
::
::note
It's used this way in the [CommandPalette](/components/command-palette), [InputMenu](/components/input-menu), [Select](/components/select) or [SelectMenu](/components/select-menu) components for example.
It's used this way in the [`CommandPalette`](/components/command-palette), [`InputMenu`](/components/input-menu), [`Select`](/components/select) or [`SelectMenu`](/components/select-menu) components for example.
::
## Examples

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

@@ -79,7 +79,7 @@ name: 'collapsible-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Collapsible by pressing :kbd{value="O"}.
::
::tip

4
docs/content/3.components/command-palette.md
View File

@@ -491,7 +491,7 @@ class: '!p-0'
::
::note
This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With post-filtered items
@@ -585,7 +585,7 @@ name: 'command-palette-open-example'
::
::note
This can be useful when using the CommandPalette inside a [Modal](/components/modal) for example.
This can be useful when using the CommandPalette inside a [`Modal`](/components/modal) for example.
::
### With custom slot

2
docs/content/3.components/drawer.md
View File

@@ -259,7 +259,7 @@ name: 'drawer-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Drawer by pressing :kbd{value="O"}.
::
::tip

2
docs/content/3.components/dropdown-menu.md
View File

@@ -301,7 +301,7 @@ name: 'dropdown-menu-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the DropdownMenu by pressing :kbd{value="O"}.
::
### With custom slot

2
docs/content/3.components/form.md
View File

@@ -117,7 +117,7 @@ options:
::
::tip
You can use the [useFormField](/composables/use-form-field) composable to implement this inside your own components.
You can use the [`useFormField`](/composables/use-form-field) composable to implement this inside your own components.
::
### Error Event

8
docs/content/3.components/input-menu.md
View File

@@ -15,11 +15,11 @@ links:
Use the `v-model` directive to control the value of the InputMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use this over an [Input](/components/input) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
Use this over an [`Input`](/components/input) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers autocomplete capabilities.
::
::note
This component is similar to the [SelectMenu](/components/select-menu) but it's using an Input instead of a Select.
This component is similar to the [`SelectMenu`](/components/select-menu) but it's using an Input instead of a Select.
::
### Items
@@ -701,7 +701,7 @@ name: 'input-menu-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the InputMenu by pressing :kbd{value="O"}.
::
### Control open state on focus
@@ -757,7 +757,7 @@ name: 'input-menu-filter-example'
::
::note
This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With custom search

2
docs/content/3.components/input-number.md
View File

@@ -12,7 +12,7 @@ navigation.badge: New
---
::note
This component relies on the [@internationalized/number](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
This component relies on the [`@internationalized/number`](https://react-spectrum.adobe.com/internationalized/number/index.html) package which provides utilities for formatting and parsing numbers across locales and numbering systems.
::
## Usage

2
docs/content/3.components/link.md
View File

@@ -18,7 +18,7 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
::note
It is used by the [Breadcrumb](/components/breadcrumb), [Button](/components/button), [ContextMenu](/components/context-menu), [DropdownMenu](/components/dropdown-menu) and [NavigationMenu](/components/navigation-menu) components.
It is used by the [`Breadcrumb`](/components/breadcrumb), [`Button`](/components/button), [`ContextMenu`](/components/context-menu), [`DropdownMenu`](/components/dropdown-menu) and [`NavigationMenu`](/components/navigation-menu) components.
::
### Tag

4
docs/content/3.components/modal.md
View File

@@ -295,7 +295,7 @@ name: 'modal-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Modal by pressing :kbd{value="O"}.
::
::tip
@@ -307,7 +307,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [ModalProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`ModalProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/ModalProvider.vue) component.
::
First, create a modal component that will be opened programatically:

2
docs/content/3.components/navigation-menu.md
View File

@@ -552,7 +552,7 @@ name: 'navigation-menu-model-value-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can switch the active item by pressing :kbd{value="1"}, :kbd{value="2"}, or :kbd{value="3"}.
::
::tip

2
docs/content/3.components/pagination.md
View File

@@ -14,7 +14,7 @@ links:
Use the `default-page` prop or the `v-model:page` directive to control the current page.
::note
The Pagination component uses some [Button](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
The Pagination component uses some [`Button`](/components/button) to display the pages, use [`color`](#color), [`variant`](#variant) and [`size`](#size) props to style them.
::
### Total

4
docs/content/3.components/popover.md
View File

@@ -64,7 +64,7 @@ slots:
::
::note
When using the `hover` mode, the Radix Vue [HoverCard](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [Popover](https://www.radix-vue.com/components/popover.html).
When using the `hover` mode, the Radix Vue [`HoverCard`](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [`Popover`](https://www.radix-vue.com/components/popover.html).
::
### Delay
@@ -174,7 +174,7 @@ name: 'popover-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
::
### With command palette

8
docs/content/3.components/select-menu.md
View File

@@ -15,11 +15,11 @@ links:
Use the `v-model` directive to control the value of the SelectMenu or the `default-value` prop to set the initial value when you do not need to control its state.
::tip
Use this over a [Select](/components/select) to take advantage of Radix Vue's [Combobox](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
Use this over a [`Select`](/components/select) to take advantage of Radix Vue's [`Combobox`](https://www.radix-vue.com/components/combobox.html) component that offers search capabilities and multiple selection.
::
::note
This component is similar to the [InputMenu](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
This component is similar to the [`InputMenu`](/components/input-menu) but it's using a Select instead of an Input with the search inside the menu.
::
### Items
@@ -746,7 +746,7 @@ name: 'select-menu-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the SelectMenu by pressing :kbd{value="O"}.
::
### Control search term
@@ -792,7 +792,7 @@ name: 'select-menu-filter-example'
::
::note
This example uses [refDebounced](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
This example uses [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to debounce the API calls.
::
### With custom search

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

@@ -650,7 +650,7 @@ name: 'select-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Select by pressing :kbd{value="O"}.
::
### With rotating icon

4
docs/content/3.components/slideover.md
View File

@@ -294,7 +294,7 @@ name: 'slideover-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Slideover by pressing :kbd{value="O"}.
::
::tip
@@ -306,7 +306,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [SlideoverProvider](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`SlideoverProvider`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/SlideoverProvider.vue) component.
::
First, create a slideover component that will be opened programatically:

2
docs/content/3.components/table.md
View File

@@ -245,7 +245,7 @@ You can use the `expanded` prop to control the expandable state of the rows (can
::
::note
You could also add this action to the [DropdownMenu](/components/dropdown-menu) component inside the `actions` column.
You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
::
### With row selection

2
docs/content/3.components/toast.md
View File

@@ -14,7 +14,7 @@ links:
Use the [useToast](/composables/use-toast) composable to display a toast in your application.
::warning
Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
Make sure to wrap your app with the [`App`](/components/app) component which uses our [`Toaster`](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Toaster.vue) component which uses the [`ToastProvider`](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
::
::tip{to="/components/app#props"}

6
docs/content/3.components/tooltip.md
View File

@@ -14,7 +14,7 @@ links:
Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
::warning
Make sure to wrap your app with the [App](/components/app) component which uses the [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
Make sure to wrap your app with the [`App`](/components/app) component which uses the [`TooltipProvider`](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
::
::tip{to="/components/app#props"}
@@ -89,7 +89,7 @@ slots:
::
::tip
This can be configured globally through the `tooltip.delayDuration` option in the [App](/components/app) component.
This can be configured globally through the `tooltip.delayDuration` option in the [`App`](/components/app) component.
::
### Content
@@ -182,7 +182,7 @@ name: 'tooltip-open-example'
::
::note
In this example, leveraging [defineShortcuts](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Tooltip by pressing :kbd{value="O"}.
::
## API