kopia lustrzana https://github.com/shoelace-style/shoelace
react examples and fixes
Cory LaViska
rodzic
a250d9b184
commit
1dd556d6c8
|
|
@ -239,10 +239,6 @@
|
|||
.querySelector('.code-block__button--react')
|
||||
?.classList.toggle('code-block__button--selected', flavor === 'react');
|
||||
});
|
||||
|
||||
// Expand the code block
|
||||
codeBlock.classList.add('code-block--expanded');
|
||||
codeBlock.querySelector('.code-block__toggle').setAttribute('aria-expanded', 'true');
|
||||
});
|
||||
|
||||
// Expand and collapse code blocks
|
||||
|
|
@ -319,6 +315,7 @@
|
|||
'\n' +
|
||||
'body {\n' +
|
||||
' font: 16px sans-serif;\n' +
|
||||
' padding: 1rem;\n' +
|
||||
'}';
|
||||
|
||||
// Docs: https://blog.codepen.io/documentation/prefill/
|
||||
|
|
|
|||
|
|
@ -11,6 +11,17 @@ Alerts are used to display important messages either inline or as toast notifica
|
|||
</sl-alert>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert open>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
This is a standard alert. You can customize its content and even the icon.
|
||||
</SlAlert>
|
||||
);
|
||||
```
|
||||
|
||||
?> Alerts will not be visible if the `open` attribute is not present.
|
||||
|
||||
## Examples
|
||||
|
|
@ -59,6 +70,52 @@ Set the `type` attribute to change the alert's type.
|
|||
</sl-alert>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAlert type="primary" open>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert type="success" open>
|
||||
<SlIcon slot="icon" name="check2-circle" />
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert type="neutral" open>
|
||||
<SlIcon slot="icon" name="gear" />
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take affect on next login.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert type="warning" open>
|
||||
<SlIcon slot="icon" name="exclamation-triangle" />
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert type="danger" open>
|
||||
<SlIcon slot="icon" name="exclamation-octagon" />
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</SlAlert>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Closable
|
||||
|
||||
Add the `closable` attribute to show a close button that will hide the alert.
|
||||
|
|
@ -77,6 +134,31 @@ Add the `closable` attribute to show a close button that will hide the alert.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
function handleHide() {
|
||||
setOpen(false);
|
||||
setTimeout(() => setOpen(true), 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlAlert
|
||||
open={open}
|
||||
closable
|
||||
onSlAfterHide={handleHide}
|
||||
>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
You can close this alert any time!
|
||||
</SlAlert>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Without Icons
|
||||
|
||||
Icons are optional. Simply omit the `icon` slot if you don't want them.
|
||||
|
|
@ -87,6 +169,16 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
|
|||
</sl-alert>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAlert } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert type="primary" open>
|
||||
Nothing fancy here, just a simple alert.
|
||||
</SlAlert>
|
||||
);
|
||||
```
|
||||
|
||||
### Duration
|
||||
|
||||
Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
|
||||
|
|
@ -116,6 +208,46 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
SlAlert,
|
||||
SlButton,
|
||||
SlIcon
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.alert-duration sl-alert {
|
||||
margin-top: var(--sl-spacing-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="alert-duration">
|
||||
<SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
|
||||
|
||||
<SlAlert
|
||||
type="primary"
|
||||
duration="3000"
|
||||
open={open}
|
||||
closable
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
This alert will automatically hide itself after three seconds, unless you interact with it.
|
||||
</SlAlert>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Toast Notifications
|
||||
|
||||
To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
|
||||
|
|
@ -173,6 +305,81 @@ You should always use the `closable` attribute so users can dismiss the notifica
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
SlAlert,
|
||||
SlButton,
|
||||
SlIcon
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
function showToast(alert) {
|
||||
alert.toast();
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const primary = useRef(null);
|
||||
const success = useRef(null);
|
||||
const neutral = useRef(null);
|
||||
const warning = useRef(null);
|
||||
const danger = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlButton type="primary" onClick={() => primary.current.toast()}>
|
||||
Primary
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="success" onClick={() => success.current.toast()}>
|
||||
Success
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="neutral" onClick={() => neutral.current.toast()}>
|
||||
Neutral
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="warning" onClick={() => warning.current.toast()}>
|
||||
Warning
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="danger" onClick={() => danger.current.toast()}>
|
||||
Danger
|
||||
</SlButton>
|
||||
|
||||
<SlAlert ref={primary} type="primary" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={success} type="success" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="check2-circle" />
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={neutral} type="neutral" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="gear" />
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take affect on next login.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={warning} type="warning" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="exclamation-triangle" />
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={danger} type="danger" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="exclamation-octagon" />
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</SlAlert>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Creating Toasts Imperatively
|
||||
|
||||
For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.
|
||||
|
|
|
|||
|
|
@ -6,11 +6,24 @@ A component for displaying animated GIFs and WEBPs that play and pause on intera
|
|||
|
||||
```html preview
|
||||
<sl-animated-image
|
||||
src="/assets/images/walk.gif"
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
></sl-animated-image>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
?> This component uses `<canvas>` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
|
||||
|
||||
## Examples
|
||||
|
||||
### WEBP Images
|
||||
|
|
@ -19,31 +32,54 @@ Both GIF and WEBP images are supported.
|
|||
|
||||
```html preview
|
||||
<sl-animated-image
|
||||
src="/assets/images/tie.webp"
|
||||
src="https://shoelace.style/assets/images/tie.webp"
|
||||
alt="Animation of a shoe being tied"
|
||||
></sl-animated-image>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
src="https://shoelace.style/assets/images/tie.webp"
|
||||
alt="Animation of a shoe being tied"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Setting a Width and Height
|
||||
|
||||
To set a custom size, apply a width and/or height to the host element.
|
||||
|
||||
```html preview
|
||||
<sl-animated-image
|
||||
src="/assets/images/walk.gif"
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
style="width: 150px; height: 200px;"
|
||||
>
|
||||
</sl-animated-image>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
style={{ width: '150px', height: '200px' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Customizing the Control Box
|
||||
|
||||
You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
|
||||
|
||||
```html preview
|
||||
<sl-animated-image
|
||||
src="/assets/images/walk.gif"
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
class="animated-image-custom-control-box"
|
||||
></sl-animated-image>
|
||||
|
|
@ -60,4 +96,31 @@ You can change the appearance and location of the control box by targeting the `
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAnimatedImage } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.animated-image-custom-control-box::part(control-box) {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
background-color: deeppink;
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAnimatedImage
|
||||
className="animated-image-custom-control-box"
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
/>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-animated-image]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Avatars are used to represent a person or object.
|
|||
<sl-avatar></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar>Button</SlAvatar>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Images
|
||||
|
|
@ -21,6 +29,17 @@ To use an image for the avatar, set the `image` and `alt` attributes. This will
|
|||
></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
alt="Gray tabby kitten looking down"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Initials
|
||||
|
||||
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
|
||||
|
|
@ -29,6 +48,14 @@ When you don't have an image to use, you can set the `initials` attribute to sho
|
|||
<sl-avatar initials="SL"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar initials="SL" />
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
|
||||
|
|
@ -47,18 +74,47 @@ When no image or initials are set, an icon will be shown. The default avatar sho
|
|||
</sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar>
|
||||
<SlIcon slot="icon" name="image" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar>
|
||||
<SlIcon slot="icon" name="archive" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar>
|
||||
<SlIcon slot="icon" name="briefcase" />
|
||||
</SlAvatar>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Shapes
|
||||
|
||||
Avatars can be shaped using the `shape` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-avatar shape="square"></sl-avatar>
|
||||
|
||||
<sl-avatar shape="rounded"></sl-avatar>
|
||||
|
||||
<sl-avatar shape="circle"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar shape="square" />
|
||||
<SlAvatar shape="rounded" />
|
||||
<SlAvatar shape="circle" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Avatar Groups
|
||||
|
||||
|
|
@ -83,4 +139,31 @@ You can group avatars with a few lines of CSS.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlAvatar, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.avatar-group sl-avatar:not(:first-of-type) {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px rgb(var(--sl-color-neutral-0));
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="avatar-group">
|
||||
<SlAvatar image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right" />
|
||||
<SlAvatar image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
|
||||
<SlAvatar image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80" />
|
||||
<SlAvatar image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80" />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-avatar]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Badges are used to draw attention and display statuses or counts.
|
|||
<sl-badge>Badge</sl-badge>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBadge>Badge</SlBadge>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Types
|
||||
|
|
@ -22,6 +30,20 @@ Set the `type` attribute to change the badge's type.
|
|||
<sl-badge type="danger">Danger</sl-badge>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBadge type="primary">Primary</SlBadge>
|
||||
<SlBadge type="success">Success</SlBadge>
|
||||
<SlBadge type="neutral">Neutral</SlBadge>
|
||||
<SlBadge type="warning">Warning</SlBadge>
|
||||
<SlBadge type="danger">Danger</SlBadge>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Badges
|
||||
|
||||
Use the `pill` attribute to give badges rounded edges.
|
||||
|
|
@ -34,6 +56,20 @@ Use the `pill` attribute to give badges rounded edges.
|
|||
<sl-badge type="danger" pill>Danger</sl-badge>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBadge type="primary" pill>Primary</SlBadge>
|
||||
<SlBadge type="success" pill>Success</SlBadge>
|
||||
<SlBadge type="neutral" pill>Neutral</SlBadge>
|
||||
<SlBadge type="warning" pill>Warning</SlBadge>
|
||||
<SlBadge type="danger" pill>Danger</SlBadge>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pulsating Badges
|
||||
|
||||
Use the `pulse` attribute to draw attention to the badge with a subtle animation.
|
||||
|
|
@ -54,6 +90,30 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.badge-pulse sl-badge:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="badge-pulse">
|
||||
<SlBadge type="primary" pill pulse>1</SlBadge>
|
||||
<SlBadge type="success" pill pulse>1</SlBadge>
|
||||
<SlBadge type="neutral" pill pulse>1</SlBadge>
|
||||
<SlBadge type="warning" pill pulse>1</SlBadge>
|
||||
<SlBadge type="danger" pill pulse>1</SlBadge>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### With Buttons
|
||||
|
||||
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
|
||||
|
|
@ -75,6 +135,29 @@ One of the most common use cases for badges is attaching them to buttons. To mak
|
|||
</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge, SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton>
|
||||
Requests
|
||||
<SlBadge pill>30</SlBadge>
|
||||
</SlButton>
|
||||
|
||||
<SlButton style={{ marginLeft: '1rem' }}>
|
||||
Warnings
|
||||
<SlBadge type="warning" pill>8</SlBadge>
|
||||
</SlButton>
|
||||
|
||||
<SlButton style={{ marginLeft: '1rem' }}>
|
||||
Errors
|
||||
<SlBadge type="danger" pill>6</SlBadge>
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### With Menu Items
|
||||
|
||||
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
|
||||
|
|
@ -87,4 +170,22 @@ When including badges in menu items, use the `suffix` slot to make sure they're
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBadge, SlButton, SlMenu, SlMenuItem, SlMenuLabel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '240px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuLabel>Messages</SlMenuLabel>
|
||||
<SlMenuItem>Comments <SlBadge slot="suffix" type="neutral" pill>4</SlBadge></SlMenuItem>
|
||||
<SlMenuItem>Replies <SlBadge slot="suffix" type="neutral" pill>12</SlBadge></SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-badge]
|
||||
|
|
|
|||
|
|
@ -15,6 +15,21 @@ Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to repres
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>
|
||||
<SlIcon slot="prefix" name="house"></SlIcon>
|
||||
Home
|
||||
</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
|
||||
|
||||
[component-metadata:sl-breadcrumb-item]
|
||||
|
|
|
|||
|
|
@ -15,6 +15,19 @@ Breadcrumbs are usually placed before a page's main content with the current pag
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Women's</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Shirts & Tops</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Breadcrumb Links
|
||||
|
|
@ -43,6 +56,30 @@ For websites, you'll probably want to use links instead. You can make any breadc
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBreadcrumb, SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem href="https://example.com/home">
|
||||
Homepage
|
||||
</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services">
|
||||
Our Services
|
||||
</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services/digital">
|
||||
Digital Media
|
||||
</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">
|
||||
Web Design
|
||||
</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Separators
|
||||
|
||||
Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
|
||||
|
|
@ -74,6 +111,40 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
||||
import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBreadcrumb>
|
||||
<sl-icon name="dot" slot="separator" />
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<SlBreadcrumb>
|
||||
<sl-icon name="arrow-right" slot="separator" />
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<SlBreadcrumb>
|
||||
<span slot="separator">/</span>
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefixes
|
||||
|
||||
Use the `prefix` slot to add content before any breadcrumb item.
|
||||
|
|
@ -89,6 +160,21 @@ Use the `prefix` slot to add content before any breadcrumb item.
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>
|
||||
<sl-icon slot="prefix" name="house"></sl-icon>
|
||||
Home
|
||||
</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Articles</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### Suffixes
|
||||
|
||||
Use the `suffix` slot to add content after any breadcrumb item.
|
||||
|
|
@ -104,6 +190,21 @@ Use the `suffix` slot to add content after any breadcrumb item.
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlBreadcrumb, SlBreadcrumbItem, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Documents</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Policies</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>
|
||||
Security
|
||||
<SlIcon slot="suffix" name="shield-lock"></SlIcon>
|
||||
</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### With Dropdowns
|
||||
|
||||
Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
|
||||
|
|
@ -129,4 +230,37 @@ Dropdown menus can be placed in a prefix or suffix slot to provide additional op
|
|||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlBreadcrumb,
|
||||
SlBreadcrumbItem,
|
||||
SlButton,
|
||||
SlDropdown,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>
|
||||
Web Design
|
||||
<SlDropdown slot="suffix">
|
||||
<SlButton slot="trigger" size="small" circle>
|
||||
<SlIcon label="More options" name="three-dots"></SlIcon>
|
||||
</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem checked>Web Design</SlMenuItem>
|
||||
<SlMenuItem>Web Development</SlMenuItem>
|
||||
<SlMenuItem>Marketing</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-breadcrumb]
|
||||
|
|
|
|||
|
|
@ -12,6 +12,18 @@ Button groups can be used to group related buttons into sections.
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup>
|
||||
<SlButton>Left</SlButton>
|
||||
<SlButton>Center</SlButton>
|
||||
<SlButton>Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Button Sizes
|
||||
|
|
@ -42,6 +54,36 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup>
|
||||
<SlButton size="small">Left</SlButton>
|
||||
<SlButton size="small">Center</SlButton>
|
||||
<SlButton size="small">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton size="medium">Left</SlButton>
|
||||
<SlButton size="medium">Center</SlButton>
|
||||
<SlButton size="medium">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton size="large">Left</SlButton>
|
||||
<SlButton size="large">Center</SlButton>
|
||||
<SlButton size="large">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button's `type` attribute.
|
||||
|
|
@ -86,6 +128,52 @@ Theme buttons are supported through the button's `type` attribute.
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup>
|
||||
<SlButton type="primary">Left</SlButton>
|
||||
<SlButton type="primary">Center</SlButton>
|
||||
<SlButton type="primary">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton type="success">Left</SlButton>
|
||||
<SlButton type="success">Center</SlButton>
|
||||
<SlButton type="success">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton type="neutral">Left</SlButton>
|
||||
<SlButton type="neutral">Center</SlButton>
|
||||
<SlButton type="neutral">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton type="warning">Left</SlButton>
|
||||
<SlButton type="warning">Center</SlButton>
|
||||
<SlButton type="warning">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton type="danger">Left</SlButton>
|
||||
<SlButton type="danger">Center</SlButton>
|
||||
<SlButton type="danger">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Buttons
|
||||
|
||||
Pill buttons are supported through the button's `pill` attribute.
|
||||
|
|
@ -114,6 +202,36 @@ Pill buttons are supported through the button's `pill` attribute.
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup>
|
||||
<SlButton size="small" pill>Left</SlButton>
|
||||
<SlButton size="small" pill>Center</SlButton>
|
||||
<SlButton size="small" pill>Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton size="medium" pill>Left</SlButton>
|
||||
<SlButton size="medium" pill>Center</SlButton>
|
||||
<SlButton size="medium" pill>Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButtonGroup>
|
||||
<SlButton size="large" pill>Left</SlButton>
|
||||
<SlButton size="large" pill>Center</SlButton>
|
||||
<SlButton size="large" pill>Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Dropdowns in Button Groups
|
||||
|
||||
Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
|
||||
|
|
@ -133,6 +251,31 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlButtonGroup,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem,
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup>
|
||||
<SlButton>Button</SlButton>
|
||||
<SlButton>Button</SlButton>
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Dropdown</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Item 1</SlMenuItem>
|
||||
<SlMenuItem>Item 2</SlMenuItem>
|
||||
<SlMenuItem>Item 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Split Buttons
|
||||
|
||||
Create a split button using a button and a dropdown.
|
||||
|
|
@ -151,6 +294,30 @@ Create a split button using a button and a dropdown.
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlButtonGroup,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem,
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup>
|
||||
<SlButton type="primary">Save</SlButton>
|
||||
<SlDropdown placement="bottom-end">
|
||||
<SlButton slot="trigger" type="primary" caret></SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Save</SlMenuItem>
|
||||
<SlMenuItem>Save as…</SlMenuItem>
|
||||
<SlMenuItem>Save all</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Tooltips in Button Groups
|
||||
|
||||
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
|
||||
|
|
@ -171,6 +338,32 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlButtonGroup,
|
||||
SlTooltip
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup>
|
||||
<SlTooltip content="I'm on the left">
|
||||
<SlButton>Left</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="I'm in the middle">
|
||||
<SlButton>Center</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="I'm on the right">
|
||||
<SlButton>Right</SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Toolbar Example
|
||||
|
||||
Create interactive toolbars with button groups.
|
||||
|
|
@ -218,4 +411,60 @@ Create interactive toolbars with button groups.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlButtonGroup,
|
||||
SlIcon,
|
||||
SlTooltip
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.button-group-toolbar sl-button-group:not(:last-of-type) {
|
||||
margin-right: var(--sl-spacing-x-small);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="button-group-toolbar">
|
||||
<SlButtonGroup label="History">
|
||||
<SlTooltip content="Undo">
|
||||
<SlButton><SlIcon name="arrow-counterclockwise"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Redo">
|
||||
<SlButton><SlIcon name="arrow-clockwise"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
|
||||
<SlButtonGroup label="Formatting">
|
||||
<SlTooltip content="Bold">
|
||||
<SlButton><SlIcon name="type-bold"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Italic">
|
||||
<SlButton><SlIcon name="type-italic"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Underline">
|
||||
<SlButton><SlIcon name="type-underline"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlTooltip content="Align Left">
|
||||
<SlButton><SlIcon name="justify-left"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Align Center">
|
||||
<SlButton><SlIcon name="justify"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Align Right">
|
||||
<SlButton><SlIcon name="justify-right"></SlIcon></SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-button-group]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Buttons represent actions that are available to the user.
|
|||
<sl-button>Button</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlButton>Button</SlButton>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Types
|
||||
|
|
@ -23,6 +31,21 @@ Use the `type` attribute to set the button's type.
|
|||
<sl-button type="danger">Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default">Default</SlButton>
|
||||
<SlButton type="primary">Primary</SlButton>
|
||||
<SlButton type="success">Success</SlButton>
|
||||
<SlButton type="neutral">Neutral</SlButton>
|
||||
<SlButton type="warning">Warning</SlButton>
|
||||
<SlButton type="danger">Danger</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a button's size.
|
||||
|
|
@ -33,6 +56,18 @@ Use the `size` attribute to change a button's size.
|
|||
<sl-button size="large">Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small">Small</SlButton>
|
||||
<SlButton size="medium">Medium</SlButton>
|
||||
<SlButton size="large">Large</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Outline Buttons
|
||||
|
||||
Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
|
||||
|
|
@ -46,6 +81,21 @@ Use the `outline` attribute to draw outlined buttons with transparent background
|
|||
<sl-button type="danger" outline>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" outline>Default</SlButton>
|
||||
<SlButton type="primary" outline>Primary</SlButton>
|
||||
<SlButton type="success" outline>Success</SlButton>
|
||||
<SlButton type="neutral" outline>Neutral</SlButton>
|
||||
<SlButton type="warning" outline>Warning</SlButton>
|
||||
<SlButton type="danger" outline>Danger</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Buttons
|
||||
|
||||
Use the `pill` attribute to give buttons rounded edges.
|
||||
|
|
@ -56,6 +106,18 @@ Use the `pill` attribute to give buttons rounded edges.
|
|||
<sl-button size="large" pill>Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small" pill>Small</SlButton>
|
||||
<SlButton size="medium" pill>Medium</SlButton>
|
||||
<SlButton size="large" pill>Large</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Circle Buttons
|
||||
|
||||
Use the `circle` attribute to create circular icon buttons.
|
||||
|
|
@ -66,6 +128,18 @@ Use the `circle` attribute to create circular icon buttons.
|
|||
<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" size="small" circle><SlIcon name="gear" /></SlButton>
|
||||
<SlButton type="default" size="medium" circle><SlIcon name="gear" /></SlButton>
|
||||
<SlButton type="default" size="large" circle><SlIcon name="gear" /></SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Text Buttons
|
||||
|
||||
Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
|
||||
|
|
@ -76,6 +150,18 @@ Use the `text` type to create text buttons that share the same size as regular b
|
|||
<sl-button type="text" size="large">Text</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="text" size="small">Text</SlButton>
|
||||
<SlButton type="text" size="medium">Text</SlButton>
|
||||
<SlButton type="text" size="large">Text</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Link Buttons
|
||||
|
||||
It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. <kbd>CMD/CTRL/SHIFT + CLICK</kbd>) and exposes the `target` and `download` attributes.
|
||||
|
|
@ -87,6 +173,19 @@ It's often helpful to have a button that works like a link. This is possible by
|
|||
<sl-button href="https://example.com/" disabled>Disabled</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton href="https://example.com/">Link</SlButton>
|
||||
<SlButton href="https://example.com/" target="_blank">New Window</SlButton>
|
||||
<SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">Download</SlButton>
|
||||
<SlButton href="https://example.com/" disabled>Disabled</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
?> When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
|
||||
|
||||
### Setting a Custom Width
|
||||
|
|
@ -99,6 +198,18 @@ As expected, buttons can be given a custom width by setting its `width`. This is
|
|||
<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</SlButton>
|
||||
<SlButton type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</SlButton>
|
||||
<SlButton type="default" size="large" style="width: 100%;">Large</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefix and Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
|
@ -157,6 +268,66 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" size="small">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default" size="small">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default" size="small">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
|
||||
<br /><br/ >
|
||||
|
||||
<SlButton type="default">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<SlButton type="default" size="large">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default" size="large">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton type="default" size="large">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Caret
|
||||
|
||||
Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
|
||||
|
|
@ -167,6 +338,18 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger
|
|||
<sl-button size="large" caret>Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small" caret>Small</SlButton>
|
||||
<SlButton size="medium" caret>Medium</SlButton>
|
||||
<SlButton size="large" caret>Large</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
|
||||
|
|
@ -180,6 +363,21 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
|
|||
<sl-button type="danger" loading>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" loading>Default</SlButton>
|
||||
<SlButton type="primary" loading>Primary</SlButton>
|
||||
<SlButton type="success" loading>Success</SlButton>
|
||||
<SlButton type="neutral" loading>Neutral</SlButton>
|
||||
<SlButton type="warning" loading>Warning</SlButton>
|
||||
<SlButton type="danger" loading>Danger</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
|
||||
|
|
@ -193,6 +391,21 @@ Use the `disabled` attribute to disable a button. Clicks will be suppressed unti
|
|||
<sl-button type="danger" disabled>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton type="default" disabled>Default</SlButton>
|
||||
<SlButton type="primary" disabled>Primary</SlButton>
|
||||
<SlButton type="success" disabled>Success</SlButton>
|
||||
<SlButton type="neutral" disabled>Neutral</SlButton>
|
||||
<SlButton type="warning" disabled>Warning</SlButton>
|
||||
<SlButton type="danger" disabled>Danger</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Styling Buttons
|
||||
|
||||
This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's type attribute instead of a class (e.g. `sl-button[type="primary"]`).
|
||||
|
|
|
|||
|
|
@ -39,6 +39,53 @@ Cards can be used to group related subjects in a container.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlCard,
|
||||
SlRating
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: rgb(var(--sl-color-neutral-500));
|
||||
}
|
||||
|
||||
.card-overview [slot="footer"] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<SlButton type="primary" pill>More Info</SlButton>
|
||||
<SlRating></SlRating>
|
||||
</div>
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
## Basic Card
|
||||
|
|
@ -57,6 +104,26 @@ Basic cards aren't very exciting, but they can display any content you want them
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCard } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.card-basic {
|
||||
max-width: 300px;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard class="card-basic">
|
||||
This is just a basic card. No image, no header, and no footer. Just your content.
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Card with Header
|
||||
|
||||
Headers can be used to display titles and more.
|
||||
|
|
@ -73,26 +140,66 @@ Headers can be used to display titles and more.
|
|||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot="header"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-header [slot="header"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCard, SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot="header"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard class="card-header">
|
||||
<div slot="header">
|
||||
Header Title
|
||||
|
||||
<SlIconButton name="gear"></SlIconButton>
|
||||
</div>
|
||||
|
||||
This card has a header. You can put all sorts of things in it!
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Card with Footer
|
||||
|
||||
Footers can be used to display actions, summaries, or other relevant content.
|
||||
|
|
@ -120,6 +227,41 @@ Footers can be used to display actions, summaries, or other relevant content.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlCard,
|
||||
SlRating
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.card-footer {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-footer [slot="footer"] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard class="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<div slot="footer">
|
||||
<SlRating></SlRating>
|
||||
<SlButton slot="footer" type="primary">Preview</SlButton>
|
||||
</div>
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Images
|
||||
|
||||
Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
|
||||
|
|
@ -141,4 +283,29 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCard } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.card-image {
|
||||
max-width: 300px;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard class="card-image">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
alt="A kitten walks towards camera on top of pallet."
|
||||
/>
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-card]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Checkboxes allow the user to toggle an option on or off.
|
|||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlCheckbox>Checkbox</SlCheckbox>
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
|
@ -20,6 +28,14 @@ Use the `checked` attribute to activate the checkbox.
|
|||
<sl-checkbox checked>Checked</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlCheckbox checked>Checked</SlCheckbox>
|
||||
);
|
||||
```
|
||||
|
||||
### Indeterminate
|
||||
|
||||
Use the `indeterminate` attribute to make the checkbox indeterminate.
|
||||
|
|
@ -28,6 +44,14 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
|
|||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlCheckbox indeterminate>Indeterminate</SlCheckbox>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable the checkbox.
|
||||
|
|
@ -36,4 +60,12 @@ Use the `disabled` attribute to disable the checkbox.
|
|||
<sl-checkbox disabled>Disabled</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlCheckbox } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlCheckbox disabled>Disabled</SlCheckbox>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-checkbox]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Color pickers allow the user to select a color.
|
|||
<sl-color-picker></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlColorPicker />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Opacity
|
||||
|
|
@ -18,6 +26,14 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
|
|||
<sl-color-picker opacity></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlColorPicker opacity />
|
||||
);
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
|
@ -30,6 +46,18 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
|
|||
<sl-color-picker format="hsl" value="hsl(290, 87%, 47%)"></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
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.
|
||||
|
|
@ -40,6 +68,17 @@ Use the `size` attribute to change the color picker's trigger size.
|
|||
<sl-color-picker size="large"></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlColorPicker size="small" />
|
||||
<SlColorPicker size="medium" />
|
||||
<SlColorPicker size="large" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Inline
|
||||
|
||||
|
|
@ -49,4 +88,12 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
|
|||
<sl-color-picker inline></sl-color-picker>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlColorPicker } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlColorPicker inline />
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-color-picker]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,17 @@ Details show a brief summary and expand to show additional content.
|
|||
</sl-details>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDetails } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDetails summary="Toggle Me">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</SlDetails>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Disabled
|
||||
|
|
@ -24,6 +35,17 @@ Use the `disable` attribute to prevent the details from expanding.
|
|||
</sl-details>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDetails } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDetails summary="Disabled" disabled>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</SlDetails>
|
||||
);
|
||||
```
|
||||
|
||||
### Grouping Details
|
||||
|
||||
Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `sl-show` event.
|
||||
|
|
|
|||
|
|
@ -22,6 +22,28 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDialog>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## UX Tips
|
||||
|
||||
- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
|
||||
|
|
@ -52,6 +74,33 @@ Use the `--width` custom property to set the dialog's width.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
style={{ '--width': '50vw' }}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDialog>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Scrolling
|
||||
|
||||
By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
|
||||
|
|
@ -76,6 +125,35 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
<div style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
|
||||
padding: '0 1rem'
|
||||
}}>
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDialog>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Preventing the Dialog from Closing
|
||||
|
||||
By default, dialogs will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
|
||||
|
|
@ -102,6 +180,33 @@ To keep the dialog open in such cases, you can cancel the `sl-request-close` eve
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDialog } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
onSlRequestClose={event => event.preventDefault()}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
This dialog will not close unless you use the button below.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Save & Close
|
||||
</SlButton>
|
||||
</SlDialog>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Customizing Initial Focus
|
||||
|
||||
By default, the dialog's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the dialog. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
|
||||
|
|
@ -130,4 +235,41 @@ By default, the dialog's panel will gain focus when opened. This allows the firs
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlDialog,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const input = useRef(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function handleInitialFocus(event) {
|
||||
event.preventDefault();
|
||||
input.current.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDialog
|
||||
label="Dialog"
|
||||
open={open}
|
||||
onSlInitialFocus={handleInitialFocus}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDialog>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Dialog</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-dialog]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,13 @@ Dividers are used to visually separate or group elements.
|
|||
<sl-divider></sl-divider>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDivider />
|
||||
);
|
||||
```
|
||||
## Examples
|
||||
|
||||
### Width
|
||||
|
|
@ -18,6 +25,14 @@ Use the `--width` custom property to change the width of the divider.
|
|||
<sl-divider style="--width: 4px;"></sl-divider>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDivider style={{ '--width': '4px' }} />
|
||||
);
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
Use the `--color` custom property to change the color of the divider.
|
||||
|
|
@ -26,6 +41,14 @@ Use the `--color` custom property to change the color of the divider.
|
|||
<sl-divider style="--color: tomato;"></sl-divider>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDivider style={{ '--color': 'tomato' }} />
|
||||
);
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
|
||||
|
|
@ -38,6 +61,18 @@ Use the `--spacing` custom property to change the amount of space between the di
|
|||
</div>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
Above
|
||||
<SlDivider style={{ '--spacing': '2rem' }} />
|
||||
Below
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Vertical
|
||||
|
||||
Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
|
||||
|
|
@ -52,6 +87,26 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
|
|||
</div>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
height: '2rem'
|
||||
}}
|
||||
>
|
||||
First
|
||||
<SlDivider vertical />
|
||||
Middle
|
||||
<SlDivider vertical />
|
||||
Last
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
### Menu Dividers
|
||||
|
||||
Use dividers in [menus](/components/menu) to visually group menu items.
|
||||
|
|
@ -68,4 +123,30 @@ Use dividers in [menus](/components/menu) to visually group menu items.
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlDivider,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem value="1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="3">Option 3</SlMenuItem>
|
||||
<sl-divider />
|
||||
<SlMenuItem value="4">Option 4</SlMenuItem>
|
||||
<SlMenuItem value="5">Option 5</SlMenuItem>
|
||||
<SlMenuItem value="6">Option 6</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-divider]
|
||||
|
|
|
|||
|
|
@ -22,6 +22,28 @@ Drawers slide in from a container to expose additional options and information.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Slide in From Start
|
||||
|
|
@ -46,6 +68,33 @@ By default, drawers slide in from the end. To make the drawer slide in from the
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="start"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
This drawer slides in from the start.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Slide in From Top
|
||||
|
||||
To make the drawer slide in from the top, set the `placement` attribute to `top`.
|
||||
|
|
@ -68,6 +117,33 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="top"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
This drawer slides in from the top.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Slide in From Bottom
|
||||
|
||||
To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
|
||||
|
|
@ -90,6 +166,33 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
placement="bottom"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
This drawer slides in from the bottom.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Contained to an Element
|
||||
|
||||
By default, the drawer slides out of its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport. To make the drawer slide out of its parent element, add the `contained` attribute and `position: relative` to the parent.
|
||||
|
|
@ -118,6 +221,47 @@ By default, the drawer slides out of its [containing block](https://developer.mo
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
border: 'solid 2px rgb(var(--sl-panel-border-color))',
|
||||
height: '300px',
|
||||
padding: '1rem',
|
||||
marginBottom: '1rem'
|
||||
}}
|
||||
>
|
||||
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
|
||||
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
contained
|
||||
class="drawer-contained"
|
||||
open={open}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
style={{ '--size': '50%' }}
|
||||
>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
</div>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.
|
||||
|
|
@ -140,6 +284,32 @@ Use the `--size` custom property to set the drawer's size. This will be applied
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open} onSlAfterHide={() => setOpen(false)}
|
||||
style={{ '--size': '50vw' }}
|
||||
>
|
||||
This drawer is always 50% of the viewport.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Scrolling
|
||||
|
||||
By design, a drawer's height will never exceed 100% of its container. As such, drawers will not scroll with the page to ensure the header and footer are always accessible to the user.
|
||||
|
|
@ -164,6 +334,34 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
|
||||
<div style={{
|
||||
height: '150vh',
|
||||
border: 'dashed 2px rgb(var(--sl-color-neutral-200))',
|
||||
padding: '0 1rem'
|
||||
}}>
|
||||
<p>Scroll down and give it a try! 👇</p>
|
||||
</div>
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Preventing the Drawer from Closing
|
||||
|
||||
By default, drawers will close when the user clicks the close button, clicks the overlay, or presses the <kbd>Escape</kbd> key. In most cases, the default behavior is the best behavior in terms of UX. However, there are situations where this may be undesirable, such as when data loss will occur.
|
||||
|
|
@ -173,7 +371,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
|
|||
|
||||
```html preview
|
||||
<sl-drawer label="Drawer" class="drawer-deny-close">
|
||||
This dialog will not close unless you use the button below.
|
||||
This drawer will not close unless you use the button below.
|
||||
<sl-button slot="footer" type="primary">Save & Close</sl-button>
|
||||
</sl-drawer>
|
||||
|
||||
|
|
@ -191,6 +389,33 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlDrawer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open}
|
||||
onSlRequestClose={event => event.preventDefault()}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
This drawer will not close unless you use the button below.
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Save & Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Customizing Initial Focus
|
||||
|
||||
By default, the drawer's panel will gain focus when opened. This allows the first tab press to focus on the first tabbable element within the drawer. To set focus on a different element, listen for and cancel the `sl-initial-focus` event.
|
||||
|
|
@ -219,4 +444,41 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useRef, useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlDrawer,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const input = useRef(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function handleInitialFocus(event) {
|
||||
event.preventDefault();
|
||||
input.current.focus();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlDrawer
|
||||
label="Drawer"
|
||||
open={open}
|
||||
onSlInitialFocus={handleInitialFocus}
|
||||
onSlAfterHide={() => setOpen(false)}
|
||||
>
|
||||
<SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
|
||||
<SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</SlButton>
|
||||
</SlDrawer>
|
||||
|
||||
<SlButton onClick={() => setOpen(true)}>Open Drawer</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-drawer]
|
||||
|
|
|
|||
|
|
@ -31,6 +31,40 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
|
|||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDivider,
|
||||
SlDropdown,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Dropdown</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Dropdown Item 1</SlMenuItem>
|
||||
<SlMenuItem>Dropdown Item 2</SlMenuItem>
|
||||
<SlMenuItem>Dropdown Item 3</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem checked>Checked</SlMenuItem>
|
||||
<SlMenuItem disabled>Disabled</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>
|
||||
Prefix
|
||||
<SlIcon slot="prefix" name="gift" />
|
||||
</SlMenuItem>
|
||||
<SlMenuItem>
|
||||
Suffix Icon
|
||||
<SlIcon slot="suffix" name="heart" />
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Getting the Selected Item
|
||||
|
|
@ -60,6 +94,33 @@ When dropdowns are used with [menus](/components/menu), you can listen for the `
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
function handleSelect(event) {
|
||||
const selectedItem = event.detail.item;
|
||||
console.log(selectedItem.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu onSlSelect={handleSelect}>
|
||||
<SlMenuItem value="cut">Cut</SlMenuItem>
|
||||
<SlMenuItem value="copy">Copy</SlMenuItem>
|
||||
<SlMenuItem value="paste">Paste</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Alternatively, you can listen for the `click` event on individual menu items. Note that, using this approach, disabled menu items will still emit a `click` event.
|
||||
|
||||
```html preview
|
||||
|
|
@ -86,6 +147,40 @@ Alternatively, you can listen for the `click` event on individual menu items. No
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
function handleCut() {
|
||||
console.log('cut');
|
||||
}
|
||||
|
||||
function handleCopy() {
|
||||
console.log('copy');
|
||||
}
|
||||
|
||||
function handlePaste() {
|
||||
console.log('paste');
|
||||
}
|
||||
|
||||
return (
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem onClick={handleCut}>Cut</SlMenuItem>
|
||||
<SlMenuItem onClick={handleCopy}>Copy</SlMenuItem>
|
||||
<SlMenuItem onClick={handlePaste}>Paste</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Placement
|
||||
|
||||
The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
|
||||
|
|
@ -104,6 +199,30 @@ The preferred placement of the dropdown can be set with the `placement` attribut
|
|||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDivider,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown placement="top-start">
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Cut</SlMenuItem>
|
||||
<SlMenuItem>Copy</SlMenuItem>
|
||||
<SlMenuItem>Paste</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>Find</SlMenuItem>
|
||||
<SlMenuItem>Replace</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
```
|
||||
|
||||
### Distance
|
||||
|
||||
The distance from the panel to the trigger can be customized using the `distance` attribute. This value is specified in pixels.
|
||||
|
|
@ -122,6 +241,30 @@ The distance from the panel to the trigger can be customized using the `distance
|
|||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDivider,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown distance={30}>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Cut</SlMenuItem>
|
||||
<SlMenuItem>Copy</SlMenuItem>
|
||||
<SlMenuItem>Paste</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>Find</SlMenuItem>
|
||||
<SlMenuItem>Replace</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
```
|
||||
|
||||
### Skidding
|
||||
|
||||
The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
|
||||
|
|
@ -140,6 +283,30 @@ The offset of the panel along the trigger can be customized using the `skidding`
|
|||
</sl-dropdown>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDivider,
|
||||
SlDropdown,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown skidding={30}>
|
||||
<SlButton slot="trigger" caret>Edit</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Cut</SlMenuItem>
|
||||
<SlMenuItem>Copy</SlMenuItem>
|
||||
<SlMenuItem>Paste</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>Find</SlMenuItem>
|
||||
<SlMenuItem>Replace</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
);
|
||||
```
|
||||
|
||||
### Hoisting
|
||||
|
||||
Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
|
||||
|
|
@ -174,4 +341,49 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlButton,
|
||||
SlDivider,
|
||||
SlDropdown,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.dropdown-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
padding: var(--sl-spacing-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="dropdown-hoist">
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>No Hoist</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Item 1</SlMenuItem>
|
||||
<SlMenuItem>Item 2</SlMenuItem>
|
||||
<SlMenuItem>Item 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
|
||||
<SlDropdown hoist>
|
||||
<SlButton slot="trigger" caret>Hoist</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Item 1</SlMenuItem>
|
||||
<SlMenuItem>Item 2</SlMenuItem>
|
||||
<SlMenuItem>Item 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-dropdown]
|
||||
|
|
|
|||
|
|
@ -20,6 +20,34 @@ Formats a number as a human readable bytes value.
|
|||
</script>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlFormatBytes,
|
||||
SlInput
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(1000);
|
||||
|
||||
return (
|
||||
<>
|
||||
The file is <SlFormatBytes value={value} /> in size.
|
||||
<br /><br />
|
||||
<SlInput
|
||||
type="number"
|
||||
value={value}
|
||||
label="Number to Format"
|
||||
style={{ maxWidth: '180px' }}
|
||||
onSlInput={event => setValue(event.target.value)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Formatting Bytes
|
||||
|
|
@ -33,6 +61,20 @@ Set the `value` attribute to a number to get the value in bytes.
|
|||
<sl-format-bytes value="1200000000"></sl-format-bytes>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatBytes value="12" /><br />
|
||||
<SlFormatBytes value="1200" /><br />
|
||||
<SlFormatBytes value="1200000" /><br />
|
||||
<SlFormatBytes value="1200000000" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Formatting Bits
|
||||
|
||||
To get the value in bits, set the `unit` attribute to `bits`.
|
||||
|
|
@ -44,6 +86,19 @@ To get the value in bits, set the `unit` attribute to `bits`.
|
|||
<sl-format-bytes value="1200000000" unit="bits"></sl-format-bytes>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatBytes value="12" unit="bits" /><br />
|
||||
<SlFormatBytes value="1200" unit="bits" /><br />
|
||||
<SlFormatBytes value="1200000" unit="bits" /><br />
|
||||
<SlFormatBytes value="1200000000" unit="bits" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Localization
|
||||
|
||||
Use the `locale` attribute to set the number formatting locale.
|
||||
|
|
@ -55,4 +110,17 @@ Use the `locale` attribute to set the number formatting locale.
|
|||
<sl-format-bytes value="1200000000" locale="de"></sl-format-bytes>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatBytes } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatBytes value="12" locale="de" /><br />
|
||||
<SlFormatBytes value="1200" locale="de" /><br />
|
||||
<SlFormatBytes value="1200000" locale="de" /><br />
|
||||
<SlFormatBytes value="1200000000" locale="de" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-format-bytes]
|
||||
|
|
|
|||
|
|
@ -11,11 +11,18 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
|
|||
<sl-format-date date="2020-07-15T09:17:00-04:00"></sl-format-date>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlFormatDate date="2020-07-15T09:17:00-04:00" />
|
||||
);
|
||||
```
|
||||
|
||||
The `date` attribute determines the date/time to use when formatting. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript. If omitted, the current date/time will be assumed.
|
||||
|
||||
?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
### Date & Time Formatting
|
||||
|
|
@ -42,6 +49,32 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
|
|||
<sl-format-date></sl-format-date>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
{/* Human-readable date */}
|
||||
<SlFormatDate month="long" day="numeric" year="numeric" /><br />
|
||||
|
||||
{/* Time */}
|
||||
<SlFormatDate hour="numeric" minute="numeric" /><br />
|
||||
|
||||
{/* Weekday */}
|
||||
<SlFormatDate weekday="long" /><br />
|
||||
|
||||
{/* Month */}
|
||||
<SlFormatDate month="long" /><br />
|
||||
|
||||
{/* Year */}
|
||||
<SlFormatDate year="numeric" /><br />
|
||||
|
||||
{/* No formatting options */}
|
||||
<SlFormatDate />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Hour Formatting
|
||||
|
||||
By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the `hour-format` attribute to `12` or `24`.
|
||||
|
|
@ -51,6 +84,17 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T
|
|||
<sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatDate hour="numeric" minute="numeric" hour-format="12" /><br />
|
||||
<SlFormatDate hour="numeric" minute="numeric" hour-format="24" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Localization
|
||||
|
||||
Use the `locale` attribute to set the date/time formatting locale.
|
||||
|
|
@ -58,7 +102,19 @@ Use the `locale` attribute to set the date/time formatting locale.
|
|||
```html preview
|
||||
English: <sl-format-date locale="en"></sl-format-date><br>
|
||||
French: <sl-format-date locale="fr"></sl-format-date><br>
|
||||
Russian: <sl-format-date locale="ru"></sl-format-date><br>
|
||||
Russian: <sl-format-date locale="ru"></sl-format-date>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatDate } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
English: <SlFormatDate locale="en" /><br />
|
||||
French: <SlFormatDate locale="fr" /><br />
|
||||
Russian: <SlFormatDate locale="ru" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-format-date]
|
||||
|
|
|
|||
|
|
@ -22,6 +22,29 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(1000);
|
||||
|
||||
return (
|
||||
<div class="format-number-overview">
|
||||
<SlFormatNumber value={value} />
|
||||
<br /><br />
|
||||
<SlInput
|
||||
type="number"
|
||||
value={value}
|
||||
label="Number to Format"
|
||||
style={{ maxWidth: '180px' }}
|
||||
onSlInput={event => setValue(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Percentages
|
||||
|
|
@ -30,12 +53,26 @@ To get the value as a percent, set the `type` attribute to `percent`.
|
|||
|
||||
```html preview
|
||||
<sl-format-number type="percent" value="0"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value=".25"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value=".50"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value=".75"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value="0.25"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value="0.50"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value="0.75"></sl-format-number><br>
|
||||
<sl-format-number type="percent" value="1"></sl-format-number>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatNumber type="percent" value={0} /><br />
|
||||
<SlFormatNumber type="percent" value={0.25} /><br />
|
||||
<SlFormatNumber type="percent" value={0.50} /><br />
|
||||
<SlFormatNumber type="percent" value={0.75} /><br />
|
||||
<SlFormatNumber type="percent" value={1} />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Localization
|
||||
|
||||
Use the `locale` attribute to set the number formatting locale.
|
||||
|
|
@ -46,6 +83,18 @@ German: <sl-format-number value="2000" locale="de" minimum-fraction-digits="2"><
|
|||
Russian: <sl-format-number value="2000" locale="ru" minimum-fraction-digits="2"></sl-format-number>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
English: <SlFormatNumber value="2000" locale="en" minimum-fraction-digits="2" /><br />
|
||||
German: <SlFormatNumber value="2000" locale="de" minimum-fraction-digits="2" /><br />
|
||||
Russian: <SlFormatNumber value="2000" locale="ru" minimum-fraction-digits="2" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Currency
|
||||
|
||||
To format a number as a monetary value, set the `type` attribute to `currency` and set the `currency` attribute to the desired ISO 4217 currency code. You should also specify `locale` to ensure the the number is formatted correctly for the target locale.
|
||||
|
|
@ -58,4 +107,18 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
|
|||
<sl-format-number type="currency" currency="CNY" value="2000" locale="zh-cn"></sl-format-number>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlFormatNumber type="currency" currency="USD" value="2000" locale="en-US" /><br />
|
||||
<SlFormatNumber type="currency" currency="GBP" value="2000" locale="en-GB" /><br />
|
||||
<SlFormatNumber type="currency" currency="EUR" value="2000" locale="de" /><br />
|
||||
<SlFormatNumber type="currency" currency="RUB" value="2000" locale="ru" /><br />
|
||||
<SlFormatNumber type="currency" currency="CNY" value="2000" locale="zh-cn" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-format-number]
|
||||
|
|
|
|||
|
|
@ -10,6 +10,14 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
|
|||
<sl-icon-button name="gear" label="Settings"></sl-icon-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlIconButton name="gear" label="Settings" />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Sizes
|
||||
|
|
@ -22,6 +30,18 @@ Icon buttons inherit their parent element's `font-size`.
|
|||
<sl-icon-button name="pencil" label="Edit" style="font-size: 2.5rem;"></sl-icon-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlIconButton name="pencil" label="Edit" style={{ fontSize: '1.5rem' }} />
|
||||
<SlIconButton name="pencil" label="Edit" style={{ fontSize: '2rem' }} />
|
||||
<SlIconButton name="pencil" label="Edit" style={{ fontSize: '2.5rem' }} />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
Icon buttons are designed to have a uniform appearance, so their color is not inherited. However, you can still customize them by styling the `base` part.
|
||||
|
|
@ -49,6 +69,33 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.icon-button-color sl-icon-button::part(base) {
|
||||
color: #b00091;
|
||||
}
|
||||
|
||||
.icon-button-color sl-icon-button::part(base):hover,
|
||||
.icon-button-color sl-icon-button::part(base):focus {
|
||||
color: #c913aa;
|
||||
}
|
||||
|
||||
.icon-button-color sl-icon-button::part(base):active {
|
||||
color: #960077;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<div class="icon-button-color">
|
||||
<SlIconButton name="type-bold" label="Bold" />
|
||||
<SlIconButton name="type-italic" label="Italic" />
|
||||
<SlIconButton name="type-underline" label="Underline" />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
### Link Buttons
|
||||
|
||||
Use the `href` attribute to convert the button to a link.
|
||||
|
|
@ -57,6 +104,19 @@ Use the `href` attribute to convert the button to a link.
|
|||
<sl-icon-button name="gear" label="Settings" href="https://example.com" target="_blank"></sl-icon-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlIconButton
|
||||
name="gear"
|
||||
label="Settings"
|
||||
href="https://example.com"
|
||||
target="_blank"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Icon Button with Tooltip
|
||||
|
||||
Wrap a tooltip around an icon button to provide contextual information to the user.
|
||||
|
|
@ -67,6 +127,16 @@ Wrap a tooltip around an icon button to provide contextual information to the us
|
|||
</sl-tooltip>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="Settings">
|
||||
<SlIconButton name="gear" label="Settings" />
|
||||
</SlTooltip>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable the icon button.
|
||||
|
|
@ -75,4 +145,12 @@ Use the `disabled` attribute to disable the icon button.
|
|||
<sl-icon-button name="gear" label="Settings" disabled></sl-icon-button>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIconButton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlIconButton name="gear" label="Settings" disabled />
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-icon-button]
|
||||
|
|
|
|||
|
|
@ -54,12 +54,46 @@ Icons are sized relative to the current font size. To change their size, set the
|
|||
</div>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<div style={{ fontSize: '32px' }}>
|
||||
<SlIcon name="exclamation-triangle" />
|
||||
<SlIcon name="archive" />
|
||||
<SlIcon name="battery-charging" />
|
||||
<SlIcon name="bell" />
|
||||
<SlIcon name="clock" />
|
||||
<SlIcon name="cloud" />
|
||||
<SlIcon name="download" />
|
||||
<SlIcon name="file-earmark" />
|
||||
<SlIcon name="flag" />
|
||||
<SlIcon name="heart" />
|
||||
<SlIcon name="image" />
|
||||
<SlIcon name="lightning" />
|
||||
<SlIcon name="mic" />
|
||||
<SlIcon name="search" />
|
||||
<SlIcon name="star" />
|
||||
<SlIcon name="trash" />
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
Custom icons can be loaded individually with the `src` attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a [custom icon library](#icon-libraries).
|
||||
|
||||
```html preview
|
||||
<sl-icon src="/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
|
||||
<sl-icon src="https://shoelace.style/assets/images/shoe.svg" style="font-size: 8rem;"></sl-icon>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlIcon } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>
|
||||
);
|
||||
```
|
||||
|
||||
## Icon Libraries
|
||||
|
|
|
|||
|
|
@ -13,6 +13,17 @@ For best results, use images that share the same dimensions. The slider can be c
|
|||
</sl-image-comparer>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlImageComparer>
|
||||
<img slot="before" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5" alt="Grayscale version of kittens in a basket looking around." />
|
||||
<img slot="after" src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="Color version of kittens in a basket looking around." />
|
||||
</SlImageComparer>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Initial Position
|
||||
|
|
@ -26,4 +37,15 @@ Use the `position` attribute to set the initial position of the slider. This is
|
|||
</sl-image-comparer>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlImageComparer } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlImageComparer position={25}>
|
||||
<img slot="before" src="https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80" alt="A person sitting on bricks wearing untied boots." />
|
||||
<img slot="after" src="https://images.unsplash.com/photo-1520640023173-50a135e35804?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="A person sitting on a yellow curb tying shoelaces on a boot." />
|
||||
</SlImageComparer>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-image-comparer]
|
||||
|
|
|
|||
|
|
@ -8,8 +8,16 @@ Included files are asynchronously requested using `window.fetch()`. Requests are
|
|||
|
||||
The included content will be inserted into the `<sl-include>` element's default slot so it can be easily accessed and styled through the light DOM.
|
||||
|
||||
```html preview no-codepen
|
||||
<sl-include src="/assets/examples/include.html"></sl-include>
|
||||
```html preview
|
||||
<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInclude } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInclude src="https://shoelace.style/assets/examples/include.html" />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
|
@ -21,7 +29,7 @@ When an include file loads successfully, the `sl-load` event will be emitted. Yo
|
|||
If the request fails, the `sl-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
|
||||
|
||||
```html
|
||||
<sl-include src="/assets/examples/include.html"></sl-include>
|
||||
<sl-include src="https://shoelace.style/assets/examples/include.html"></sl-include>
|
||||
|
||||
<script>
|
||||
const include = document.querySelector('sl-include');
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Inputs collect data from the user.
|
|||
<sl-input></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput />
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
|
||||
|
|
@ -22,6 +30,14 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
<sl-input placeholder="Type something"></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput placeholder="Type something" />
|
||||
);
|
||||
```
|
||||
|
||||
### Clearable
|
||||
|
||||
Add the `clearable` attribute to add a clear button when the input has content.
|
||||
|
|
@ -30,6 +46,14 @@ Add the `clearable` attribute to add a clear button when the input has content.
|
|||
<sl-input placeholder="Clearable" clearable></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput placeholder="Clearable" clearable />
|
||||
);
|
||||
```
|
||||
|
||||
### Toggle Password
|
||||
|
||||
Add the `toggle-password` attribute to add a toggle button that will show the password when activated.
|
||||
|
|
@ -42,6 +66,20 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa
|
|||
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput type="password" placeholder="Password Toggle" size="small" toggle-password />
|
||||
<br />
|
||||
<SlInput type="password" placeholder="Password Toggle" size="medium" toggle-password />
|
||||
<br />
|
||||
<SlInput type="password" placeholder="Password Toggle" size="large" toggle-password />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Filled Inputs
|
||||
|
||||
Add the `filled` attribute to draw a filled input.
|
||||
|
|
@ -50,6 +88,14 @@ Add the `filled` attribute to draw a filled input.
|
|||
<sl-input placeholder="Type something" filled></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput placeholder="Type something" filled />
|
||||
);
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` attribute to give inputs rounded edges.
|
||||
|
|
@ -62,6 +108,20 @@ Use the `pill` attribute to give inputs rounded edges.
|
|||
<sl-input placeholder="Large" size="large" pill></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput placeholder="Small" size="small" pill />
|
||||
<br />
|
||||
<SlInput placeholder="Medium" size="medium" pill />
|
||||
<br />
|
||||
<SlInput placeholder="Large" size="large" pill />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Input Types
|
||||
|
||||
The `type` attribute controls the type of input the browser renders.
|
||||
|
|
@ -74,6 +134,20 @@ The `type` attribute controls the type of input the browser renders.
|
|||
<sl-input type="date" Placeholder="Date"></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput type="email" Placeholder="Email" />
|
||||
<br />
|
||||
<SlInput type="number" Placeholder="Number" />
|
||||
<br />
|
||||
<SlInput type="date" Placeholder="Date" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an input.
|
||||
|
|
@ -86,6 +160,20 @@ Use the `disabled` attribute to disable an input.
|
|||
<sl-input placeholder="Disabled" size="large" disabled></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput placeholder="Disabled" size="small" disabled />
|
||||
<br />
|
||||
<SlInput placeholder="Disabled" size="medium" disabled />
|
||||
<br />
|
||||
<SlInput placeholder="Disabled" size="large" disabled />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change an input's size.
|
||||
|
|
@ -98,6 +186,20 @@ Use the `size` attribute to change an input's size.
|
|||
<sl-input placeholder="Large" size="large"></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput placeholder="Small" size="small" />
|
||||
<br />
|
||||
<SlInput placeholder="Medium" size="medium" />
|
||||
<br />
|
||||
<SlInput placeholder="Large" size="large" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
|
@ -119,6 +221,29 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
</sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlInput placeholder="Small" size="small">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlInput>
|
||||
<br />
|
||||
<SlInput placeholder="Medium" size="medium">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlInput>
|
||||
<br />
|
||||
<SlInput placeholder="Large" size="large">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlInput>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the input an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
|
@ -127,6 +252,14 @@ Use the `label` attribute to give the input an accessible label. For labels that
|
|||
<sl-input label="What is your name?"></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput label="What is your name?" />
|
||||
);
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
||||
|
|
@ -138,4 +271,15 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
|
|||
></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlInput
|
||||
label="Nickname"
|
||||
help-text="What would you like people to call you?"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-input]
|
||||
|
|
|
|||
|
|
@ -24,6 +24,41 @@ Menu items provide options for the user to pick from in a menu.
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlDivider,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem>Option 1</SlMenuItem>
|
||||
<SlMenuItem>Option 2</SlMenuItem>
|
||||
<SlMenuItem>Option 3</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem checked>Checked</SlMenuItem>
|
||||
<SlMenuItem disabled>Disabled</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem>
|
||||
Prefix Icon
|
||||
<SlIcon slot="prefix" name="gift" />
|
||||
</SlMenuItem>
|
||||
<SlMenuItem>
|
||||
Suffix Icon
|
||||
<SlIcon slot="suffix" name="heart" />
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Checked
|
||||
|
|
@ -38,6 +73,27 @@ Use the `checked` attribute to draw menu items in a checked state.
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem>Option 1</SlMenuItem>
|
||||
<SlMenuItem checked>Option 2</SlMenuItem>
|
||||
<SlMenuItem>Option 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Add the `disabled` attribute to disable the menu item so it cannot be selected.
|
||||
|
|
@ -50,6 +106,27 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem>Option 1</SlMenuItem>
|
||||
<SlMenuItem disabled>Option 2</SlMenuItem>
|
||||
<SlMenuItem>Option 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefix & Suffix
|
||||
|
||||
Add content to the start and end of menu items using the `prefix` and `suffix` slots.
|
||||
|
|
@ -76,6 +153,44 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlBadge,
|
||||
SlDivider,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem>
|
||||
<SlIcon slot="prefix" name="house" />
|
||||
Home
|
||||
</SlMenuItem>
|
||||
|
||||
<SlMenuItem>
|
||||
<SlIcon slot="prefix" name="envelope" />
|
||||
Messages
|
||||
<SlBadge slot="suffix" type="primary" pill>12</SlBadge>
|
||||
</SlMenuItem>
|
||||
|
||||
<SlDivider />
|
||||
|
||||
<SlMenuItem>
|
||||
<SlIcon slot="prefix" name="gear" />
|
||||
Settings
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
### Value & Selection
|
||||
|
||||
The `value` attribute can be used to assign a hidden value, such as a unique identifier, to a menu item. When an item is selected, the `sl-select` event will be emitted and a reference to the item will be available at `event.detail.item`. You can use this reference to access the selected item's value, its checked state, and more.
|
||||
|
|
@ -102,4 +217,39 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
|
||||
function handleSelect(event) {
|
||||
const item = event.detail.item;
|
||||
|
||||
// Toggle checked state
|
||||
item.checked = !item.checked;
|
||||
|
||||
// Log value
|
||||
console.log(`Selected value: ${item.value}`);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
onSlSelect={handleSelect}
|
||||
>
|
||||
<SlMenuItem value="opt-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="opt-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="opt-3">Option 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-menu-item]
|
||||
|
|
|
|||
|
|
@ -20,4 +20,33 @@ Menu labels are used to describe a group of menu items.
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlDivider,
|
||||
SlMenu,
|
||||
SlMenuLabel,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuLabel>Fruits</SlMenuLabel>
|
||||
<SlMenuItem value="apple">Apple</SlMenuItem>
|
||||
<SlMenuItem value="banana">Banana</SlMenuItem>
|
||||
<SlMenuItem value="orange">Orange</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuLabel>Vegetables</SlMenuLabel>
|
||||
<SlMenuItem value="broccoli">Broccoli</SlMenuItem>
|
||||
<SlMenuItem value="carrot">Carrot</SlMenuItem>
|
||||
<SlMenuItem value="zucchini">Zucchini</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-menu-label]
|
||||
|
|
|
|||
|
|
@ -18,6 +18,32 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
|
|||
</sl-menu>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import {
|
||||
SlDivider,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '200px',
|
||||
border: 'solid 1px rgb(var(--sl-panel-border-color))',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuItem value="undo">Undo</SlMenuItem>
|
||||
<SlMenuItem value="redo">Redo</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem value="cut">Cut</SlMenuItem>
|
||||
<SlMenuItem value="copy">Copy</SlMenuItem>
|
||||
<SlMenuItem value="paste">Paste</SlMenuItem>
|
||||
<SlMenuItem value="delete">Delete</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
?> Menus are intended for system menus (dropdown menus, select menus, context menus, etc.). They should not be mistaken for navigation menus which serve a different purpose and have a different semantic meaning. If you're building navigation, use `<nav>` and `<a>` elements instead.
|
||||
|
||||
[component-metadata:sl-menu]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Progress bars are used to show the status of an ongoing operation.
|
|||
<sl-progress-bar value="50"></sl-progress-bar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressBar value={50} />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Height
|
||||
|
|
@ -18,6 +26,17 @@ Use the `--height` custom property to set the progress bar's height.
|
|||
<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressBar
|
||||
value={50}
|
||||
style={{ '--height': '6px' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
|
||||
|
|
@ -26,6 +45,17 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
|
|||
<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressBar
|
||||
value="50"
|
||||
label="Upload progress"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
|
||||
Use the default slot to show a value.
|
||||
|
|
@ -57,6 +87,44 @@ Use the default slot to show a value.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlIcon,
|
||||
SlProgressBar
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(50);
|
||||
|
||||
function adjustValue(amount) {
|
||||
let newValue = value + amount;
|
||||
if (newValue < 0) newValue = 0;
|
||||
if (newValue > 100) newValue = 100;
|
||||
setValue(newValue);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlProgressBar value={value}>
|
||||
{value}%
|
||||
</SlProgressBar>
|
||||
|
||||
<br />
|
||||
|
||||
<SlButton circle onClick={() => adjustValue(-10)}>
|
||||
<SlIcon name="dash" />
|
||||
</SlButton>
|
||||
|
||||
<SlButton circle onClick={() => adjustValue(10)}>
|
||||
<SlIcon name="plus" />
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Indeterminate
|
||||
|
||||
The `indeterminate` attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, `value` is ignored and the label, if present, will not be shown.
|
||||
|
|
@ -65,4 +133,12 @@ The `indeterminate` attribute can be used to inform the user that the operation
|
|||
<sl-progress-bar indeterminate></sl-progress-bar>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressBar indeterminate />
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-bar]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Progress rings are used to show the progress of a determinate operation in a cir
|
|||
<sl-progress-ring value="25"></sl-progress-ring>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing value="25" />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Size
|
||||
|
|
@ -18,6 +26,17 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
|||
<sl-progress-ring value="50" style="--size: 200px;"></sl-progress-ring>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing
|
||||
value="50"
|
||||
style={{ '--size': '200px' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Track Width
|
||||
|
||||
Use the `--track-width` custom property to set the width of the progress ring's track.
|
||||
|
|
@ -26,6 +45,17 @@ Use the `--track-width` custom property to set the width of the progress ring's
|
|||
<sl-progress-ring value="50" style="--track-width: 10px;"></sl-progress-ring>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing
|
||||
value="50"
|
||||
style={{ '--track-width': '10px' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Colors
|
||||
|
||||
To change the color, use the `--track-color` and `--indicator-color` custom properties.
|
||||
|
|
@ -40,6 +70,20 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
|||
></sl-progress-ring>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing
|
||||
value="50"
|
||||
style={{
|
||||
'--track-color': 'pink',
|
||||
'--indicator-color': 'deeppink'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
|
||||
|
|
@ -48,9 +92,20 @@ Use the `label` attribute to label the progress ring and tell assistive devices
|
|||
<sl-progress-ring value="50" label="Upload progress"></sl-progress-ring>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlProgressRing } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing
|
||||
value="50"
|
||||
label="Upload progress"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
|
||||
Use the default slot to show a label.
|
||||
Use the default slot to show a label inside the progress ring.
|
||||
|
||||
```html preview
|
||||
<sl-progress-ring value="50" class="progress-ring-values" style="margin-bottom: .5rem;">50%</sl-progress-ring>
|
||||
|
|
@ -79,4 +134,45 @@ Use the default slot to show a label.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
SlButton,
|
||||
SlIcon,
|
||||
SlProgressRing
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(50);
|
||||
|
||||
function adjustValue(amount) {
|
||||
let newValue = value + amount;
|
||||
if (newValue < 0) newValue = 0;
|
||||
if (newValue > 100) newValue = 100;
|
||||
setValue(newValue);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlProgressRing
|
||||
value={value}
|
||||
style={{ marginBottom: '.5rem' }}
|
||||
>
|
||||
{value}%
|
||||
</SlProgressRing>
|
||||
|
||||
<br />
|
||||
|
||||
<SlButton circle onClick={() => adjustValue(-10)}>
|
||||
<SlIcon name="dash" />
|
||||
</SlButton>
|
||||
|
||||
<SlButton circle onClick={() => adjustValue(10)}>
|
||||
<SlIcon name="plus" />
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-progress-ring]
|
||||
|
|
|
|||
|
|
@ -34,6 +34,38 @@ QR codes are useful for providing small pieces of information to users who can q
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlQrCode, SlInput } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.qr-overview {
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.qr-overview sl-input {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState('https://shoelace.style/');
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="qr-overview">
|
||||
<SlQrCode value={value} label="Scan this code to visit Shoelace on the web!" />
|
||||
<br />
|
||||
|
||||
<SlInput maxlength="255" clearable onInput={event => setValue(event.target.value)} />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Colors
|
||||
|
|
@ -44,6 +76,14 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
|
|||
<sl-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></sl-qr-code>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />
|
||||
);
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
Use the `size` attribute to change the size of the QR code.
|
||||
|
|
@ -52,6 +92,14 @@ Use the `size` attribute to change the size of the QR code.
|
|||
<sl-qr-code value="https://shoelace.style/" size="64"></sl-qr-code>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlQrCode value="https://shoelace.style/" size="64" />
|
||||
);
|
||||
```
|
||||
|
||||
### Radius
|
||||
|
||||
Create a rounded effect with the `radius` attribute.
|
||||
|
|
@ -60,6 +108,14 @@ Create a rounded effect with the `radius` attribute.
|
|||
<sl-qr-code value="https://shoelace.style/" radius="0.5"></sl-qr-code>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlQrCode value="https://shoelace.style/" radius="0.5" />
|
||||
);
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
|
||||
QR codes can be rendered with various levels of [error correction](https://www.qrcode.com/en/about/error_correction.html) that can be set using the `error-correction` attribute. This example generates four codes with the same value using different error correction levels.
|
||||
|
|
@ -81,4 +137,31 @@ QR codes can be rendered with various levels of [error correction](https://www.q
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlQrCode } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.qr-error-correction {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<>
|
||||
<div class="qr-error-correction">
|
||||
<SlQrCode value="https://shoelace.style/" error-correction="L" />
|
||||
<SlQrCode value="https://shoelace.style/" error-correction="M" />
|
||||
<SlQrCode value="https://shoelace.style/" error-correction="Q" />
|
||||
<SlQrCode value="https://shoelace.style/" error-correction="H" />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-qr-code]
|
||||
|
|
|
|||
|
|
@ -5,13 +5,25 @@
|
|||
Radio Groups are used to group multiple radios so they function as a single control.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an item">
|
||||
<sl-radio value="1" checked>Item 1</sl-radio>
|
||||
<sl-radio value="2">Item 2</sl-radio>
|
||||
<sl-radio value="3">Item 3</sl-radio>
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio value="1" checked>Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Showing the Fieldset
|
||||
|
|
@ -19,11 +31,22 @@ Radio Groups are used to group multiple radios so they function as a single cont
|
|||
You can show a fieldset and legend that wraps the radio group using the `fieldset` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an item" fieldset>
|
||||
<sl-radio value="1" checked>Item 1</sl-radio>
|
||||
<sl-radio value="2">Item 2</sl-radio>
|
||||
<sl-radio value="3">Item 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" fieldset>
|
||||
<sl-radio value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" fieldset>
|
||||
<SlRadio value="1" checked>Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
[component-metadata:sl-radio-group]
|
||||
|
|
|
|||
|
|
@ -7,13 +7,25 @@ Radios allow the user to select one option from a group of many.
|
|||
Radios are designed to be used with [radio groups](/components/radio-group). As such, all of the examples on this page utilize them to demonstrate their correct usage.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" no-fieldset>
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio value="1" checked>Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
|
@ -23,7 +35,7 @@ Radios are designed to be used with [radio groups](/components/radio-group). As
|
|||
Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" no-fieldset>
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
|
|
@ -31,4 +43,17 @@ Use the `disabled` attribute to disable a radio.
|
|||
</sl-radio-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio value="1" checked>Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
<SlRadio value="4" disabled>Disabled</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-radio]
|
||||
|
|
|
|||
|
|
@ -8,16 +8,49 @@ Ranges allow the user to select a single value within a given range using a slid
|
|||
<sl-range></sl-range>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange />
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
||||
### Min, Max, and Step
|
||||
|
||||
Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="10" step="1"></sl-range>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange min={0} max={10} step={1} />
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a slider.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" disabled></sl-range>
|
||||
<sl-range disabled></sl-range>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange disabled />
|
||||
);
|
||||
```
|
||||
|
||||
### Tooltip Placement
|
||||
|
|
@ -25,7 +58,15 @@ Use the `disabled` attribute to disable a slider.
|
|||
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="bottom"></sl-range>
|
||||
<sl-range tooltip="bottom"></sl-range>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange tooltip="bottom" />
|
||||
);
|
||||
```
|
||||
|
||||
### Disable the Tooltip
|
||||
|
|
@ -33,7 +74,15 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
|
|||
To disable the tooltip, set `tooltip` to `none`.
|
||||
|
||||
```html preview
|
||||
<sl-range min="0" max="100" step="1" tooltip="none"></sl-range>
|
||||
<sl-range tooltip="none"></sl-range>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange tooltip="none" />
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Track Colors
|
||||
|
|
@ -47,6 +96,19 @@ You can customize the active and inactive portions of the track using the `--tra
|
|||
"></sl-range>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange
|
||||
style={{
|
||||
'--track-color-active': 'rgb(var(--sl-color-primary-600))',
|
||||
'--track-color-inactive': 'rgb(var(--sl-color-primary-200))'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Tooltip Formatter
|
||||
|
||||
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
|
||||
|
|
@ -60,6 +122,19 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange
|
||||
min={0}
|
||||
max={100}
|
||||
step={1}
|
||||
tooltipFormatter={value => `Total - ${value}%`}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
|
@ -68,6 +143,14 @@ Use the `label` attribute to give the range an accessible label. For labels that
|
|||
<sl-range label="Volume" min="0" max="100"></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange label="Volume" min={0} max={100} />
|
||||
);
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a range with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
||||
|
|
@ -81,4 +164,17 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
|
|||
></sl-input>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRange } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRange
|
||||
label="Volume"
|
||||
help-text="Controls the volume of the current song."
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-range]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Ratings give users a way to quickly view and provide feedback.
|
|||
<sl-rating></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Maximum Value
|
||||
|
|
@ -18,12 +26,28 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
|
|||
<sl-rating max="3"></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating max={3} />
|
||||
);
|
||||
```
|
||||
|
||||
### Precision
|
||||
|
||||
Use the `precision` attribute to let users select fractional ratings.
|
||||
|
||||
```html preview
|
||||
<sl-rating precision=".5" value="2.5"></sl-rating>
|
||||
<sl-rating precision="0.5" value="2.5"></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating precision={0.5} value={2.5} />
|
||||
);
|
||||
```
|
||||
|
||||
## Symbol Sizes
|
||||
|
|
@ -34,6 +58,14 @@ Set the `--symbol-size` custom property to adjust the size.
|
|||
<sl-rating style="--symbol-size: 2rem;"></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating style={{ '--symbol-size': '2rem' }} />
|
||||
);
|
||||
```
|
||||
|
||||
### Readonly
|
||||
|
||||
Use the `readonly` attribute to display a rating that users can't change.
|
||||
|
|
@ -42,6 +74,14 @@ Use the `readonly` attribute to display a rating that users can't change.
|
|||
<sl-rating readonly value="3"></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating readonly value={3} />
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disable` attribute to disable the rating.
|
||||
|
|
@ -50,6 +90,14 @@ Use the `disable` attribute to disable the rating.
|
|||
<sl-rating disabled value="3"></sl-rating>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating disabled value={3} />
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
```html preview
|
||||
|
|
@ -61,6 +109,18 @@ Use the `disable` attribute to disable the rating.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import '@shoelace-style/shoelace/dist/components/icon/icon';
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRating
|
||||
getSymbol={() => '<sl-icon name="heart-fill"></sl-icon>'}
|
||||
style={{ '--symbol-color-active': '#ff4136' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Value-based Icons
|
||||
|
||||
```html preview
|
||||
|
|
@ -76,4 +136,18 @@ Use the `disable` attribute to disable the rating.
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import '@shoelace-style/shoelace/dist/components/icon/icon';
|
||||
import { SlRating } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
function getSymbol(value) {
|
||||
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
|
||||
return `<sl-icon name="${icons[value - 1]}"></sl-icon>`;
|
||||
}
|
||||
|
||||
const App = () => (
|
||||
<SlRating getSymbol={getSymbol} />
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-rating]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,14 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
|
|||
<sl-relative-time date="2020-07-15T09:17:00-04:00"></sl-relative-time>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRelativeTime date="2020-07-15T09:17:00-04:00" />
|
||||
);
|
||||
```
|
||||
|
||||
The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
|
||||
|
||||
?> When using strings, avoid ambiguous dates such as `03/04/2020` which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) to ensure the date will be parsed properly by all clients.
|
||||
|
|
@ -36,6 +44,16 @@ Use the `sync` attribute to update the displayed value automatically as time pas
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const date = new Date(new Date().getTime() - 60000);
|
||||
|
||||
const App = () => (
|
||||
<SlRelativeTime date={date} sync />
|
||||
);
|
||||
```
|
||||
|
||||
### Formatting Styles
|
||||
|
||||
You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
|
||||
|
|
@ -46,6 +64,18 @@ You can change how the time is displayed using the `format` attribute. Note that
|
|||
<sl-relative-time date="2020-07-15T09:17:00-04:00" format="long"></sl-relative-time>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="narrow" /><br />
|
||||
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="short" /><br />
|
||||
<SlRelativeTime date="2020-07-15T09:17:00-04:00" format="long" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Localization
|
||||
|
||||
Use the `locale` attribute to set the desired locale.
|
||||
|
|
@ -58,4 +88,18 @@ Greek: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="el"></sl-relat
|
|||
Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" locale="ru"></sl-relative-time>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRelativeTime } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
English: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="en-US" /><br />
|
||||
Chinese: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="zh-CN" /><br />
|
||||
German: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="de" /><br />
|
||||
Greek: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="el" /><br />
|
||||
Russian: <SlRelativeTime date="2020-07-15T09:17:00-04:00" locale="ru" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-relative-time]
|
||||
|
|
|
|||
|
|
@ -36,4 +36,33 @@ The resize observer will report changes to the dimensions of the elements it wra
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlResizeObserver } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.resize-observer-overview div {
|
||||
display: flex;
|
||||
border: solid 2px rgb(var(--sl-input-border-color));
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div className="resize-observer-overview">
|
||||
<SlResizeObserver onSlResize={event => console.log(event.detail)}>
|
||||
<div>
|
||||
Resize this box and watch the console 👉
|
||||
</div>
|
||||
</SlResizeObserver>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-resize-observer]
|
||||
|
|
|
|||
|
|
@ -12,6 +12,19 @@ You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/
|
|||
</sl-responsive-media>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlResponsiveMedia>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
|
||||
alt="A train riding through autumn foliage with mountains in the distance."
|
||||
/>
|
||||
</SlResponsiveMedia>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Responsive Images
|
||||
|
|
@ -24,6 +37,19 @@ The following image maintains a `4:3` aspect ratio as its container is resized.
|
|||
</sl-responsive-media>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlResponsiveMedia aspect-ratio="4:3">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
|
||||
alt="Two blue chairs on a sandy beach."
|
||||
/>
|
||||
</SlResponsiveMedia>
|
||||
);
|
||||
```
|
||||
|
||||
### Responsive Videos
|
||||
|
||||
The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
|
||||
|
|
@ -34,4 +60,14 @@ The following video is embedded using an `iframe` and maintains a `16:9` aspect
|
|||
</sl-responsive-media>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlResponsiveMedia aspect-ratio="16:9">
|
||||
<iframe src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen />
|
||||
</SlResponsiveMedia>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-responsive-media]
|
||||
|
|
|
|||
|
|
@ -16,6 +16,22 @@ Selects allow you to choose one or more items from a dropdown menu.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem value="option-4">Option 4</SlMenuItem>
|
||||
<SlMenuItem value="option-5">Option 5</SlMenuItem>
|
||||
<SlMenuItem value="option-6">Option 6</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
|
@ -32,6 +48,18 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Select one">
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Clearable
|
||||
|
||||
Use the `clearable` attribute to make the control clearable.
|
||||
|
|
@ -44,6 +72,18 @@ Use the `clearable` attribute to make the control clearable.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Clearable" clearable>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Filled Selects
|
||||
|
||||
Add the `filled` attribute to draw a filled select.
|
||||
|
|
@ -56,6 +96,18 @@ Add the `filled` attribute to draw a filled select.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect filled>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` attribute to give selects rounded edges.
|
||||
|
|
@ -68,6 +120,18 @@ Use the `pill` attribute to give selects rounded edges.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect pill>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a select.
|
||||
|
|
@ -80,6 +144,18 @@ Use the `disabled` attribute to disable a select.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Disabled" disabled>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Multiple
|
||||
|
||||
To allow multiple options to be selected, use the `multiple` attribute. It's a good practice to use `clearable` when this option is enabled. When using this option, `value` will be an array instead of a string.
|
||||
|
|
@ -96,6 +172,22 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Select a few" multiple clearable>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlDivider />
|
||||
<SlMenuItem value="option-4">Option 4</SlMenuItem>
|
||||
<SlMenuItem value="option-5">Option 5</SlMenuItem>
|
||||
<SlMenuItem value="option-6">Option 6</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Grouping Options
|
||||
|
||||
Options can be grouped visually using menu labels and dividers.
|
||||
|
|
@ -114,6 +206,24 @@ Options can be grouped visually using menu labels and dividers.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlDivider, SlMenuItem, SlMenuLabel, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Select one">
|
||||
<SlMenuLabel>Group 1</SlMenuLabel>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlDivider></SlDivider>
|
||||
<SlMenuLabel>Group 2</SlMenuLabel>
|
||||
<SlMenuItem value="option-4">Option 4</SlMenuItem>
|
||||
<SlMenuItem value="option-5">Option 5</SlMenuItem>
|
||||
<SlMenuItem value="option-6">Option 6</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a select's size.
|
||||
|
|
@ -142,13 +252,43 @@ Use the `size` attribute to change a select's size.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlSelect placeholder="Small" size="small" multiple>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
|
||||
<br />
|
||||
|
||||
<SlSelect placeholder="Medium" size="medium" multiple>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
|
||||
<br />
|
||||
|
||||
<SlSelect placeholder="Large" size="large" multiple>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Selecting Options Programmatically
|
||||
|
||||
The `value` property is bound to the current selection. As the selection changes, so will the value. To programmatically manage the selection, update the `value` property.
|
||||
|
||||
```html preview
|
||||
<div class="selecting-example">
|
||||
<sl-select placeholder="">
|
||||
<sl-select>
|
||||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
|
|
@ -173,6 +313,31 @@ The `value` property is bound to the current selection. As the selection changes
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlButton, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState('option-1');
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlSelect value={value} onSlChange={event => setValue(event.target.value)}>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
|
||||
<br />
|
||||
|
||||
<SlButton onClick={() => setValue('option-1')}>Set 1</SlButton>
|
||||
<SlButton onClick={() => setValue('option-2')}>Set 2</SlButton>
|
||||
<SlButton onClick={() => setValue('option-3')}>Set 3</SlButton>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the select an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
|
@ -185,6 +350,18 @@ Use the `label` attribute to give the select an accessible label. For labels tha
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect label="Select one">
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a select with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
||||
|
|
@ -194,12 +371,27 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
|
|||
label="Experience"
|
||||
help-text="Please tell us your skill level."
|
||||
>
|
||||
<sl-menu-item value="option-1">Novice</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Intermediate</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Advanced</sl-menu-item>
|
||||
<sl-menu-item value="1">Novice</sl-menu-item>
|
||||
<sl-menu-item value="2">Intermediate</sl-menu-item>
|
||||
<sl-menu-item value="3">Advanced</sl-menu-item>
|
||||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect
|
||||
label="Experience"
|
||||
help-text="Please tell us your skill level."
|
||||
>
|
||||
<SlMenuItem value="1">Novice</SlMenuItem>
|
||||
<SlMenuItem value="2">Intermediate</SlMenuItem>
|
||||
<SlMenuItem value="3">Advanced</SlMenuItem>
|
||||
</SlSelect>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
|
@ -230,4 +422,36 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
</sl-select>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlIcon, SlMenuItem, SlSelect } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlSelect placeholder="Small" size="small">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlSelect>
|
||||
<br />
|
||||
<SlSelect placeholder="Medium" size="medium">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlSelect>
|
||||
<br />
|
||||
<SlSelect placeholder="Large" size="large">
|
||||
<SlIcon name="house" slot="prefix"></SlIcon>
|
||||
<SlMenuItem value="option-1">Option 1</SlMenuItem>
|
||||
<SlMenuItem value="option-2">Option 2</SlMenuItem>
|
||||
<SlMenuItem value="option-3">Option 3</SlMenuItem>
|
||||
<SlIcon name="chat" slot="suffix"></SlIcon>
|
||||
</SlSelect>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-select]
|
||||
|
|
|
|||
|
|
@ -54,6 +54,60 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-overview header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-overview header sl-skeleton:last-child {
|
||||
flex: 0 0 auto;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.skeleton-overview sl-skeleton {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-overview sl-skeleton:nth-child(1) {
|
||||
float: left;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.skeleton-overview sl-skeleton:nth-child(3) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.skeleton-overview sl-skeleton:nth-child(4) {
|
||||
width: 80%;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="skeleton-overview">
|
||||
<header>
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
</header>
|
||||
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Effects
|
||||
|
|
@ -83,6 +137,37 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-effects {
|
||||
font-size: var(--sl-font-size-small);
|
||||
}
|
||||
|
||||
.skeleton-effects sl-skeleton:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="skeleton-effects">
|
||||
<SlSkeleton effect="none" />
|
||||
None
|
||||
|
||||
<SlSkeleton effect="sheen" />
|
||||
Sheen
|
||||
|
||||
<SlSkeleton effect="pulse" />
|
||||
Pulse
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Paragraphs
|
||||
|
||||
Use multiple skeletons and some clever styles to simulate paragraphs.
|
||||
|
|
@ -115,6 +200,42 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-paragraphs sl-skeleton {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-paragraphs sl-skeleton:nth-child(2) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.skeleton-paragraphs sl-skeleton:nth-child(4) {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.skeleton-paragraphs sl-skeleton:last-child {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="skeleton-paragraphs">
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Avatars
|
||||
|
||||
Set a matching width and height to make a circle, square, or rounded avatar skeleton.
|
||||
|
|
@ -144,6 +265,39 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-avatars sl-skeleton {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.skeleton-avatars sl-skeleton:nth-child(1) {
|
||||
--border-radius: 0;
|
||||
}
|
||||
|
||||
.skeleton-avatars sl-skeleton:nth-child(2) {
|
||||
--border-radius: var(--sl-border-radius-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="skeleton-avatars">
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
<SlSkeleton />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Shapes
|
||||
|
||||
Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
|
||||
|
|
@ -193,6 +347,59 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-shapes sl-skeleton {
|
||||
display: inline-flex;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.skeleton-shapes .square::part(indicator) {
|
||||
--border-radius: var(--sl-border-radius-medium);
|
||||
}
|
||||
|
||||
.skeleton-shapes .circle::part(indicator) {
|
||||
--border-radius: var(--sl-border-radius-circle);
|
||||
}
|
||||
|
||||
.skeleton-shapes .triangle::part(indicator) {
|
||||
--border-radius: 0;
|
||||
clip-path: polygon(50% 0, 0 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.skeleton-shapes .cross::part(indicator) {
|
||||
--border-radius: 0;
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
|
||||
.skeleton-shapes .comment::part(indicator) {
|
||||
--border-radius: 0;
|
||||
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
|
||||
}
|
||||
|
||||
.skeleton-shapes sl-skeleton:not(:last-child) {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="skeleton-shapes">
|
||||
<SlSkeleton class="square" />
|
||||
<SlSkeleton class="circle" />
|
||||
<SlSkeleton class="triangle" />
|
||||
<SlSkeleton class="cross" />
|
||||
<SlSkeleton class="comment" />
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Colors
|
||||
|
||||
Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's color.
|
||||
|
|
@ -201,4 +408,32 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's
|
|||
<sl-skeleton effect="sheen" style="--color: tomato; --sheen-color: #ffb094;"></sl-skeleton>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSkeleton } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.skeleton-avatars sl-skeleton {
|
||||
display: inline-block;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.skeleton-avatars sl-skeleton:nth-child(1) {
|
||||
--border-radius: 0;
|
||||
}
|
||||
|
||||
.skeleton-avatars sl-skeleton:nth-child(2) {
|
||||
--border-radius: var(--sl-border-radius-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<SlSkeleton
|
||||
effect="sheen"
|
||||
style={{ '--color': 'tomato', '--sheen-color': '#ffb094' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-skeleton]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Spinners are used to show the progress of an indeterminate operation.
|
|||
<sl-spinner></sl-spinner>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSpinner />
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Size
|
||||
|
|
@ -20,6 +28,18 @@ Spinners are sized based on the current font size. To change their size, set the
|
|||
<sl-spinner style="font-size: 3rem;"></sl-spinner>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlSpinner />
|
||||
<SlSpinner style={{ fontSize: '2rem' }} />
|
||||
<SlSpinner style={{ fontSize: '3rem' }} />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Track Width
|
||||
|
||||
The width of the spinner's track can be changed by setting the `--track-width` custom property.
|
||||
|
|
@ -28,6 +48,19 @@ The width of the spinner's track can be changed by setting the `--track-width` c
|
|||
<sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSpinner
|
||||
style={{
|
||||
fontSize: '3rem',
|
||||
'--track-width': '6px'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
The spinner's colors can be changed by setting the `--indicator-color` and `--track-color` custom properties.
|
||||
|
|
@ -36,4 +69,18 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
|
|||
<sl-spinner style="font-size: 3rem; --indicator-color: deeppink; --track-color: pink;"></sl-spinner>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSpinner } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSpinner
|
||||
style={{
|
||||
fontSize: '3rem',
|
||||
'--indicator-color': 'deeppink',
|
||||
'--track-color': 'pink'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-spinner]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Switches allow the user to toggle an option on or off.
|
|||
<sl-switch>Switch</sl-switch>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSwitch>Switch</SlSwitch>
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
## Examples
|
||||
|
|
@ -20,6 +28,14 @@ Use the `checked` attribute to activate the switch.
|
|||
<sl-switch checked>Checked</sl-switch>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSwitch checked>Checked</SlSwitch>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable the switch.
|
||||
|
|
@ -28,6 +44,14 @@ Use the `disabled` attribute to disable the switch.
|
|||
<sl-switch disabled>Disabled</sl-switch>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSwitch disabled>Disabled</SlSwitch>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Size
|
||||
|
||||
Use the available custom properties to make the switch a different size.
|
||||
|
|
@ -36,4 +60,18 @@ Use the available custom properties to make the switch a different size.
|
|||
<sl-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;"></sl-switch>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlSwitch } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlSwitch
|
||||
style={{
|
||||
'--width': '80px',
|
||||
'--height': '32px',
|
||||
'--thumb-size': '26px'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-switch]
|
||||
|
|
|
|||
|
|
@ -20,6 +20,24 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Tabs on Bottom
|
||||
|
|
@ -40,6 +58,24 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="bottom">
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Tabs on Start
|
||||
|
||||
Tabs can be shown on the starting side by setting `placement` to `start`.
|
||||
|
|
@ -58,6 +94,25 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="start">
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Tabs on End
|
||||
|
||||
Tabs can be shown on the ending side by setting `placement` to `end`.
|
||||
|
|
@ -76,6 +131,25 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="end">
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Closable Tabs
|
||||
|
||||
Add the `closable` attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
|
||||
|
|
@ -112,6 +186,40 @@ Add the `closable` attribute to a tab to show a close button. This example shows
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
function handleClose(event) {
|
||||
//
|
||||
// This is a crude example that removes the tab and its panel from the DOM.
|
||||
// There are better ways to manage tab creation/removal in React, but that
|
||||
// would significantly complicate the example.
|
||||
//
|
||||
const tab = event.target;
|
||||
const tabGroup = tab.closest('sl-tab-group');
|
||||
const tabPanel = tabGroup.querySelector(`[aria-labelledby="${tab.id}"]`);
|
||||
|
||||
tab.remove();
|
||||
tabPanel.remove();
|
||||
}
|
||||
|
||||
return (
|
||||
<SlTabGroup class="tabs-closable" onSlClose={handleClose}>
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="closable-1" closable onSlClose={handleClose}>Closable 1</SlTab>
|
||||
<SlTab slot="nav" panel="closable-2" closable onSlClose={handleClose}>Closable 2</SlTab>
|
||||
<SlTab slot="nav" panel="closable-3" closable onSlClose={handleClose}>Closable 3</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="closable-1">This is the first closable tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="closable-2">This is the second closable tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="closable-3">This is the third closable tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Scrolling Tabs
|
||||
|
||||
When there are more tabs than horizontal space allows, the nav will be scrollable.
|
||||
|
|
@ -162,6 +270,56 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
<SlTab slot="nav" panel="tab-1">Tab 1</SlTab>
|
||||
<SlTab slot="nav" panel="tab-2">Tab 2</SlTab>
|
||||
<SlTab slot="nav" panel="tab-3">Tab 3</SlTab>
|
||||
<SlTab slot="nav" panel="tab-4">Tab 4</SlTab>
|
||||
<SlTab slot="nav" panel="tab-5">Tab 5</SlTab>
|
||||
<SlTab slot="nav" panel="tab-6">Tab 6</SlTab>
|
||||
<SlTab slot="nav" panel="tab-7">Tab 7</SlTab>
|
||||
<SlTab slot="nav" panel="tab-8">Tab 8</SlTab>
|
||||
<SlTab slot="nav" panel="tab-9">Tab 9</SlTab>
|
||||
<SlTab slot="nav" panel="tab-10">Tab 10</SlTab>
|
||||
<SlTab slot="nav" panel="tab-11">Tab 11</SlTab>
|
||||
<SlTab slot="nav" panel="tab-12">Tab 12</SlTab>
|
||||
<SlTab slot="nav" panel="tab-13">Tab 13</SlTab>
|
||||
<SlTab slot="nav" panel="tab-14">Tab 14</SlTab>
|
||||
<SlTab slot="nav" panel="tab-15">Tab 15</SlTab>
|
||||
<SlTab slot="nav" panel="tab-16">Tab 16</SlTab>
|
||||
<SlTab slot="nav" panel="tab-17">Tab 17</SlTab>
|
||||
<SlTab slot="nav" panel="tab-18">Tab 18</SlTab>
|
||||
<SlTab slot="nav" panel="tab-19">Tab 19</SlTab>
|
||||
<SlTab slot="nav" panel="tab-20">Tab 20</SlTab>
|
||||
|
||||
<SlTabPanel name="tab-1">Tab panel 1</SlTabPanel>
|
||||
<SlTabPanel name="tab-2">Tab panel 2</SlTabPanel>
|
||||
<SlTabPanel name="tab-3">Tab panel 3</SlTabPanel>
|
||||
<SlTabPanel name="tab-4">Tab panel 4</SlTabPanel>
|
||||
<SlTabPanel name="tab-5">Tab panel 5</SlTabPanel>
|
||||
<SlTabPanel name="tab-6">Tab panel 6</SlTabPanel>
|
||||
<SlTabPanel name="tab-7">Tab panel 7</SlTabPanel>
|
||||
<SlTabPanel name="tab-8">Tab panel 8</SlTabPanel>
|
||||
<SlTabPanel name="tab-9">Tab panel 9</SlTabPanel>
|
||||
<SlTabPanel name="tab-10">Tab panel 10</SlTabPanel>
|
||||
<SlTabPanel name="tab-11">Tab panel 11</SlTabPanel>
|
||||
<SlTabPanel name="tab-12">Tab panel 12</SlTabPanel>
|
||||
<SlTabPanel name="tab-13">Tab panel 13</SlTabPanel>
|
||||
<SlTabPanel name="tab-14">Tab panel 14</SlTabPanel>
|
||||
<SlTabPanel name="tab-15">Tab panel 15</SlTabPanel>
|
||||
<SlTabPanel name="tab-16">Tab panel 16</SlTabPanel>
|
||||
<SlTabPanel name="tab-17">Tab panel 17</SlTabPanel>
|
||||
<SlTabPanel name="tab-18">Tab panel 18</SlTabPanel>
|
||||
<SlTabPanel name="tab-19">Tab panel 19</SlTabPanel>
|
||||
<SlTabPanel name="tab-20">Tab panel 20</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Manual Activation
|
||||
|
||||
When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting `activation="manual"` which will require the user to press <kbd>Space</kbd> or <kbd>Enter</kbd> before showing the tab panel (manual activation).
|
||||
|
|
@ -180,4 +338,22 @@ When focused, keyboard users can press <kbd>Left</kbd> or <kbd>Right</kbd> to se
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup activation="manual">
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-tab-group]
|
||||
|
|
|
|||
|
|
@ -18,6 +18,24 @@ Tab panels are used inside [tab groups](/components/tab-group) to display tabbed
|
|||
</sl-tab-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab, SlTabGroup, SlTabPanel } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
<SlTab slot="nav" panel="general">General</SlTab>
|
||||
<SlTab slot="nav" panel="custom">Custom</SlTab>
|
||||
<SlTab slot="nav" panel="advanced">Advanced</SlTab>
|
||||
<SlTab slot="nav" panel="disabled" disabled>Disabled</SlTab>
|
||||
|
||||
<SlTabPanel name="general">This is the general tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="custom">This is the custom tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="advanced">This is the advanced tab panel.</SlTabPanel>
|
||||
<SlTabPanel name="disabled">This is a disabled tab panel.</SlTabPanel>
|
||||
</SlTabGroup>
|
||||
);
|
||||
```
|
||||
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
|
||||
[component-metadata:sl-tab-panel]
|
||||
|
|
|
|||
|
|
@ -11,6 +11,19 @@ Tabs are used inside [tab groups](/components/tab-group) to represent and activa
|
|||
<sl-tab disabled>Disabled</sl-tab>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTab } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlTab>Tab</SlTab>
|
||||
<SlTab active>Active</SlTab>
|
||||
<SlTab closable>Closable</SlTab>
|
||||
<SlTab disabled>Disabled</SlTab>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
?> Additional demonstrations can be found in the [tab group examples](/components/tab-group).
|
||||
|
||||
[component-metadata:sl-tab]
|
||||
|
|
|
|||
|
|
@ -12,6 +12,21 @@ Tags are used as labels to organize things or to indicate a selection.
|
|||
<sl-tag type="danger">Danger</sl-tag>
|
||||
```
|
||||
|
||||
|
||||
```jsx react
|
||||
import { SlTag } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlTag type="primary">Primary</SlTag>
|
||||
<SlTag type="success">Success</SlTag>
|
||||
<SlTag type="neutral">Neutral</SlTag>
|
||||
<SlTag type="warning">Warning</SlTag>
|
||||
<SlTag type="danger">Danger</SlTag>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Sizes
|
||||
|
|
@ -24,6 +39,18 @@ Use the `size` attribute to change a tab's size.
|
|||
<sl-tag size="large">Large</sl-tag>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTag } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlTag size="small">Small</SlTag>
|
||||
<SlTag size="medium">Medium</SlTag>
|
||||
<SlTag size="large">Large</SlTag>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
||||
Use the `pill` attribute to give tabs rounded edges.
|
||||
|
|
@ -34,6 +61,18 @@ Use the `pill` attribute to give tabs rounded edges.
|
|||
<sl-tag size="large" pill>Large</sl-tag>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTag } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlTag size="small" pill>Small</SlTag>
|
||||
<SlTag size="medium" pill>Medium</SlTag>
|
||||
<SlTag size="large" pill>Large</SlTag>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Removable
|
||||
|
||||
Use the `removable` attribute to add a remove button to the tag.
|
||||
|
|
@ -62,4 +101,42 @@ Use the `removable` attribute to add a remove button to the tag.
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTag } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.tags-removable sl-tag {
|
||||
transition: var(--sl-transition-medium) opacity;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
function handleRemove(event) {
|
||||
const tag = event.target;
|
||||
tag.style.opacity = '0';
|
||||
setTimeout(() => tag.style.opacity = '1', 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="tags-removable">
|
||||
<SlTag size="small" removable onSlRemove={handleRemove}>
|
||||
Small
|
||||
</SlTag>
|
||||
|
||||
<SlTag size="medium" removable onSlRemove={handleRemove}>
|
||||
Medium
|
||||
</SlTag>
|
||||
|
||||
<SlTag size="large" removable onSlRemove={handleRemove}>
|
||||
Large
|
||||
</SlTag>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-tag]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,14 @@ Textareas collect data from the user and allow multiple lines of text.
|
|||
<sl-textarea></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea />
|
||||
);
|
||||
```
|
||||
|
||||
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form) instead.
|
||||
|
||||
?> Please refer to the section on [form control validation](/components/form?id=form-control-validation) to learn how to do client-side validation.
|
||||
|
|
@ -22,6 +30,14 @@ Use the `rows` attribute to change the number of text rows that get shown.
|
|||
<sl-textarea rows="2"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea rows={2} />
|
||||
);
|
||||
```
|
||||
|
||||
### Placeholders
|
||||
|
||||
Use the `placeholder` attribute to add a placeholder.
|
||||
|
|
@ -30,6 +46,14 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
<sl-textarea placeholder="Type something"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea placeholder="Type something" />
|
||||
);
|
||||
```
|
||||
|
||||
### Filled Textareas
|
||||
|
||||
Add the `filled` attribute to draw a filled textarea.
|
||||
|
|
@ -38,6 +62,14 @@ Add the `filled` attribute to draw a filled textarea.
|
|||
<sl-textarea placeholder="Type something" filled></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea placeholder="Type something" filled />
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a textarea.
|
||||
|
|
@ -46,6 +78,14 @@ Use the `disabled` attribute to disable a textarea.
|
|||
<sl-textarea placeholder="Textarea" disabled></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea placeholder="Textarea" disabled />
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a textarea's size.
|
||||
|
|
@ -58,6 +98,20 @@ Use the `size` attribute to change a textarea's size.
|
|||
<sl-textarea placeholder="Large" size="large"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlTextarea placeholder="Small" size="small"></SlTextarea>
|
||||
<br />
|
||||
<SlTextarea placeholder="Medium" size="medium"></SlTextarea>
|
||||
<br />
|
||||
<SlTextarea placeholder="Large" size="large"></SlTextarea>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the textarea an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
|
@ -66,6 +120,14 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
|
|||
<sl-textarea label="Comments"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea label="Comments" />
|
||||
);
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a textarea with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
||||
|
|
@ -78,6 +140,17 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
|
|||
</sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea
|
||||
label="Feedback"
|
||||
help-text="Please tell us what you think."
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Prevent Resizing
|
||||
|
||||
By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none`.
|
||||
|
|
@ -86,6 +159,14 @@ By default, textareas can be resized vertically by the user. To prevent resizing
|
|||
<sl-textarea resize="none"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea resize="none" />
|
||||
);
|
||||
```
|
||||
|
||||
### Expand with Content
|
||||
|
||||
Textareas will automatically resize to expand to fit their content when `resize` is set to `auto`.
|
||||
|
|
@ -94,4 +175,12 @@ Textareas will automatically resize to expand to fit their content when `resize`
|
|||
<sl-textarea resize="auto"></sl-textarea>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlTextarea } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTextarea resize="auto" />
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-textarea]
|
||||
|
|
|
|||
|
|
@ -14,6 +14,16 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
|
|||
</sl-tooltip>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="This is a tooltip">
|
||||
<SlButton>Hover Me</SlButton>
|
||||
</SlTooltip>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Placement
|
||||
|
|
@ -41,7 +51,7 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
|
|||
<sl-button></sl-button>
|
||||
</sl-tooltip>
|
||||
|
||||
<sl-tooltip content="right-start" placement="right-start" style="margin-left: 400px;">
|
||||
<sl-tooltip content="right-start" placement="right-start">
|
||||
<sl-button></sl-button>
|
||||
</sl-tooltip>
|
||||
</div>
|
||||
|
|
@ -99,17 +109,119 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
|
|||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.tooltip-placement-example [placement='top-start'] sl-button,
|
||||
.tooltip-placement-example [placement='bottom-start'] sl-button {
|
||||
.tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
|
||||
.tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
|
||||
margin-left: calc(40px + 0.25rem);
|
||||
}
|
||||
|
||||
.tooltip-placement-example [placement^='right'] sl-button {
|
||||
.tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
|
||||
.tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
|
||||
.tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
|
||||
margin-left: calc((40px * 3) + (0.25rem * 3));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.tooltip-placement-example {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.tooltip-placement-example-row:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.tooltip-placement-example sl-button {
|
||||
float: left;
|
||||
width: 2.5rem;
|
||||
margin-right: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.tooltip-placement-example-row:nth-child(1) sl-tooltip:first-child sl-button,
|
||||
.tooltip-placement-example-row:nth-child(5) sl-tooltip:first-child sl-button {
|
||||
margin-left: calc(40px + 0.25rem);
|
||||
}
|
||||
|
||||
.tooltip-placement-example-row:nth-child(2) sl-tooltip:nth-child(2) sl-button,
|
||||
.tooltip-placement-example-row:nth-child(3) sl-tooltip:nth-child(2) sl-button,
|
||||
.tooltip-placement-example-row:nth-child(4) sl-tooltip:nth-child(2) sl-button {
|
||||
margin-left: calc((40px * 3) + (0.25rem * 3));
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div className="tooltip-placement-example">
|
||||
<div className="tooltip-placement-example-row">
|
||||
<SlTooltip content="top-start" placement="top-start">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="top" placement="top">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="top-end" placement="top-end">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
</div>
|
||||
|
||||
<div className="tooltip-placement-example-row">
|
||||
<SlTooltip content="left-start" placement="left-start">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="right-start" placement="right-start">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
</div>
|
||||
|
||||
<div className="tooltip-placement-example-row">
|
||||
<SlTooltip content="left" placement="left">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="right" placement="right">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
</div>
|
||||
|
||||
<div className="tooltip-placement-example-row">
|
||||
<SlTooltip content="left-end" placement="left-end">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="right-end" placement="right-end">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
</div>
|
||||
|
||||
<div className="tooltip-placement-example-row">
|
||||
<SlTooltip content="bottom-start" placement="bottom-start">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="bottom" placement="bottom">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="bottom-end" placement="bottom-end">
|
||||
<SlButton />
|
||||
</SlTooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Click Trigger
|
||||
|
||||
Set the `trigger` attribute to `click` to toggle the tooltip on click instead of hover.
|
||||
|
|
@ -120,6 +232,16 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
|
|||
</sl-tooltip>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="Click again to dismiss" trigger="click">
|
||||
<SlButton>Click to Toggle</SlButton>
|
||||
</SlTooltip>
|
||||
);
|
||||
```
|
||||
|
||||
### Manual Trigger
|
||||
|
||||
Tooltips can be controller programmatically by setting the `trigger` attribute to `manual`. Use the `open` attribute to control when the tooltip is shown.
|
||||
|
|
@ -139,6 +261,30 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
|
|||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import { SlAvatar, SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlButton
|
||||
style={{ marginRight: '4rem' }}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
Toggle Manually
|
||||
</SlButton>
|
||||
|
||||
<SlTooltip open={open} content="This is an avatar" trigger="manual">
|
||||
<SlAvatar />
|
||||
</SlTooltip>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Remove Arrows
|
||||
|
||||
You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token.
|
||||
|
|
@ -155,6 +301,22 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
|
|||
</div>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<div style={{ '--sl-tooltip-arrow-size': '0' }}>
|
||||
<SlTooltip content="This is a tooltip">
|
||||
<SlButton>Above</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="This is a tooltip" placement="bottom">
|
||||
<SlButton>Below</SlButton>
|
||||
</SlTooltip>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
|
||||
|
||||
```css
|
||||
|
|
@ -169,11 +331,28 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
|
|||
|
||||
```html preview
|
||||
<sl-tooltip>
|
||||
<div slot="content">I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!</div>
|
||||
<div slot="content">
|
||||
I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
|
||||
</div>
|
||||
|
||||
<sl-button>Hover me</sl-button>
|
||||
</sl-tooltip>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="This is a tooltip">
|
||||
<div slot="content">
|
||||
I'm not <strong>just</strong> a tooltip, I'm a <em>tooltip</em> with HTML!
|
||||
</div>
|
||||
|
||||
<SlButton>Hover Me</SlButton>
|
||||
</SlTooltip>
|
||||
);
|
||||
```
|
||||
|
||||
### Hoisting
|
||||
|
||||
Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its containing block, which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
|
||||
|
|
@ -199,4 +378,33 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
|
|||
</style>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlButton, SlTooltip } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const css = `
|
||||
.tooltip-hoist {
|
||||
border: solid 2px rgb(var(--sl-panel-border-color));
|
||||
overflow: hidden;
|
||||
padding: var(--sl-spacing-medium);
|
||||
position: relative;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="tooltip-hoist">
|
||||
<SlTooltip content="This is a tooltip">
|
||||
<SlButton>No Hoist</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="This is a tooltip" hoist>
|
||||
<SlButton>Hoist</SlButton>
|
||||
</SlTooltip>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
[component-metadata:sl-tooltip]
|
||||
|
|
|
|||
|
|
@ -6,6 +6,14 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
|
|||
|
||||
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
|
||||
|
||||
## Next
|
||||
|
||||
- Added React examples and CodePen links to all components
|
||||
- Fixed a bug in `<sl-progress-bar>` where the `label` attribute didn't set the label
|
||||
- Fixed a bug in `<sl-rating>` that caused disabled and readonly controls to transition on hover
|
||||
- The `panel` property of `<sl-tab>` is now reflected
|
||||
- The `name` property of `<sl-tab-panel>` is now reflected
|
||||
|
||||
## 2.0.0-beta.59
|
||||
|
||||
- Added React wrappers as first-class citizens
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export default class SlProgressBar extends LitElement {
|
|||
${!this.indeterminate
|
||||
? html`
|
||||
<span part="label" class="progress-bar__label">
|
||||
<slot></slot>
|
||||
<slot>${this.label}</slot>
|
||||
</span>
|
||||
`
|
||||
: ''}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,8 @@ export default css`
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.rating--disabled .rating__symbol--hover .rating--readonly .rating__symbol--hover {
|
||||
.rating--disabled .rating__symbol--hover,
|
||||
.rating--readonly .rating__symbol--hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export default class SlTabPanel extends LitElement {
|
|||
private componentId = `tab-panel-${++id}`;
|
||||
|
||||
/** The tab panel's name. */
|
||||
@property() name = '';
|
||||
@property({ reflect: true }) name = '';
|
||||
|
||||
/** When true, the tab panel will be shown. */
|
||||
@property({ type: Boolean, reflect: true }) active = false;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default class SlTab extends LitElement {
|
|||
private componentId = `tab-${++id}`;
|
||||
|
||||
/** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
|
||||
@property() panel = '';
|
||||
@property({ reflect: true }) panel = '';
|
||||
|
||||
/** Draws the tab in an active state. */
|
||||
@property({ type: Boolean, reflect: true }) active = false;
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue