From f374b14dba58b7422493077d3f3867d76cce0e2b Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 23 Jul 2024 15:46:08 +0200 Subject: [PATCH] docs: update badges --- docs/content/2.components/alert.md | 2 +- docs/content/2.components/select-menu.md | 2 +- docs/content/2.components/table.md | 2 +- docs/content/2.components/tabs.md | 6 ++---- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/content/2.components/alert.md b/docs/content/2.components/alert.md index b88fa394..c6d96cd1 100644 --- a/docs/content/2.components/alert.md +++ b/docs/content/2.components/alert.md @@ -175,7 +175,7 @@ Use the `#avatar` slot to customize the displayable avatar. :component-example{component="alert-example-avatar"} -### `actions` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"} +### `actions` Use the `#actions` slot to add custom user interaction elements. diff --git a/docs/content/2.components/select-menu.md b/docs/content/2.components/select-menu.md index 496de7a0..3b7f8c38 100644 --- a/docs/content/2.components/select-menu.md +++ b/docs/content/2.components/select-menu.md @@ -188,7 +188,7 @@ componentProps: --- :: -Pass a function to the `show-create-option-when` prop to control wether or not to show the create option. This function takes two arguments: the query (as the first argument) and an array of current results (as the second argument). It should return true to display the create option. +Pass a function to the `show-create-option-when` prop to control wether or not to show the create option. This function takes two arguments: the query (as the first argument) and an array of current results (as the second argument). It should return true to display the create option. :u-badge{label="New" class="!rounded-full" variant="subtle"} The example below shows how to make the create option visible when the query is at least three characters long and does not exactly match any of the current results (case insensitive). diff --git a/docs/content/2.components/table.md b/docs/content/2.components/table.md index fa9776d9..48318d32 100644 --- a/docs/content/2.components/table.md +++ b/docs/content/2.components/table.md @@ -29,7 +29,7 @@ Use the `columns` prop to configure which columns to display. It's an array of o - `sortable` - Whether the column is sortable. Defaults to `false`. - `direction` - The sort direction to use on first click. Defaults to `asc`. - `class` - The class to apply to the column cells. -- `rowClass` - The class to apply to the data column cells. +- `rowClass` - The class to apply to the data column cells. :u-badge{label="New" class="!rounded-full" variant="subtle"} - `sort` - Pass your own `sort` function. Defaults to a simple _greater than_ / _less than_ comparison. ::component-example{class="grid"} diff --git a/docs/content/2.components/tabs.md b/docs/content/2.components/tabs.md index f9b19def..cdbc1789 100644 --- a/docs/content/2.components/tabs.md +++ b/docs/content/2.components/tabs.md @@ -64,7 +64,7 @@ componentProps: --- :: -You can use the `content` prop and set it to `false` to avoid the rendering of the HTML content if you don't need it. :u-badge{label="New" class="!rounded-full" variant="subtle"} +You can use the `content` prop and set it to `false` to avoid the rendering of the HTML content if you don't need it. ### Control the selected index @@ -92,14 +92,12 @@ Use the `#default` slot to customize the content of the trigger buttons. You wil :component-example{component="tabs-example-default-slot"} - -### `icon` +### `icon` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"} Use the `#icon` slot to customize the icon of the trigger buttons. You will have access to the `item`, `index`, `selected` and `disabled` in the slot scope. :component-example{component="tabs-example-icon-slot"} - ### `item` Use the `#item` slot to customize the items content. You will have access to the `item`, `index` and `selected` properties in the slot scope.