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

chore(Notification): add progressColor and progressVariant props (#219)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
This commit is contained in:
Benjamin Canac
2023-05-22 15:01:19 +02:00
committed by GitHub
parent a56dbeab35
commit e7eea067b2
6 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/1.getting-started/3.theming.md
View File

@@ -33,7 +33,7 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
::
Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
Components that have a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
## Dark mode

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

@@ -81,7 +81,7 @@ const selected = ref(people[3])
```
::
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `optionAttribute` prop that defaults to `label`.
You can pass an array of objects to `options` and either compare on the whole object or use the `by` prop to compare on a specific key. You can configure which field will be used to display the label through the `option-attribute` prop that defaults to `label`.
::component-example
#default

2
docs/content/4.navigation/2.command-palette.md
View File

@@ -237,7 +237,7 @@ excludedProps:
The CommandPalette component takes care of the full-text search for you with [Fuse.js](https://fusejs.io). You can pass all the options of Fuse.js through the `fuse` prop.
When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `commandAttribute` prop. This will also affect the display of the command.
When searching for a command, the component will look for a `label` property on the command by default. You can customize this behaviour by overriding the `command-attribute` prop. This will also affect the display of the command.
You can also highlight the matches in the command by setting the `fuse.fuseOptions.includeMatches` to `true`. The CommandPalette component automatically takes care of the highlighting for you.

16
docs/content/5.overlays/6.notification.md
View File

@@ -114,7 +114,21 @@ baseProps:
title: 'Notification'
description: 'This is a notification.'
props:
timeout: 10000
timeout: 60000
---
::
You can change the color of the progress bar through the `progress-color` prop.
::component-card
---
baseProps:
id: 5
title: 'Notification'
description: 'This is a notification.'
timeout: 600000
props:
progressColor: 'primary'
---
::