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

docs(app): framework select global (#2719)

Browse Source 
Co-authored-by: harlan <harlan@harlanzw.com>
This commit is contained in:
Benjamin Canac
2024-11-25 15:47:52 +01:00
committed by GitHub
parent ffc81cc950
commit ba874c9191
52 changed files with 1757 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/content/3.components/0.app.md
View File

@@ -27,8 +27,16 @@ Use it as at the root of your app:
</template>
```
::tip{to="/getting-started/i18n/nuxt#locale"}
::framework-only
#nuxt
:::tip{to="/getting-started/i18n/nuxt#locale"}
Learn how to use the `locale` prop to change the locale of your app.
:::
#vue
:::tip{to="/getting-started/i18n/vue#locale"}
Learn how to use the `locale` prop to change the locale of your app.
:::
::
## API

10
docs/content/3.components/accordion.md
View File

@@ -168,8 +168,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
## Examples

10
docs/content/3.components/alert.md
View File

@@ -178,8 +178,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Actions

10
docs/content/3.components/breadcrumb.md
View File

@@ -67,8 +67,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronRight` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronRight` key.
:::
::
## Examples

10
docs/content/3.components/button.md
View File

@@ -197,8 +197,16 @@ slots:
Button
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

10
docs/content/3.components/carousel.md
View File

@@ -94,8 +94,16 @@ options:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize these icons globally in your `app.config.ts` under `ui.icons.arrowLeft` / `ui.icons.arrowRight` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize these icons globally in your `vite.config.ts` under `ui.icons.arrowLeft` / `ui.icons.arrowRight` key.
:::
::
### Dots

20
docs/content/3.components/checkbox.md
View File

@@ -58,8 +58,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.minus` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.minus` key.
:::
::
### Label
@@ -115,8 +123,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Color

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

@@ -216,8 +216,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.search` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.search` key.
:::
::
### Loading
@@ -277,8 +285,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled
@@ -404,8 +420,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
## Examples

18
docs/content/3.components/icon.md
View File

@@ -1,14 +1,15 @@
---
description: A wrapper around Nuxt Icon component to display icons.
description: A component to display any icon from Iconify.
links:
- label: Nuxt Icon
icon: i-simple-icons-github
to: https://github.com/nuxt/icon
- label: Icônes
to: https://icones.js.org/
target: _blank
icon: i-custom-icones-js
---
## Usage
You can use any name from the https://icones.js.org collection:
Use the `name` prop to display an icon:
::component-code
---
@@ -18,8 +19,11 @@ props:
---
::
::tip
It's highly recommended to install the icons collections you need, read more about this in [Icons](/getting-started/icons#collections).
::framework-only
#nuxt
:::caution{to="/getting-started/icons/nuxt#collections"}
It's highly recommended to install the icons collections you need, read more about this.
:::
::
## API

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

@@ -189,8 +189,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Placeholder
@@ -441,8 +449,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -470,8 +486,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -550,8 +574,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

12
docs/content/3.components/input.md
View File

@@ -184,8 +184,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled
@@ -290,7 +298,7 @@ name: 'input-form-field-example'
::
::tip{to="/components/form"}
It also provides validation and error handling when used within a [Form](/components/form) component.
It also provides validation and error handling when used within a **Form** component.
::
### Within a ButtonGroup

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

@@ -156,8 +156,16 @@ slots:
:placeholder{class="h-48"}
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Overlay

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

@@ -434,8 +434,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Arrow

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

@@ -482,8 +482,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -513,8 +521,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -599,8 +615,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

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

@@ -206,7 +206,7 @@ props:
::
::note{to="https://www.radix-vue.com/components/select.html#change-the-positioning-mode"}
Read more about the `content.position` prop in the [Radix Vue documentation](https://www.radix-vue.com/components/select.html#change-the-positioning-mode).
Read more about the `content.position` prop in the **Radix Vue** documentation.
::
<!--
@@ -378,8 +378,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.chevronDown` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.chevronDown` key.
:::
::
### Selected Icon
@@ -409,8 +417,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.check` key.
:::
::
### Avatar
@@ -495,8 +511,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Disabled

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

@@ -156,8 +156,16 @@ slots:
:placeholder{class="h-full"}
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Side

10
docs/content/3.components/switch.md
View File

@@ -123,8 +123,16 @@ props:
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.loading` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.loading` key.
:::
::
### Color

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

@@ -128,8 +128,16 @@ name: 'toast-close-icon-example'
---
::
::tip{to="/getting-started/icons#theme"}
::framework-only
#nuxt
:::tip{to="/getting-started/icons/nuxt#theme"}
You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
:::
#vue
:::tip{to="/getting-started/icons/vue#theme"}
You can customize this icon globally in your `vite.config.ts` under `ui.icons.close` key.
:::
::
### Actions