mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
3.1 KiB
3.1 KiB
Color Picker
[component-header:sl-color-picker]
<sl-color-picker label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker label="Select a color" />;
?> This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples
Initial Value
Use the value attribute to set an initial value for the color picker.
<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
Opacity
Use the opacity attribute to enable the opacity slider. When this is enabled, the value will be displayed as HEXA, RGBA, or HSLA based on format.
<sl-color-picker value="#f5a623ff" opacity label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker opacity label="Select a color" />;
Formats
Set the color picker's format with the format attribute. Valid options include hex, rgb, and hsl. Note that the color picker's input will accept any parsable format (including CSS color names) regardless of this option.
To prevent users from toggling the format themselves, add the no-format-toggle attribute.
<sl-color-picker format="hex" value="#4a90e2" label="Select a color"></sl-color-picker>
<sl-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></sl-color-picker>
<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlColorPicker format="hex" value="#4a90e2" />
<SlColorPicker format="rgb" value="rgb(80, 227, 194)" />
<SlColorPicker format="hsl" value="hsl(290, 87%, 47%)" />
</>
);
Sizes
Use the size attribute to change the color picker's trigger size.
<sl-color-picker size="small" label="Select a color"></sl-color-picker>
<sl-color-picker size="medium" label="Select a color"></sl-color-picker>
<sl-color-picker size="large" label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlColorPicker size="small" label="Select a color" />
<SlColorPicker size="medium" label="Select a color" />
<SlColorPicker size="large" label="Select a color" />
</>
);
Inline
The color picker can be rendered inline instead of in a dropdown using the inline attribute.
<sl-color-picker inline label="Select a color"></sl-color-picker>
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker inline label="Select a color" />;
[component-metadata:sl-color-picker]