mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-31 12:17:54 +01:00
docs: update Edge and New badges
This commit is contained in:
@@ -48,7 +48,7 @@ defineShortcuts({
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
Shortcuts keys are written as the literal keyboard key value. Combinations are made with `_` separator. Chained shortcuts are made with `-` separator. :u-badge{label="New" class="!rounded-full"}
|
Shortcuts keys are written as the literal keyboard key value. Combinations are made with `_` separator. Chained shortcuts are made with `-` separator.
|
||||||
|
|
||||||
Modifiers are also available:
|
Modifiers are also available:
|
||||||
- `meta`: acts as `Command` for MacOS and `Control` for others
|
- `meta`: acts as `Command` for MacOS and `Control` for others
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ baseProps:
|
|||||||
|
|
||||||
### Chip
|
### Chip
|
||||||
|
|
||||||
Use the `chip-color`, `chip-text` :u-badge{label="New" class="!rounded-full"} and `chip-position` props to display a chip on the Avatar.
|
Use the `chip-color`, `chip-text` and `chip-position` props to display a chip on the Avatar.
|
||||||
|
|
||||||
::component-card
|
::component-card
|
||||||
---
|
---
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ links:
|
|||||||
icon: i-simple-icons-headlessui
|
icon: i-simple-icons-headlessui
|
||||||
to: 'https://headlessui.com/vue/disclosure'
|
to: 'https://headlessui.com/vue/disclosure'
|
||||||
navigation:
|
navigation:
|
||||||
badge: 'Edge'
|
badge: New
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -149,7 +149,7 @@ props:
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
### Async search
|
### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
||||||
|
|
||||||
Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
|
Pass a function to the `searchable` prop to customize the search behavior and filter options according to your needs. The function will receive the query as its first argument and should return an array.
|
||||||
|
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ props:
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
### Style
|
||||||
|
|
||||||
Use the `color` prop to change the style of the Checkbox.
|
Use the `color` prop to change the style of the Checkbox.
|
||||||
|
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ props:
|
|||||||
---
|
---
|
||||||
::
|
::
|
||||||
|
|
||||||
### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
### Style
|
||||||
|
|
||||||
Use the `color` prop to change the style of the Radio.
|
Use the `color` prop to change the style of the Radio.
|
||||||
|
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ const selected = ref(false)
|
|||||||
```
|
```
|
||||||
::
|
::
|
||||||
|
|
||||||
### Style :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
### Style
|
||||||
|
|
||||||
Use the `color` prop to change the style of the Toggle.
|
Use the `color` prop to change the style of the Toggle.
|
||||||
|
|
||||||
|
|||||||
@@ -4,8 +4,6 @@ links:
|
|||||||
- label: GitHub
|
- label: GitHub
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
|
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
|
||||||
navigation:
|
|
||||||
badge: New
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o
|
|||||||
- `key` - The field to display from the row data.
|
- `key` - The field to display from the row data.
|
||||||
- `sortable` - Whether the column is sortable. Defaults to `false`.
|
- `sortable` - Whether the column is sortable. Defaults to `false`.
|
||||||
- `direction` - The sort direction to use on first click. Defaults to `asc`.
|
- `direction` - The sort direction to use on first click. Defaults to `asc`.
|
||||||
- `class` - The class to apply to the column cells.
|
- `class` :u-badge{label="New" class="!rounded-full"} - The class to apply to the column cells.
|
||||||
|
|
||||||
::component-example{class="grid"}
|
::component-example{class="grid"}
|
||||||
---
|
---
|
||||||
@@ -327,7 +327,7 @@ const selected = ref([people[1]])
|
|||||||
You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
|
You can use the `by` prop to compare objects by a field instead of comparing object instances. We've replicated the behavior of Headless UI [Combobox](https://headlessui.com/vue/combobox#binding-objects-as-values).
|
||||||
::
|
::
|
||||||
|
|
||||||
You can alsso add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument.
|
You can also add a `select` listener on your Table to make the rows clickable. The function will receive the row as the first argument. :u-badge{label="New" class="!rounded-full"}
|
||||||
|
|
||||||
You can use this to navigate to a page, open a modal or even to select the row manually.
|
You can use this to navigate to a page, open a modal or even to select the row manually.
|
||||||
|
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ const isOpen = ref(false)
|
|||||||
```
|
```
|
||||||
::
|
::
|
||||||
|
|
||||||
### Prevent close
|
### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
||||||
|
|
||||||
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
|
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
|
||||||
|
|
||||||
|
|||||||
@@ -124,7 +124,7 @@ const isOpen = ref(false)
|
|||||||
```
|
```
|
||||||
::
|
::
|
||||||
|
|
||||||
### Prevent close
|
### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}
|
||||||
|
|
||||||
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
|
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user