js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

add label to color picker

Browse Source
This commit is contained in:
Cory LaViska
2022-03-17 10:31:29 -04:00
parent 5ea578b8c8
commit ada6f533b7
16 changed files with 64 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/components/color-picker.md
View File

@@ -5,13 +5,13 @@
Color pickers allow the user to select a color.
```html preview
<sl-color-picker></sl-color-picker>
<sl-color-picker label="Select a color"></sl-color-picker>
```
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker />;
const App = () => <SlColorPicker label="Select a color" />;
```
?> This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
@@ -23,7 +23,13 @@ const App = () => <SlColorPicker />;
Use the `value` attribute to set an initial value for the color picker.
```html preview
<sl-color-picker value="#4a90e2"></sl-color-picker>
<sl-color-picker value="#4a90e2" label="Select a color"></sl-color-picker>
```
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
```
### Opacity
@@ -31,13 +37,13 @@ Use the `value` attribute to set an initial value for the color picker.
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`.
```html preview
<sl-color-picker opacity></sl-color-picker>
<sl-color-picker opacity label="Select a color"></sl-color-picker>
```
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker opacity />;
const App = () => <SlColorPicker opacity label="Select a color" />;
```
### Formats
@@ -47,9 +53,9 @@ Set the color picker's format with the `format` attribute. Valid options include
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
```html preview
<sl-color-picker format="hex" value="#4a90e2"></sl-color-picker>
<sl-color-picker format="rgb" value="rgb(80, 227, 194)"></sl-color-picker>
<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
<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>
```
```jsx react
@@ -69,9 +75,9 @@ const App = () => (
Use the `size` attribute to change the color picker's trigger size.
```html preview
<sl-color-picker size="small"></sl-color-picker>
<sl-color-picker size="medium"></sl-color-picker>
<sl-color-picker size="large"></sl-color-picker>
<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>
```
```jsx react
@@ -79,9 +85,9 @@ import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlColorPicker size="small" />
<SlColorPicker size="medium" />
<SlColorPicker size="large" />
<SlColorPicker size="small" label="Select a color" />
<SlColorPicker size="medium" label="Select a color" />
<SlColorPicker size="large" label="Select a color" />
</>
);
```
@@ -91,13 +97,13 @@ const App = () => (
The color picker can be rendered inline instead of in a dropdown using the `inline` attribute.
```html preview
<sl-color-picker inline></sl-color-picker>
<sl-color-picker inline label="Select a color"></sl-color-picker>
```
```jsx react
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlColorPicker inline />;
const App = () => <SlColorPicker inline label="Select a color" />;
```
[component-metadata:sl-color-picker]