kopia lustrzana https://github.com/shoelace-style/shoelace
add divider component
Cory LaViska
rodzic
bc3e9c43da
commit
1b5dca52e3
|
|
@ -23,6 +23,7 @@
|
|||
- [Color Picker](/components/color-picker)
|
||||
- [Details](/components/details)
|
||||
- [Dialog](/components/dialog)
|
||||
- [Divider](/components/divider)
|
||||
- [Drawer](/components/drawer)
|
||||
- [Dropdown](/components/dropdown)
|
||||
- [Form](/components/form)
|
||||
|
|
@ -31,7 +32,6 @@
|
|||
- [Image Comparer](/components/image-comparer)
|
||||
- [Input](/components/input)
|
||||
- [Menu](/components/menu)
|
||||
- [Menu Divider](/components/menu-divider)
|
||||
- [Menu Item](/components/menu-item)
|
||||
- [Menu Label](/components/menu-label)
|
||||
- [Progress Bar](/components/progress-bar)
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<sl-menu-label>Toggle <kbd>\\</kbd></sl-menu-label>
|
||||
<sl-menu-item value="light">Light</sl-menu-item>
|
||||
<sl-menu-item value="dark">Dark</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="auto">Auto</sl-menu-item>
|
||||
</sl-menu>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
# Divider
|
||||
|
||||
[component-header:sl-divider]
|
||||
|
||||
Dividers are used to visually separate or group elements.
|
||||
|
||||
```html preview
|
||||
<sl-divider></sl-divider>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Width
|
||||
|
||||
Use the `--width` custom property to change the width of the divider.
|
||||
|
||||
```html preview
|
||||
<sl-divider style="--width: 4px;"></sl-divider>
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
Use the `--color` custom property to change the color of the divider.
|
||||
|
||||
```html preview
|
||||
<sl-divider style="--color: tomato;"></sl-divider>
|
||||
```
|
||||
|
||||
### Spacing
|
||||
|
||||
Use the `--spacing` custom property to change the amount of space between the divider and it's neighboring elements.
|
||||
|
||||
```html preview
|
||||
<div style="text-align: center;">
|
||||
Above
|
||||
<sl-divider style="--spacing: 2rem;"></sl-divider>
|
||||
Below
|
||||
</div>
|
||||
```
|
||||
|
||||
### Vertical
|
||||
|
||||
Add the `vertical` attribute to draw the divider in a vertical orientation. The divider will span the full height of its container. Vertical dividers work especially well inside of a flex container.
|
||||
|
||||
```html preview
|
||||
<div style="display: flex; align-items: center; height: 2rem;">
|
||||
First
|
||||
<sl-divider vertical></sl-divider>
|
||||
Middle
|
||||
<sl-divider vertical></sl-divider>
|
||||
Last
|
||||
</div>
|
||||
```
|
||||
|
||||
### Menu Dividers
|
||||
|
||||
Use dividers in [menus](/components/menu) to visually group menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item value="1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="3">Option 3</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="4">Option 4</sl-menu-item>
|
||||
<sl-menu-item value="5">Option 5</sl-menu-item>
|
||||
<sl-menu-item value="6">Option 6</sl-menu-item>
|
||||
</sl-menu>
|
||||
```
|
||||
|
||||
[component-metadata:sl-divider]
|
||||
|
|
@ -15,10 +15,10 @@ Dropdowns are designed to work well with [menus](/components/menu) to provide a
|
|||
<sl-menu-item>Dropdown Item 1</sl-menu-item>
|
||||
<sl-menu-item>Dropdown Item 2</sl-menu-item>
|
||||
<sl-menu-item>Dropdown Item 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item checked>Checked</sl-menu-item>
|
||||
<sl-menu-item disabled>Disabled</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>
|
||||
Prefix
|
||||
<sl-icon slot="prefix" name="gift"></sl-icon>
|
||||
|
|
@ -44,7 +44,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut
|
|||
<sl-menu-item>Cut</sl-menu-item>
|
||||
<sl-menu-item>Copy</sl-menu-item>
|
||||
<sl-menu-item>Paste</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>Find</sl-menu-item>
|
||||
<sl-menu-item>Replace</sl-menu-item>
|
||||
</sl-menu>
|
||||
|
|
@ -62,7 +62,7 @@ The distance from the panel to the trigger can be customized using the `distance
|
|||
<sl-menu-item>Cut</sl-menu-item>
|
||||
<sl-menu-item>Copy</sl-menu-item>
|
||||
<sl-menu-item>Paste</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>Find</sl-menu-item>
|
||||
<sl-menu-item>Replace</sl-menu-item>
|
||||
</sl-menu>
|
||||
|
|
@ -80,7 +80,7 @@ The offset of the panel along the trigger can be customized using the `skidding`
|
|||
<sl-menu-item>Cut</sl-menu-item>
|
||||
<sl-menu-item>Copy</sl-menu-item>
|
||||
<sl-menu-item>Paste</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>Find</sl-menu-item>
|
||||
<sl-menu-item>Replace</sl-menu-item>
|
||||
</sl-menu>
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
# Menu Divider
|
||||
|
||||
[component-header:sl-menu-divider]
|
||||
|
||||
Menu dividers are used to visually group menu items.
|
||||
|
||||
```html preview
|
||||
<sl-menu
|
||||
style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);"
|
||||
>
|
||||
<sl-menu-item value="1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="2">Option 2</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="3">Option 3</sl-menu-item>
|
||||
<sl-menu-item value="4">Option 4</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-menu-item value="5">Option 5</sl-menu-item>
|
||||
<sl-menu-item value="6">Option 6</sl-menu-item>
|
||||
</sl-menu>
|
||||
```
|
||||
|
||||
[component-metadata:sl-menu-divider]
|
||||
|
|
@ -11,10 +11,10 @@ Menu items provide options for the user to pick from in a menu.
|
|||
<sl-menu-item>Option 1</sl-menu-item>
|
||||
<sl-menu-item>Option 2</sl-menu-item>
|
||||
<sl-menu-item>Option 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item checked>Checked</sl-menu-item>
|
||||
<sl-menu-item disabled>Disabled</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item>
|
||||
Prefix Icon
|
||||
<sl-icon slot="prefix" name="gift"></sl-icon>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Menu labels are used to describe a group of menu items.
|
|||
<sl-menu-item value="apple">Apple</sl-menu-item>
|
||||
<sl-menu-item value="banana">Banana</sl-menu-item>
|
||||
<sl-menu-item value="orange">Orange</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-label>Vegetables</sl-menu-label>
|
||||
<sl-menu-item value="broccoli">Broccoli</sl-menu-item>
|
||||
<sl-menu-item value="carrot">Carrot</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
|
||||
Menus provide a list of options for the user to choose from.
|
||||
|
||||
You can use [menu items](/components/menu-item), [menu dividers](/components/menu-divider), and [menu labels](/components/menu-label) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
|
||||
You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
|
||||
|
||||
```html preview
|
||||
<sl-menu style="max-width: 200px; border: solid 1px rgb(var(--sl-panel-border-color)); border-radius: var(--sl-border-radius-medium);">
|
||||
<sl-menu-item value="undo">Undo</sl-menu-item>
|
||||
<sl-menu-item value="redo">Redo</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="cut">Cut</sl-menu-item>
|
||||
<sl-menu-item value="copy">Copy</sl-menu-item>
|
||||
<sl-menu-item value="paste">Paste</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Selects allow you to choose one or more items from a dropdown menu.
|
|||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="option-4">Option 4</sl-menu-item>
|
||||
<sl-menu-item value="option-5">Option 5</sl-menu-item>
|
||||
<sl-menu-item value="option-6">Option 6</sl-menu-item>
|
||||
|
|
@ -89,7 +89,7 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
|
|||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item value="option-4">Option 4</sl-menu-item>
|
||||
<sl-menu-item value="option-5">Option 5</sl-menu-item>
|
||||
<sl-menu-item value="option-6">Option 6</sl-menu-item>
|
||||
|
|
@ -98,7 +98,7 @@ To allow multiple options to be selected, use the `multiple` attribute. It's a g
|
|||
|
||||
### Grouping Options
|
||||
|
||||
Options can be grouped visually using menu labels and menu dividers.
|
||||
Options can be grouped visually using menu labels and dividers.
|
||||
|
||||
```html preview
|
||||
<sl-select placeholder="Select one">
|
||||
|
|
@ -106,7 +106,7 @@ Options can be grouped visually using menu labels and menu dividers.
|
|||
<sl-menu-item value="option-1">Option 1</sl-menu-item>
|
||||
<sl-menu-item value="option-2">Option 2</sl-menu-item>
|
||||
<sl-menu-item value="option-3">Option 3</sl-menu-item>
|
||||
<sl-menu-divider></sl-menu-divider>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-label>Group 2</sl-menu-label>
|
||||
<sl-menu-item value="option-4">Option 4</sl-menu-item>
|
||||
<sl-menu-item value="option-5">Option 5</sl-menu-item>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: removed `<sl-menu-divider>` (use `<sl-divider>` instead)
|
||||
- Added the `<sl-divider>` component
|
||||
- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
|
||||
- Added the `--sl-panel-border-width` design token
|
||||
- Added missing background color to `<sl-details>`
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
--color: rgb(var(--sl-panel-border-color));
|
||||
--width: var(--sl-panel-border-width);
|
||||
--spacing: var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
:host(:not([vertical])) {
|
||||
display: block;
|
||||
border-top: solid var(--width) var(--color);
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
|
||||
:host([vertical]) {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
border-left: solid var(--width) var(--color);
|
||||
margin: 0 var(--spacing);
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { watch } from '../../internal/watch';
|
||||
import styles from './divider.styles';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*
|
||||
* @cssproperty --color - The color of the divider.
|
||||
* @cssproperty --spacing - The spacing between the divider and neighboring elements.
|
||||
* @cssproperty --width - The width of the divider.
|
||||
*/
|
||||
@customElement('sl-divider')
|
||||
export default class SlDivider extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
/** Draws the divider in a vertical orientation. */
|
||||
@property({ type: Boolean, reflect: true }) vertical = false;
|
||||
|
||||
firstUpdated() {
|
||||
this.setAttribute('role', 'separator');
|
||||
}
|
||||
|
||||
@watch('vertical')
|
||||
handleVerticalChange() {
|
||||
this.setAttribute('aria-orientation', this.vertical ? 'vertical' : 'horizontal');
|
||||
}
|
||||
|
||||
render() {
|
||||
return html``;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-divider': SlDivider;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
border-top: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
|
||||
margin: var(--sl-spacing-x-small) 0;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
import { customElement } from 'lit/decorators.js';
|
||||
import styles from './menu-divider.styles';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
@customElement('sl-menu-divider')
|
||||
export default class SlMenuDivider extends LitElement {
|
||||
static styles = styles;
|
||||
|
||||
render() {
|
||||
return html` <div part="base" class="menu-divider" role="separator" aria-hidden="true"></div> `;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-menu-divider': SlMenuDivider;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,4 +11,8 @@ export default css`
|
|||
.menu {
|
||||
padding: var(--sl-spacing-x-small) 0;
|
||||
}
|
||||
|
||||
::slotted(sl-divider) {
|
||||
--spacing: var(--sl-spacing-x-small);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import styles from './menu.styles';
|
|||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
* @slot - The menu's content, including menu items, menu dividers, and menu labels.
|
||||
* @slot - The menu's content, including menu items, menu labels, and dividers.
|
||||
*
|
||||
* @event {{ item: SlMenuItem }} sl-select - Emitted when a menu item is selected.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export { default as SlCheckbox } from './components/checkbox/checkbox';
|
|||
export { default as SlColorPicker } from './components/color-picker/color-picker';
|
||||
export { default as SlDetails } from './components/details/details';
|
||||
export { default as SlDialog } from './components/dialog/dialog';
|
||||
export { default as SlDivider } from './components/divider/divider';
|
||||
export { default as SlDrawer } from './components/drawer/drawer';
|
||||
export { default as SlDropdown } from './components/dropdown/dropdown';
|
||||
export { default as SlForm } from './components/form/form';
|
||||
|
|
@ -24,7 +25,6 @@ export { default as SlImageComparer } from './components/image-comparer/image-co
|
|||
export { default as SlInclude } from './components/include/include';
|
||||
export { default as SlInput } from './components/input/input';
|
||||
export { default as SlMenu } from './components/menu/menu';
|
||||
export { default as SlMenuDivider } from './components/menu-divider/menu-divider';
|
||||
export { default as SlMenuItem } from './components/menu-item/menu-item';
|
||||
export { default as SlMenuLabel } from './components/menu-label/menu-label';
|
||||
export { default as SlProgressBar } from './components/progress-bar/progress-bar';
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue