kopia lustrzana https://github.com/shoelace-style/shoelace
React import paths (#1507)
* fix react imports in examples * move types to definition files * update changelog * update changelogpull/1508/head
rodzic
f8c37e0d14
commit
1383ea3fe8
|
@ -13,8 +13,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert open>
|
||||
|
@ -75,8 +75,8 @@ Set the `variant` attribute to change the alert's variant.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -146,8 +146,8 @@ Add the `closable` attribute to show a close button that will hide the alert.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
@ -175,7 +175,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert variant="primary" open>
|
||||
|
@ -215,9 +215,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
.alert-duration sl-alert {
|
||||
|
@ -306,9 +306,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
|
|||
|
||||
```jsx:react
|
||||
import { useRef } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/sl-alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
function showToast(alert) {
|
||||
alert.toast();
|
||||
|
|
|
@ -13,7 +13,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
|
@ -41,7 +41,7 @@ Both GIF and WEBP images are supported.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
|
||||
|
@ -64,7 +64,7 @@ To set a custom size, apply a width and/or height to the host element.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
|
@ -102,7 +102,7 @@ You can change the appearance and location of the control box by targeting the `
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/sl-animated-image';
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const css = `
|
||||
.animated-image-custom-control-box::part(control-box) {
|
||||
|
|
|
@ -27,7 +27,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-overview .box {
|
||||
|
@ -173,7 +173,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
|
|||
|
||||
```jsx:react
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-scroll {
|
||||
|
@ -262,7 +262,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-keyframes .box {
|
||||
|
@ -329,8 +329,8 @@ Animations won't play until you apply the `play` attribute. You can omit it init
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/sl-animation';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => {
|
||||
const [play, setPlay] = useState(false);
|
||||
|
|
|
@ -12,7 +12,7 @@ By default, a generic icon will be shown. You can personalize avatars by adding
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => <SlAvatar label="User avatar" />;
|
||||
```
|
||||
|
@ -37,7 +37,7 @@ Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar
|
||||
|
@ -61,7 +61,7 @@ When you don't have an image to use, you can set the `initials` attribute to sho
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
|
||||
```
|
||||
|
@ -85,8 +85,8 @@ When no image or initials are set, an icon will be shown. The default avatar sho
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -116,8 +116,8 @@ Avatars can be shaped using the `shape` attribute.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -167,8 +167,8 @@ You can group avatars with a few lines of CSS.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
.avatar-group sl-avatar:not(:first-of-type) {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => <SlBadge>Badge</SlBadge>;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Set the `variant` attribute to change the badge's variant.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -56,7 +56,7 @@ Use the `pill` attribute to give badges rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -100,7 +100,7 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const css = `
|
||||
.badge-pulse sl-badge:not(:last-of-type) {
|
||||
|
@ -157,8 +157,8 @@ One of the most common use cases for badges is attaching them to buttons. To mak
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -201,11 +201,11 @@ When including badges in menu items, use the `suffix` slot to make sure they're
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
|
|
|
@ -17,9 +17,9 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
|
|
|
@ -17,8 +17,8 @@ Breadcrumbs are usually placed before a page's main content with the current pag
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
|
@ -51,8 +51,8 @@ For websites, you'll probably want to use links instead. You can make any breadc
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
|
@ -100,8 +100,8 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
|
|||
|
||||
```jsx:react
|
||||
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -149,9 +149,9 @@ Use the `prefix` slot to add content before any breadcrumb item.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
|
@ -181,9 +181,9 @@ Use the `suffix` slot to add content after any breadcrumb item.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/sl-breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/sl-breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
|
|
|
@ -14,8 +14,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Alignment">
|
||||
|
@ -57,8 +57,8 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -134,8 +134,8 @@ Theme buttons are supported through the button's `variant` attribute.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -213,8 +213,8 @@ Pill buttons are supported through the button's `pill` attribute.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -283,11 +283,11 @@ Dropdowns can be placed inside button groups as long as the trigger is an `<sl-b
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Example Button Group">
|
||||
|
@ -328,11 +328,11 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/co
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Example Button Group">
|
||||
|
@ -370,9 +370,9 @@ Buttons can be wrapped in tooltips to provide more detail when the user interact
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -441,10 +441,10 @@ Create interactive toolbars with button groups.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/sl-button-group';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const css = `
|
||||
.button-group-toolbar sl-button-group:not(:last-of-type) {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => <SlButton>Button</SlButton>;
|
||||
```
|
||||
|
@ -31,7 +31,7 @@ Use the `variant` attribute to set the button's variant.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -56,7 +56,7 @@ Use the `size` attribute to change a button's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -81,7 +81,7 @@ Use the `outline` attribute to draw outlined buttons with transparent background
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -118,7 +118,7 @@ Use the `pill` attribute to give buttons rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -154,8 +154,8 @@ Use the `circle` attribute to create circular icon buttons. When this attribute
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -183,7 +183,7 @@ Use the `text` variant to create text buttons that share the same size as regula
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -212,7 +212,7 @@ It's often helpful to have a button that works like a link. This is possible by
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -247,7 +247,7 @@ As expected, buttons can be given a custom width by setting the `width` attribut
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -325,8 +325,8 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -398,7 +398,7 @@ Use the `caret` attribute to add a dropdown indicator when a button will trigger
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -429,7 +429,7 @@ Use the `loading` attribute to make a button busy. The width will remain the sam
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -469,7 +469,7 @@ Use the `disabled` attribute to disable a button.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -41,9 +41,9 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const css = `
|
||||
.card-overview {
|
||||
|
@ -106,7 +106,7 @@ Basic cards aren't very exciting, but they can display any content you want them
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
|
||||
const css = `
|
||||
.card-basic {
|
||||
|
@ -161,8 +161,8 @@ Headers can be used to display titles and more.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const css = `
|
||||
.card-header {
|
||||
|
@ -227,9 +227,9 @@ Footers can be used to display actions, summaries, or other relevant content.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const css = `
|
||||
.card-footer {
|
||||
|
@ -282,7 +282,7 @@ Cards accept an `image` slot. The image is displayed atop the card and stretches
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/sl-card';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
|
||||
const css = `
|
||||
.card-image {
|
||||
|
|
|
@ -41,8 +41,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel pagination>
|
||||
|
|
|
@ -41,8 +41,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -124,8 +124,8 @@ Use the `pagination` attribute to show the total number of slides and the curren
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel pagination>
|
||||
|
@ -203,8 +203,8 @@ Use the `navigation` attribute to show previous and next buttons.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel navigation>
|
||||
|
@ -282,8 +282,8 @@ By default, the carousel will not advanced beyond the first and last slides. You
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel loop navigation pagination>
|
||||
|
@ -361,8 +361,8 @@ The carousel will automatically advance when the `autoplay` attribute is used. T
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel autoplay loop pagination>
|
||||
|
@ -459,10 +459,10 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => {
|
||||
const [isEnabled, setIsEnabled] = useState(false);
|
||||
|
@ -530,8 +530,8 @@ The `slides-per-page` attribute makes it possible to display multiple slides at
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
|
||||
|
@ -623,8 +623,8 @@ The content of the carousel can be changed by adding or removing carousel items.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const css = `
|
||||
.dynamic-carousel {
|
||||
|
@ -740,8 +740,8 @@ Setting the `orientation` attribute to `vertical` will render the carousel in a
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const css = `
|
||||
.vertical {
|
||||
|
@ -863,11 +863,11 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
|
||||
const App = () => {
|
||||
const [aspectRatio, setAspectRatio] = useState('3/2');
|
||||
|
@ -971,10 +971,10 @@ Use the `--scroll-hint` custom property to add inline padding in horizontal caro
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -1137,10 +1137,10 @@ The carousel has a robust API that makes it possible to extend and customize. Th
|
|||
|
||||
```jsx:react
|
||||
import { useRef } from 'react';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/sl-carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/sl-carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const css = `
|
||||
.carousel-thumbnails {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Use the `checked` attribute to activate the checkbox.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Use the `indeterminate` attribute to make the checkbox indeterminate.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
|
||||
```
|
||||
|
@ -58,7 +58,7 @@ Use the `disabled` attribute to disable the checkbox.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
|
||||
```
|
||||
|
@ -76,7 +76,7 @@ Use the `size` attribute to change a checkbox's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -127,8 +127,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
|||
|
||||
```jsx:react
|
||||
import { useEffect, useRef } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => {
|
||||
const checkbox = useRef(null);
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => <SlColorPicker label="Select a color" />;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Use the `value` attribute to set an initial value for the color picker.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => <SlColorPicker value="#4a90e2" label="Select a color" />;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Use the `opacity` attribute to enable the opacity slider. When this is enabled,
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => <SlColorPicker opacity label="Select a color" />;
|
||||
```
|
||||
|
@ -63,7 +63,7 @@ To prevent users from toggling the format themselves, add the `no-format-toggle`
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -90,7 +90,7 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => (
|
||||
<SlColorPicker
|
||||
|
@ -114,7 +114,7 @@ Use the `size` attribute to change the color picker's trigger size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -134,7 +134,7 @@ The color picker can be rendered inline instead of in a dropdown using the `inli
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/sl-color-picker';
|
||||
import SlColorPicker from '@shoelace-style/shoelace/dist/react/color-picker';
|
||||
|
||||
const App = () => <SlColorPicker inline label="Select a color" />;
|
||||
```
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const App = () => (
|
||||
<SlCopyButton value="Shoelace rocks!" />
|
||||
|
@ -33,7 +33,7 @@ Copy Buttons display feedback in a tooltip. You can customize the labels using t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const App = () => (
|
||||
<SlCopyButton
|
||||
|
@ -58,8 +58,8 @@ Use the `copy-icon`, `success-icon`, and `error-icon` slots to customize the ico
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlIcon } from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
import { SlIcon } from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -99,8 +99,8 @@ To copy data from an attribute, use `from="id[attr]"` where `id` is the id of th
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
import { SlInput } from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -134,7 +134,7 @@ This example demonstrates what happens when a copy error occurs. You can customi
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const App = () => (
|
||||
<SlCopyButton from="i-do-not-exist" />
|
||||
|
@ -150,7 +150,7 @@ Copy buttons can be disabled by adding the `disabled` attribute.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const App = () => (
|
||||
<SlCopyButton value="You can't copy me" disabled />
|
||||
|
@ -166,7 +166,7 @@ A success indicator is briefly shown after copying. You can customize the length
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const App = () => (
|
||||
<SlCopyButton value="Shoelace rocks!" feedback-duration={250} />
|
||||
|
@ -216,7 +216,7 @@ You can customize the button to your liking with CSS.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/sl-copy-button';
|
||||
import { SlCopyButton } from '@shoelace-style/shoelace/dist/react/copy-button';
|
||||
|
||||
const css = `
|
||||
.custom-styles {
|
||||
|
|
|
@ -15,7 +15,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/details';
|
||||
|
||||
const App = () => (
|
||||
<SlDetails summary="Toggle Me">
|
||||
|
@ -39,7 +39,7 @@ Use the `disable` attribute to prevent the details from expanding.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/details';
|
||||
|
||||
const App = () => (
|
||||
<SlDetails summary="Disabled" disabled>
|
||||
|
@ -71,8 +71,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/sl-details';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlDetails from '@shoelace-style/shoelace/dist/react/details';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
sl-details.custom-icon::part(summary-icon) {
|
||||
|
|
|
@ -27,8 +27,8 @@ layout: component
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -76,8 +76,8 @@ Use the `--width` custom property to set the dialog's width.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -127,8 +127,8 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -186,9 +186,9 @@ The header shows a functional close button by default. You can use the `header-a
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -249,8 +249,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -302,9 +302,9 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/sl-dialog';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDialog from '@shoelace-style/shoelace/dist/react/dialog';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
|
||||
const App = () => <SlDivider />;
|
||||
```
|
||||
|
@ -28,7 +28,7 @@ Use the `--width` custom property to change the width of the divider.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
|
||||
const App = () => <SlDivider style={{ '--width': '4px' }} />;
|
||||
```
|
||||
|
@ -46,7 +46,7 @@ Use the `--color` custom property to change the color of the divider.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
|
||||
const App = () => <SlDivider style={{ '--color': 'tomato' }} />;
|
||||
```
|
||||
|
@ -68,7 +68,7 @@ Use the `--spacing` custom property to change the amount of space between the di
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -98,7 +98,7 @@ Add the `vertical` attribute to draw the divider in a vertical orientation. The
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
|
||||
const App = () => (
|
||||
<div
|
||||
|
@ -138,9 +138,9 @@ Use dividers in [menus](/components/menu) to visually group menu items.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
|
|
@ -27,8 +27,8 @@ layout: component
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -74,8 +74,8 @@ By default, drawers slide in from the end. To make the drawer slide in from the
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -119,8 +119,8 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -164,8 +164,8 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -219,8 +219,8 @@ Unlike normal drawers, contained drawers are not modal. This means they do not s
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -287,8 +287,8 @@ Use the `--size` custom property to set the drawer's size. This will be applied
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -338,8 +338,8 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -396,9 +396,9 @@ The header shows a functional close button by default. You can use the `header-a
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -454,8 +454,8 @@ You can use `event.detail.source` to determine what triggered the request to clo
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -507,9 +507,9 @@ By default, the drawer's panel will gain focus when opened. This allows a subseq
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/sl-drawer';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDrawer from '@shoelace-style/shoelace/dist/react/drawer';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
|
|
@ -33,12 +33,12 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown>
|
||||
|
@ -98,10 +98,10 @@ When dropdowns are used with [menus](/components/menu), you can listen for the [
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => {
|
||||
function handleSelect(event) {
|
||||
|
@ -151,10 +151,10 @@ Alternatively, you can listen for the `click` event on individual menu items. No
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => {
|
||||
function handleCut() {
|
||||
|
@ -203,11 +203,11 @@ The preferred placement of the dropdown can be set with the `placement` attribut
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown placement="top-start">
|
||||
|
@ -245,11 +245,11 @@ The distance from the panel to the trigger can be customized using the `distance
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown distance={30}>
|
||||
|
@ -287,11 +287,11 @@ The offset of the panel along the trigger can be customized using the `skidding`
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlDropdown skidding={30}>
|
||||
|
@ -346,12 +346,12 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/sl-dropdown';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const css = `
|
||||
.dropdown-hoist {
|
||||
|
|
|
@ -24,9 +24,9 @@ layout: component
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(1000);
|
||||
|
@ -64,7 +64,7 @@ Set the `value` attribute to a number to get the value in bytes.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -91,7 +91,7 @@ To get the value in bits, set the `unit` attribute to `bit`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -118,7 +118,7 @@ Use the `lang` attribute to set the number formatting locale.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/sl-format-bytes';
|
||||
import SlFormatBytes from '@shoelace-style/shoelace/dist/react/format-bytes';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://dev
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
|
||||
|
||||
const App = () => <SlFormatDate date="2020-07-15T09:17:00-04:00" />;
|
||||
```
|
||||
|
@ -51,7 +51,7 @@ Formatting options are based on those found in the [`Intl.DateTimeFormat` API](h
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -91,7 +91,7 @@ By default, the browser will determine whether to use 12-hour or 24-hour time. T
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -113,7 +113,7 @@ Russian: <sl-format-date lang="ru"></sl-format-date>
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/sl-format-date';
|
||||
import SlFormatDate from '@shoelace-style/shoelace/dist/react/format-date';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -95,7 +95,7 @@ Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
|
||||
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -121,7 +121,7 @@ To format a number as a monetary value, set the `type` attribute to `currency` a
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/sl-format-number';
|
||||
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -12,7 +12,7 @@ For a full list of icons that come bundled with Shoelace, refer to the [icon com
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => <SlIconButton name="gear" label="Settings" />;
|
||||
```
|
||||
|
@ -32,7 +32,7 @@ Icon buttons inherit their parent element's `font-size`.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -73,7 +73,7 @@ Icon buttons are designed to have a uniform appearance, so their color is not in
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const css = `
|
||||
.icon-button-color sl-icon-button::part(base) {
|
||||
|
@ -112,7 +112,7 @@ Use the `href` attribute to convert the button to a link.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => <SlIconButton name="gear" label="Settings" href="https://example.com" target="_blank" />;
|
||||
```
|
||||
|
@ -128,8 +128,8 @@ Wrap a tooltip around an icon button to provide contextual information to the us
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="Settings">
|
||||
|
@ -147,7 +147,7 @@ Use the `disabled` attribute to disable the icon button.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/sl-icon-button';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const App = () => <SlIconButton name="gear" label="Settings" disabled />;
|
||||
```
|
||||
|
|
|
@ -70,7 +70,7 @@ Icons inherit their color from the current text color. Thus, you can set the `co
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -132,7 +132,7 @@ Icons are sized relative to the current font size. To change their size, set the
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<div style={{ fontSize: '32px' }}>
|
||||
|
@ -167,7 +167,7 @@ For non-decorative icons, use the `label` attribute to announce it to assistive
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => <SlIcon name="star-fill" label="Add to favorites" />;
|
||||
```
|
||||
|
@ -183,7 +183,7 @@ Custom icons can be loaded individually with the `src` attribute. Only SVGs on a
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => <SlIcon src="https://shoelace.style/assets/images/shoe.svg" style={{ fontSize: '8rem' }}></SlIcon>;
|
||||
```
|
||||
|
|
|
@ -23,7 +23,7 @@ For best results, use images that share the same dimensions. The slider can be c
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
|
||||
import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
|
||||
|
||||
const App = () => (
|
||||
<SlImageComparer>
|
||||
|
@ -63,7 +63,7 @@ Use the `position` attribute to set the initial position of the slider. This is
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlImageComparer from '@shoelace-style/shoelace/dist/react/sl-image-comparer';
|
||||
import SlImageComparer from '@shoelace-style/shoelace/dist/react/image-comparer';
|
||||
|
||||
const App = () => (
|
||||
<SlImageComparer position={25}>
|
||||
|
|
|
@ -14,7 +14,7 @@ The included content will be inserted into the `<sl-include>` element's default
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInclude from '@shoelace-style/shoelace/dist/react/sl-include';
|
||||
import SlInclude from '@shoelace-style/shoelace/dist/react/include';
|
||||
|
||||
const App = () => <SlInclude src="https://shoelace.style/assets/examples/include.html" />;
|
||||
```
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput />;
|
||||
```
|
||||
|
@ -30,8 +30,8 @@ Use the `label` attribute to give the input an accessible label. For labels that
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput label="What is your name?" />;
|
||||
```
|
||||
|
@ -45,8 +45,8 @@ Add descriptive help text to an input with the `help-text` attribute. For help t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput label="Nickname" help-text="What would you like people to call you?" />;
|
||||
```
|
||||
|
@ -60,7 +60,7 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput placeholder="Type something" />;
|
||||
```
|
||||
|
@ -74,7 +74,7 @@ Add the `clearable` attribute to add a clear button when the input has content.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput placeholder="Clearable" clearable />;
|
||||
```
|
||||
|
@ -88,7 +88,7 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
|
||||
```
|
||||
|
@ -102,7 +102,7 @@ Add the `filled` attribute to draw a filled input.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput placeholder="Type something" filled />;
|
||||
```
|
||||
|
@ -116,7 +116,7 @@ Use the `disabled` attribute to disable an input.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => <SlInput placeholder="Disabled" disabled />;
|
||||
```
|
||||
|
@ -134,7 +134,7 @@ Use the `size` attribute to change an input's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -160,7 +160,7 @@ Use the `pill` attribute to give inputs rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -186,7 +186,7 @@ The `type` attribute controls the type of input the browser renders.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -221,8 +221,8 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -28,10 +28,10 @@ layout: component
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
@ -75,8 +75,8 @@ Add the `disabled` attribute to disable the menu item so it cannot be selected.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
@ -118,11 +118,11 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/sl-badge';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
@ -168,8 +168,8 @@ Checkbox menu items are visually indistinguishable from regular menu items. Thei
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
@ -218,8 +218,8 @@ The `value` attribute can be used to assign a hidden value, such as a unique ide
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => {
|
||||
function handleSelect(event) {
|
||||
|
|
|
@ -22,10 +22,10 @@ layout: component
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
|
|
@ -22,9 +22,9 @@ You can use [menu items](/components/menu-item), [menu labels](/components/menu-
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu style={{ maxWidth: '200px' }}>
|
||||
|
|
|
@ -45,8 +45,8 @@ The mutation observer will report changes to the content it wraps through the `s
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
|
||||
|
||||
const css = `
|
||||
.resize-observer-overview div {
|
||||
|
@ -147,8 +147,8 @@ Use the `child-list` attribute to watch for new child elements that are added or
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlMutationObserver from '@shoelace-style/shoelace/dist/react/sl-mutation-observer';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
|
||||
|
||||
const css = `
|
||||
.mutation-child-list .buttons {
|
||||
|
|
|
@ -14,8 +14,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect>
|
||||
|
@ -41,8 +41,8 @@ Use the `disabled` attribute to disable an option and prevent it from being sele
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect>
|
||||
|
|
|
@ -104,11 +104,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-overview sl-popup {
|
||||
|
@ -273,8 +273,8 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-active span[slot='anchor'] {
|
||||
|
@ -346,7 +346,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
|
||||
const css = `
|
||||
#external-anchor {
|
||||
|
@ -441,9 +441,9 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const css = `
|
||||
.popup-placement span[slot='anchor'] {
|
||||
|
@ -545,8 +545,8 @@ Use the `distance` attribute to change the distance between the popup and its an
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const css = `
|
||||
.popup-distance span[slot='anchor'] {
|
||||
|
@ -642,8 +642,8 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const css = `
|
||||
.popup-skidding span[slot='anchor'] {
|
||||
|
@ -786,10 +786,10 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-arrow sl-popup {
|
||||
|
@ -942,9 +942,9 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const css = `
|
||||
.popup-sync span[slot='anchor'] {
|
||||
|
@ -1055,8 +1055,8 @@ Toggle the switch and scroll the container to see the difference.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-strategy .overflow {
|
||||
|
@ -1164,8 +1164,8 @@ Scroll the container to see how the popup flips to prevent clipping.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-flip .overflow {
|
||||
|
@ -1262,7 +1262,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
|
||||
const css = `
|
||||
.popup-flip-fallbacks .overflow {
|
||||
|
@ -1358,8 +1358,8 @@ Toggle the switch to see the difference.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-shift .overflow {
|
||||
|
@ -1471,8 +1471,8 @@ Scroll the container to see the popup resize as its available space changes.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
.popup-auto-size .overflow {
|
||||
|
@ -1623,8 +1623,8 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
|
|||
|
||||
```jsx:react
|
||||
import { useRef, useState } from 'react';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/sl-popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlPopup from '@shoelace-style/shoelace/dist/react/popup';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const css = `
|
||||
/* If you need to set a z-index, set it on the popup part like this */
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
|
||||
|
||||
const App = () => <SlProgressBar value={50} />;
|
||||
```
|
||||
|
@ -26,7 +26,7 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
|
||||
|
||||
const App = () => <SlProgressBar value="50" label="Upload progress" />;
|
||||
```
|
||||
|
@ -42,7 +42,7 @@ Use the `--height` custom property to set the progress bar's height.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
|
||||
|
||||
const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
|
||||
```
|
||||
|
@ -82,9 +82,9 @@ Use the default slot to show a value.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(50);
|
||||
|
@ -123,7 +123,7 @@ The `indeterminate` attribute can be used to inform the user that the operation
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/sl-progress-bar';
|
||||
import SlProgressBar from '@shoelace-style/shoelace/dist/react/progress-bar';
|
||||
|
||||
const App = () => <SlProgressBar indeterminate />;
|
||||
```
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => <SlProgressRing value="25" />;
|
||||
```
|
||||
|
@ -28,7 +28,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => <SlProgressRing value="50" style={{ '--size': '200px' }} />;
|
||||
```
|
||||
|
@ -46,7 +46,7 @@ Use the `--track-width` and `--indicator-width` custom properties to set the wid
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => <SlProgressRing value="50" style={{ '--track-width': '6px', '--indicator-width': '12px' }} />;
|
||||
```
|
||||
|
@ -70,7 +70,7 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => (
|
||||
<SlProgressRing
|
||||
|
@ -94,7 +94,7 @@ Use the `label` attribute to label the progress ring and tell assistive devices
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => <SlProgressRing value="50" label="Upload progress" />;
|
||||
```
|
||||
|
@ -134,9 +134,9 @@ Use the default slot to show a label inside the progress ring.
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/sl-progress-ring';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlProgressRing from '@shoelace-style/shoelace/dist/react/progress-ring';
|
||||
|
||||
const App = () => {
|
||||
const [value, setValue] = useState(50);
|
||||
|
|
|
@ -39,8 +39,8 @@ QR codes are useful for providing small pieces of information to users who can q
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const css = `
|
||||
.qr-overview {
|
||||
|
@ -81,7 +81,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
|
||||
|
||||
const App = () => <SlQrCode value="https://shoelace.style/" fill="deeppink" background="white" />;
|
||||
```
|
||||
|
@ -95,7 +95,7 @@ Use the `size` attribute to change the size of the QR code.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
|
||||
|
||||
const App = () => <SlQrCode value="https://shoelace.style/" size="64" />;
|
||||
```
|
||||
|
@ -109,7 +109,7 @@ Create a rounded effect with the `radius` attribute.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
|
||||
|
||||
const App = () => <SlQrCode value="https://shoelace.style/" radius="0.5" />;
|
||||
```
|
||||
|
@ -136,7 +136,7 @@ QR codes can be rendered with various levels of [error correction](https://www.q
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/sl-qr-code';
|
||||
import SlQrCode from '@shoelace-style/shoelace/dist/react/qr-code';
|
||||
|
||||
const css = `
|
||||
.qr-error-correction {
|
||||
|
|
|
@ -16,8 +16,8 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -43,8 +43,8 @@ To set the initial value and checked state, use the `value` attribute on the con
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio button.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -111,8 +111,8 @@ Use the `size` attribute to change a radio button's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -168,8 +168,8 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -221,9 +221,9 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -275,9 +275,9 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="neutral">
|
||||
|
|
|
@ -14,8 +14,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -41,8 +41,8 @@ Add descriptive help text to a radio group with the `help-text` attribute. For h
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
|
||||
|
@ -66,8 +66,8 @@ const App = () => (
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/sl-radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadioButton from '@shoelace-style/shoelace/dist/react/radio-button';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -91,8 +91,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -127,8 +127,8 @@ The size of [Radios](/components/radio) and [Radio Buttons](/components/radio-bu
|
|||
|
||||
```jsx react
|
||||
import { useState } from 'react';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => {
|
||||
const [size, setSize] = useState('medium');
|
||||
|
@ -182,10 +182,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
const App = () => {
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
@ -255,10 +255,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
|||
|
||||
```jsx:react
|
||||
import { useEffect, useRef } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
const App = () => {
|
||||
const radioGroup = useRef(null);
|
||||
const errorMessage = 'You must choose this option';
|
||||
|
|
|
@ -47,8 +47,8 @@ To set the initial value and checked state, use the `value` attribute on the con
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="3">
|
||||
|
@ -72,8 +72,8 @@ Use the `disabled` attribute to disable a radio.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/sl-radio-group';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
import SlRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
|
@ -115,7 +115,7 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change
|
|||
```
|
||||
|
||||
```jsx react
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/sl-radio';
|
||||
import SlRadio from '@shoelace-style/shoelace/dist/react/radio';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange />;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange label="Volume" min={0} max={100} />;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Add descriptive help text to a range with the `help-text` attribute. For help te
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange label="Volume" help-text="Controls the volume of the current song." min={0} max={100} />;
|
||||
```
|
||||
|
@ -58,7 +58,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange min={0} max={10} step={1} />;
|
||||
```
|
||||
|
@ -72,7 +72,7 @@ Use the `disabled` attribute to disable a slider.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange disabled />;
|
||||
```
|
||||
|
@ -86,7 +86,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange tooltip="bottom" />;
|
||||
```
|
||||
|
@ -100,7 +100,7 @@ To disable the tooltip, set `tooltip` to `none`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange tooltip="none" />;
|
||||
```
|
||||
|
@ -121,7 +121,7 @@ You can customize the active and inactive portions of the track using the `--tra
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => (
|
||||
<SlRange
|
||||
|
@ -154,7 +154,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => (
|
||||
<SlRange
|
||||
|
@ -185,7 +185,7 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/sl-range';
|
||||
import SlRange from '@shoelace-style/shoelace/dist/react/range';
|
||||
|
||||
const App = () => <SlRange min={0} max={100} step={1} tooltipFormatter={value => `Total - ${value}%`} />;
|
||||
```
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" />;
|
||||
```
|
||||
|
@ -26,7 +26,7 @@ Ratings are commonly identified contextually, so labels aren't displayed. Howeve
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rate this component" />;
|
||||
```
|
||||
|
@ -40,7 +40,7 @@ Ratings are 0-5 by default. To change the maximum possible value, use the `max`
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" max={3} />;
|
||||
```
|
||||
|
@ -54,7 +54,7 @@ Use the `precision` attribute to let users select fractional ratings.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" precision={0.5} value={2.5} />;
|
||||
```
|
||||
|
@ -70,7 +70,7 @@ Set the `--symbol-size` custom property to adjust the size.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" style={{ '--symbol-size': '2rem' }} />;
|
||||
```
|
||||
|
@ -86,7 +86,7 @@ Use the `readonly` attribute to display a rating that users can't change.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" readonly value={3} />;
|
||||
```
|
||||
|
@ -100,7 +100,7 @@ Use the `disable` attribute to disable the rating.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => <SlRating label="Rating" disabled value={3} />;
|
||||
```
|
||||
|
@ -152,7 +152,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const terms = ['No rating', 'Terrible', 'Bad', 'OK', 'Good', 'Excellent'];
|
||||
const css = `
|
||||
|
@ -214,7 +214,7 @@ You can provide custom icons by passing a function to the `getSymbol` property.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const App = () => (
|
||||
<SlRating
|
||||
|
@ -245,7 +245,7 @@ You can also use the `getSymbol` property to render different icons based on val
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/sl-rating';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
function getSymbol(value) {
|
||||
const icons = ['emoji-angry', 'emoji-frown', 'emoji-expressionless', 'emoji-smile', 'emoji-laughing'];
|
||||
|
|
|
@ -13,7 +13,7 @@ Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https:/
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
|
||||
|
||||
const App = () => <SlRelativeTime date="2020-07-15T09:17:00-04:00" />;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Use the `sync` attribute to update the displayed value automatically as time pas
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
|
||||
|
||||
const date = new Date(new Date().getTime() - 60000);
|
||||
|
||||
|
@ -62,7 +62,7 @@ You can change how the time is displayed using the `format` attribute. Note that
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -88,7 +88,7 @@ Russian: <sl-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></sl-relat
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/sl-relative-time';
|
||||
import SlRelativeTime from '@shoelace-style/shoelace/dist/react/relative-time';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -36,7 +36,7 @@ The resize observer will report changes to the dimensions of the elements it wra
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlResizeObserver from '@shoelace-style/shoelace/dist/react/sl-resize-observer';
|
||||
import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observer';
|
||||
|
||||
const css = `
|
||||
.resize-observer-overview div {
|
||||
|
|
|
@ -17,8 +17,8 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect>
|
||||
|
@ -51,8 +51,8 @@ Use the `label` attribute to give the select an accessible label. For labels tha
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect label="Select one">
|
||||
|
@ -76,8 +76,8 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect label="Experience" help-text="Please tell us your skill level.">
|
||||
|
@ -101,8 +101,8 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Select one">
|
||||
|
@ -126,8 +126,8 @@ Use the `clearable` attribute to make the control clearable. The clear button on
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Clearable" clearable>
|
||||
|
@ -151,8 +151,8 @@ Add the `filled` attribute to draw a filled select.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect filled>
|
||||
|
@ -176,8 +176,8 @@ Use the `pill` attribute to give selects rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect pill>
|
||||
|
@ -201,8 +201,8 @@ Use the `disabled` attribute to disable a select.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect placeholder="Disabled" disabled>
|
||||
|
@ -229,8 +229,8 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect label="Select a Few" value="option-1 option-2 option-3" multiple clearable>
|
||||
|
@ -262,9 +262,9 @@ Use the `value` attribute to set the initial selection. When using `multiple`, u
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlDivider from '@shoelace-style/shoelace/dist/react/divider';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect value="option-1 option-2" multiple clearable>
|
||||
|
@ -294,8 +294,8 @@ Use `<sl-divider>` to group listbox items visually. You can also use `<small>` t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<SlSelect>
|
||||
|
@ -338,8 +338,8 @@ Use the `size` attribute to change a select's size. Note that size does not appl
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -423,9 +423,9 @@ Use the `prefix` slot to prepend an icon to the control.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/sl-option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlOption from '@shoelace-style/shoelace/dist/react/option';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -56,7 +56,7 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-overview header {
|
||||
|
@ -139,7 +139,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-effects {
|
||||
|
@ -200,7 +200,7 @@ Use multiple skeletons and some clever styles to simulate paragraphs.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-paragraphs sl-skeleton {
|
||||
|
@ -265,7 +265,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-avatars sl-skeleton {
|
||||
|
@ -360,7 +360,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-shapes sl-skeleton {
|
||||
|
@ -423,7 +423,7 @@ Set the `--color` and `--sheen-color` custom properties to adjust the skeleton's
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/sl-skeleton';
|
||||
import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
|
||||
|
||||
const css = `
|
||||
.skeleton-avatars sl-skeleton {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
|
||||
|
||||
const App = () => <SlSpinner />;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Spinners are sized based on the current font size. To change their size, set the
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -54,7 +54,7 @@ The width of the spinner's track can be changed by setting the `--track-width` c
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
|
||||
|
||||
const App = () => (
|
||||
<SlSpinner
|
||||
|
@ -79,7 +79,7 @@ The spinner's colors can be changed by setting the `--indicator-color` and `--tr
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/sl-spinner';
|
||||
import SlSpinner from '@shoelace-style/shoelace/dist/react/spinner';
|
||||
|
||||
const App = () => (
|
||||
<SlSpinner
|
||||
|
|
|
@ -25,7 +25,7 @@ layout: component
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel>
|
||||
|
@ -106,7 +106,7 @@ To set the initial position in pixels instead of a percentage, use the `position
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel position="200">
|
||||
|
@ -164,7 +164,7 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel vertical style={{ height: '400px' }}>
|
||||
|
@ -252,7 +252,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const css = `
|
||||
.split-panel-snapping {
|
||||
|
@ -344,7 +344,7 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel disabled>
|
||||
|
@ -421,9 +421,9 @@ Try resizing the example below with each option and notice how the panels respon
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => {
|
||||
const [primary, setPrimary] = useState('');
|
||||
|
@ -500,7 +500,7 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel style={{ '--min': '150px', '--max': 'calc(100% - 150px)' }}>
|
||||
|
@ -568,7 +568,7 @@ Create complex layouts that can be repositioned independently by nesting split p
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel>
|
||||
|
@ -643,8 +643,8 @@ You can target the `divider` part to apply CSS properties to the divider. To add
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlSplitPanel style={{ '--divider-width': '20px' }}>
|
||||
|
@ -731,8 +731,8 @@ Here's a more elaborate example that changes the divider's color and width and a
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/sl-split-panel';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlSplitPanel from '@shoelace-style/shoelace/dist/react/split-panel';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
.split-panel-divider sl-split-panel {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => <SlSwitch>Switch</SlSwitch>;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Use the `checked` attribute to activate the switch.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => <SlSwitch checked>Checked</SlSwitch>;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Use the `disabled` attribute to disable the switch.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => <SlSwitch disabled>Disabled</SlSwitch>;
|
||||
```
|
||||
|
@ -62,7 +62,7 @@ Use the `size` attribute to change a switch's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -86,7 +86,7 @@ Use the available custom properties to change how the switch is styled.
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/sl-switch';
|
||||
import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
|
||||
|
||||
const App = () => (
|
||||
<SlSwitch
|
||||
|
|
|
@ -22,9 +22,9 @@ Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
|
@ -70,9 +70,9 @@ Tabs can be shown on the bottom by setting `placement` to `bottom`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="bottom">
|
||||
|
@ -116,9 +116,9 @@ Tabs can be shown on the starting side by setting `placement` to `start`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="start">
|
||||
|
@ -162,9 +162,9 @@ Tabs can be shown on the ending side by setting `placement` to `end`.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup placement="end">
|
||||
|
@ -226,9 +226,9 @@ Add the `closable` attribute to a tab to show a close button. This example shows
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => {
|
||||
function handleClose(event) {
|
||||
|
@ -320,9 +320,9 @@ When there are more tabs than horizontal space allows, the nav will be scrollabl
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
|
@ -430,9 +430,9 @@ When focused, keyboard users can press [[Left]] or [[Right]] to select the desir
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup activation="manual">
|
||||
|
|
|
@ -20,9 +20,9 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/sl-tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/sl-tab-panel';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group';
|
||||
import SlTabPanel from '@shoelace-style/shoelace/dist/react/tab-panel';
|
||||
|
||||
const App = () => (
|
||||
<SlTabGroup>
|
||||
|
|
|
@ -13,7 +13,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/sl-tab';
|
||||
import SlTab from '@shoelace-style/shoelace/dist/react/tab';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
|
|
@ -14,7 +14,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/tag';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -40,7 +40,7 @@ Use the `size` attribute to change a tab's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/tag';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -62,7 +62,7 @@ Use the `pill` attribute to give tabs rounded edges.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/tag';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -108,7 +108,7 @@ Use the `removable` attribute to add a remove button to the tag.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/sl-tag';
|
||||
import SlTag from '@shoelace-style/shoelace/dist/react/tag';
|
||||
|
||||
const css = `
|
||||
.tags-removable sl-tag {
|
||||
|
|
|
@ -10,7 +10,7 @@ layout: component
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea />;
|
||||
```
|
||||
|
@ -30,7 +30,7 @@ Use the `label` attribute to give the textarea an accessible label. For labels t
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea label="Comments" />;
|
||||
```
|
||||
|
@ -44,7 +44,7 @@ Add descriptive help text to a textarea with the `help-text` attribute. For help
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea label="Feedback" help-text="Please tell us what you think." />;
|
||||
```
|
||||
|
@ -58,7 +58,7 @@ Use the `rows` attribute to change the number of text rows that get shown.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea rows={2} />;
|
||||
```
|
||||
|
@ -72,7 +72,7 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea placeholder="Type something" />;
|
||||
```
|
||||
|
@ -86,7 +86,7 @@ Add the `filled` attribute to draw a filled textarea.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea placeholder="Type something" filled />;
|
||||
```
|
||||
|
@ -100,7 +100,7 @@ Use the `disabled` attribute to disable a textarea.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea placeholder="Textarea" disabled />;
|
||||
```
|
||||
|
@ -118,7 +118,7 @@ Use the `size` attribute to change a textarea's size.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
|
@ -140,7 +140,7 @@ By default, textareas can be resized vertically by the user. To prevent resizing
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea resize="none" />;
|
||||
```
|
||||
|
@ -154,7 +154,7 @@ Textareas will automatically resize to expand to fit their content when `resize`
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => <SlTextarea resize="auto" />;
|
||||
```
|
||||
|
|
|
@ -16,8 +16,8 @@ Tooltips use `display: contents` so they won't interfere with how elements are p
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="This is a tooltip">
|
||||
|
@ -126,8 +126,8 @@ Use the `placement` attribute to set the preferred placement of the tooltip.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const css = `
|
||||
.tooltip-placement-example {
|
||||
|
@ -237,8 +237,8 @@ Set the `trigger` attribute to `click` to toggle the tooltip on click instead of
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip content="Click again to dismiss" trigger="click">
|
||||
|
@ -270,9 +270,9 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
|
|||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/sl-avatar';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -306,8 +306,8 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<div style={{ '--sl-tooltip-arrow-size': '0' }}>
|
||||
|
@ -345,8 +345,8 @@ Use the `content` slot to create tooltips with HTML content. Tooltips are design
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip>
|
||||
|
@ -372,8 +372,8 @@ Use the `--max-width` custom property to change the width the tooltip can grow t
|
|||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<SlTooltip style={{ '--max-width': '80px' }} content="This tooltip will wrap after only 80 pixels.">
|
||||
|
@ -410,8 +410,8 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/sl-tooltip';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const css = `
|
||||
.tooltip-hoist {
|
||||
|
|
|
@ -20,8 +20,8 @@ layout: component
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
@ -63,8 +63,8 @@ A tree item can contain other tree items. This allows the node to be expanded or
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
@ -104,8 +104,8 @@ Use the `selected` attribute to select a tree item initially.
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
@ -145,8 +145,8 @@ Use the `expanded` attribute to expand a tree item initially.
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
|
|
@ -37,8 +37,8 @@ layout: component
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
@ -119,8 +119,8 @@ The `selection` attribute lets you change the selection behavior of the tree.
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => {
|
||||
const [selection, setSelection] = useState('single');
|
||||
|
@ -199,8 +199,8 @@ Indent guides can be drawn by setting `--indent-guide-width`. You can also chang
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree class="tree-with-lines" style={{ '--indent-guide-width': '1px' }}>
|
||||
|
@ -268,8 +268,8 @@ If you want to disable this behavior after the first load, simply remove the `la
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => {
|
||||
const [childItems, setChildItems] = useState([]);
|
||||
|
@ -344,8 +344,8 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
|
|||
|
||||
<!-- prettier-ignore -->
|
||||
```jsx:react
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => (
|
||||
<SlTree>
|
||||
|
@ -429,9 +429,9 @@ Decorative icons can be used before labels to provide hints for each node.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/sl-icon';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/sl-tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/sl-tree-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlTree from '@shoelace-style/shoelace/dist/react/tree';
|
||||
import SlTreeItem from '@shoelace-style/shoelace/dist/react/tree-item';
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
|
|
|
@ -99,12 +99,12 @@ The form will not be submitted if a required field is incomplete.
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/sl-checkbox';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/sl-select';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/sl-textarea';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
import SlSelect from '@shoelace-style/shoelace/dist/react/select';
|
||||
import SlTextarea from '@shoelace-style/shoelace/dist/react/textarea';
|
||||
|
||||
const App = () => {
|
||||
function handleSubmit(event) {
|
||||
|
@ -165,8 +165,8 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
function handleSubmit(event) {
|
||||
|
@ -217,8 +217,8 @@ Some input types will automatically trigger constraints, such as `email` and `ur
|
|||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
function handleSubmit(event) {
|
||||
|
@ -279,8 +279,8 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
|
|||
|
||||
```jsx:react
|
||||
import { useRef, useState } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/sl-button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/sl-input';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlInput from '@shoelace-style/shoelace/dist/react/input';
|
||||
|
||||
const App = () => {
|
||||
const input = useRef(null);
|
||||
|
|
|
@ -17,8 +17,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti
|
|||
- Added the `<sl-copy-button>` component [#1473]
|
||||
- Fixed a bug in `<sl-dropdown>` where pressing [[Up]] or [[Down]] when focused on the trigger wouldn't focus the first/last menu items [#1472]
|
||||
- Fixed a bug that caused key presses in text fields to be hijacked when used inside `<sl-tree>` [#1492]
|
||||
- Fixed an upstream bug that caused React CodePen examples to stop working
|
||||
- Improved the behavior of the clear button in `<sl-input>` to prevent the component's width from shifting when toggled [#1496]
|
||||
- Improved `<sl-tooltip>` to prevent user selection so the tooltip doesn't get highlighted when dragging selections
|
||||
- Moved tag type definitions out of component files and into definition files
|
||||
- Removed `sideEffects` key from `package.json`. Update React docs to use cherry-picking. [#1485]
|
||||
- Updated Bootstrap Icons to 1.10.5
|
||||
|
||||
|
|
|
@ -40,9 +40,3 @@ export default class {{ properCase tag }} extends ShoelaceElement {
|
|||
return html` <slot></slot> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'{{ tag }}': {{ properCase tag }};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import {{ properCase tag }} from './{{ tagWithoutPrefix tag }}.component.js';
|
||||
|
||||
export * from './{{ tagWithoutPrefix tag }}.component.js';
|
||||
export default {{ properCase tag }};
|
||||
|
||||
{{ properCase tag }}.define('{{ tag }}');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'{{ tag }}': {{ properCase tag }};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -239,9 +239,3 @@ setDefaultAnimation('alert.hide', {
|
|||
],
|
||||
options: { duration: 250, easing: 'ease' }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-alert': SlAlert;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlAlert from './alert.component.js';
|
||||
|
||||
export * from './alert.component.js';
|
||||
export default SlAlert;
|
||||
|
||||
SlAlert.define('sl-alert');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-alert': SlAlert;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -114,9 +114,3 @@ export default class SlAnimatedImage extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-animated-image': SlAnimatedImage;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlAnimatedImage from './animated-image.component.js';
|
||||
|
||||
export * from './animated-image.component.js';
|
||||
export default SlAnimatedImage;
|
||||
|
||||
SlAnimatedImage.define('sl-animated-image');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-animated-image': SlAnimatedImage;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -218,9 +218,3 @@ export default class SlAnimation extends ShoelaceElement {
|
|||
return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-animation': SlAnimation;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlAnimation from './animation.component.js';
|
||||
|
||||
export * from './animation.component.js';
|
||||
export default SlAnimation;
|
||||
|
||||
SlAnimation.define('sl-animation');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-animation': SlAnimation;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -96,9 +96,3 @@ export default class SlAvatar extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-avatar': SlAvatar;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlAvatar from './avatar.component.js';
|
||||
|
||||
export * from './avatar.component.js';
|
||||
export default SlAvatar;
|
||||
|
||||
SlAvatar.define('sl-avatar');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-avatar': SlAvatar;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -48,9 +48,3 @@ export default class SlBadge extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-badge': SlBadge;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlBadge from './badge.component.js';
|
||||
|
||||
export * from './badge.component.js';
|
||||
export default SlBadge;
|
||||
|
||||
SlBadge.define('sl-badge');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-badge': SlBadge;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -87,9 +87,3 @@ export default class SlBreadcrumbItem extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-breadcrumb-item': SlBreadcrumbItem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlBreadcrumbItem from './breadcrumb-item.component.js';
|
||||
|
||||
export * from './breadcrumb-item.component.js';
|
||||
export default SlBreadcrumbItem;
|
||||
|
||||
SlBreadcrumbItem.define('sl-breadcrumb-item');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-breadcrumb-item': SlBreadcrumbItem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -98,9 +98,3 @@ export default class SlBreadcrumb extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-breadcrumb': SlBreadcrumb;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlBreadcrumb from './breadcrumb.component.js';
|
||||
|
||||
export * from './breadcrumb.component.js';
|
||||
export default SlBreadcrumb;
|
||||
|
||||
SlBreadcrumb.define('sl-breadcrumb');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-breadcrumb': SlBreadcrumb;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -89,9 +89,3 @@ function findButton(el: HTMLElement) {
|
|||
// The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
|
||||
return el.closest(selector) ?? el.querySelector(selector);
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-button-group': SlButtonGroup;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlButtonGroup from './button-group.component.js';
|
||||
|
||||
export * from './button-group.component.js';
|
||||
export default SlButtonGroup;
|
||||
|
||||
SlButtonGroup.define('sl-button-group');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-button-group': SlButtonGroup;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -328,9 +328,3 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon
|
|||
/* eslint-enable lit/binding-positions */
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-button': SlButton;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlButton from './button.component.js';
|
||||
|
||||
export * from './button.component.js';
|
||||
export default SlButton;
|
||||
|
||||
SlButton.define('sl-button');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-button': SlButton;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -51,9 +51,3 @@ export default class SlCard extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-card': SlCard;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlCard from './card.component.js';
|
||||
|
||||
export * from './card.component.js';
|
||||
export default SlCard;
|
||||
|
||||
SlCard.define('sl-card');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-card': SlCard;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -30,9 +30,3 @@ export default class SlCarouselItem extends ShoelaceElement {
|
|||
return html` <slot></slot> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-carousel-item': SlCarouselItem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlCarouselItem from './carousel-item.component.js';
|
||||
|
||||
export * from './carousel-item.component.js';
|
||||
export default SlCarouselItem;
|
||||
|
||||
SlCarouselItem.define('sl-carousel-item');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-carousel-item': SlCarouselItem;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -471,9 +471,3 @@ export default class SlCarousel extends ShoelaceElement {
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-carousel': SlCarousel;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlCarousel from './carousel.component.js';
|
||||
|
||||
export * from './carousel.component.js';
|
||||
export default SlCarousel;
|
||||
|
||||
SlCarousel.define('sl-carousel');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-carousel': SlCarousel;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -243,9 +243,3 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-checkbox': SlCheckbox;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlCheckbox from './checkbox.component.js';
|
||||
|
||||
export * from './checkbox.component.js';
|
||||
export default SlCheckbox;
|
||||
|
||||
SlCheckbox.define('sl-checkbox');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-checkbox': SlCheckbox;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1065,9 +1065,3 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
|
|||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-color-picker': SlColorPicker;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlColorPicker from './color-picker.component.js';
|
||||
|
||||
export * from './color-picker.component.js';
|
||||
export default SlColorPicker;
|
||||
|
||||
SlColorPicker.define('sl-color-picker');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-color-picker': SlColorPicker;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -249,9 +249,3 @@ setDefaultAnimation('copy.out', {
|
|||
],
|
||||
options: { duration: 100 }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-copy-button': SlCopyButton;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlCopyButton from './copy-button.component.js';
|
||||
|
||||
export * from './copy-button.component.js';
|
||||
export default SlCopyButton;
|
||||
|
||||
SlCopyButton.define('sl-copy-button');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-copy-button': SlCopyButton;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -244,9 +244,3 @@ setDefaultAnimation('details.hide', {
|
|||
],
|
||||
options: { duration: 250, easing: 'linear' }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-details': SlDetails;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlDetails from './details.component.js';
|
||||
|
||||
export * from './details.component.js';
|
||||
export default SlDetails;
|
||||
|
||||
SlDetails.define('sl-details');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-details': SlDetails;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -339,9 +339,3 @@ setDefaultAnimation('dialog.overlay.hide', {
|
|||
keyframes: [{ opacity: 1 }, { opacity: 0 }],
|
||||
options: { duration: 250 }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-dialog': SlDialog;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlDialog from './dialog.component.js';
|
||||
|
||||
export * from './dialog.component.js';
|
||||
export default SlDialog;
|
||||
|
||||
SlDialog.define('sl-dialog');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-dialog': SlDialog;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -30,9 +30,3 @@ export default class SlDivider extends ShoelaceElement {
|
|||
this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-divider': SlDivider;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlDivider from './divider.component.js';
|
||||
|
||||
export * from './divider.component.js';
|
||||
export default SlDivider;
|
||||
|
||||
SlDivider.define('sl-divider');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-divider': SlDivider;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -459,9 +459,3 @@ setDefaultAnimation('drawer.overlay.hide', {
|
|||
keyframes: [{ opacity: 1 }, { opacity: 0 }],
|
||||
options: { duration: 250 }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-drawer': SlDrawer;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
import SlDrawer from './drawer.component.js';
|
||||
|
||||
export * from './drawer.component.js';
|
||||
export default SlDrawer;
|
||||
|
||||
SlDrawer.define('sl-drawer');
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-drawer': SlDrawer;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -436,9 +436,3 @@ setDefaultAnimation('dropdown.hide', {
|
|||
],
|
||||
options: { duration: 100, easing: 'ease' }
|
||||
});
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-dropdown': SlDropdown;
|
||||
}
|
||||
}
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue