mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
docs: update badges
This commit is contained in:
@@ -7,8 +7,6 @@ links:
|
||||
- label: Disclosure
|
||||
icon: i-simple-icons-headlessui
|
||||
to: 'https://headlessui.com/vue/disclosure'
|
||||
navigation:
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -5,7 +5,7 @@ links:
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Alert.vue
|
||||
navigation:
|
||||
badge: Edge
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -31,7 +31,7 @@ props:
|
||||
|
||||
Use the `color` and `variant` props to change the visual style of the Badge.
|
||||
|
||||
- `variant` can be `solid` (default), `outline`, `soft` or `subtle`.
|
||||
- `variant` can be `solid` (default), `outline`, `soft` or `subtle`. :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -45,7 +45,7 @@ Badge
|
||||
|
||||
Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants.
|
||||
|
||||
#### White :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
#### White :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -62,7 +62,7 @@ excludedProps:
|
||||
Badge
|
||||
::
|
||||
|
||||
#### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
#### Gray :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
|
||||
::component-card
|
||||
---
|
||||
@@ -79,7 +79,7 @@ excludedProps:
|
||||
Badge
|
||||
::
|
||||
|
||||
#### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
#### Black :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
|
||||
::component-card
|
||||
---
|
||||
|
||||
@@ -6,7 +6,7 @@ links:
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/elements/Link.vue
|
||||
navigation:
|
||||
badge: Edge
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -5,7 +5,7 @@ links:
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Form.ts
|
||||
navigation:
|
||||
badge: Edge
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -108,7 +108,7 @@ const selected = ref(people[0])
|
||||
```
|
||||
::
|
||||
|
||||
If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
|
||||
If you only want to select a single object property rather than the whole object as value, you can set the `value-attribute` property. This prop defaults to `null`. :u-badge{label="New" class="!rounded-full" variant="subtle"}
|
||||
|
||||
::component-example
|
||||
#default
|
||||
@@ -193,7 +193,7 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Async search
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -134,7 +134,7 @@ You can also use the `error` prop as a boolean to mark the form element as inval
|
||||
The `error` prop will automatically set the `color` prop of the form element to `red`.
|
||||
::
|
||||
|
||||
### Size :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Size :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
|
||||
Use the `size` prop to change the size of the label and the form element.
|
||||
|
||||
|
||||
@@ -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.
|
||||
- `sortable` - Whether the column is sortable. Defaults to `false`.
|
||||
- `direction` - The sort direction to use on first click. Defaults to `asc`.
|
||||
- `class` :u-badge{label="New" class="!rounded-full" variant="subtle"} - The class to apply to the column cells.
|
||||
- `class` - The class to apply to the column cells.
|
||||
|
||||
::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 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" variant="subtle"}
|
||||
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.
|
||||
|
||||
You can use this to navigate to a page, open a modal or even to select the row manually.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ links:
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/navigation/Tabs.vue
|
||||
navigation:
|
||||
badge: Edge
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -125,7 +125,7 @@ const isOpen = ref(false)
|
||||
```
|
||||
::
|
||||
|
||||
### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Prevent close
|
||||
|
||||
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 :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### Prevent close
|
||||
|
||||
Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
|
||||
|
||||
|
||||
@@ -316,7 +316,7 @@ excludedProps:
|
||||
|
||||
## Slots
|
||||
|
||||
### `title` / `description` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
### `title` / `description` :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
|
||||
|
||||
Use the `#title` and `#description` slots to customize the Notification.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user