arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-02 05:08:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: update badges

Browse Source
This commit is contained in:
Benjamin Canac
2023-07-30 15:13:44 +02:00
parent e25be118b7
commit 1bc055935e
7 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/content/2.elements/4.badge.md
View File

@@ -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. 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"} #### White :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
::component-card ::component-card
--- ---
@@ -62,7 +62,7 @@ excludedProps:
Badge Badge
:: ::
#### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"} #### Gray :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
::component-card ::component-card
--- ---
@@ -79,7 +79,7 @@ excludedProps:
Badge Badge
:: ::
#### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full"} #### Black :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
::component-card ::component-card
--- ---

4
docs/content/3.forms/4.select-menu.md
View File

@@ -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`. 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"}
::component-example ::component-example
#default #default
@@ -193,7 +193,7 @@ props:
--- ---
:: ::
### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"} ### Async search :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
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.

2
docs/content/3.forms/9.form-group.md
View File

@@ -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`. The `error` prop will automatically set the `color` prop of the form element to `red`.
:: ::
### Size ### Size :u-badge{label="Edge" 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. Use the `size` prop to change the size of the label and the form element.

4
docs/content/4.data/1.table.md
View File

@@ -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` :u-badge{label="New" class="!rounded-full"} - The class to apply to the column cells. - `class` :u-badge{label="New" class="!rounded-full" variant="subtle"} - 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 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 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 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.

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

@@ -125,7 +125,7 @@ const isOpen = ref(false)
``` ```
:: ::
### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"} ### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
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.

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

@@ -124,7 +124,7 @@ const isOpen = ref(false)
``` ```
:: ::
### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"} ### Prevent close :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
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.

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

@@ -316,7 +316,7 @@ excludedProps:
## Slots ## Slots
### `title` / `description` ### `title` / `description` :u-badge{label="Edge" class="ml-2 align-text-bottom !rounded-full" variant="subtle"}
Use the `#title` and `#description` slots to customize the Notification. Use the `#title` and `#description` slots to customize the Notification.