kopia lustrzana https://github.com/shoelace-style/shoelace
Add visual separators for solid buttons
rodzic
9f7bc29b5f
commit
3883be3193
|
@ -44,7 +44,7 @@ All button sizes are supported, but avoid mixing sizes within the same button gr
|
|||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button's `type` attribute. Types can be mixed as needed.
|
||||
Theme buttons are supported through the button's `type` attribute.
|
||||
|
||||
```html preview
|
||||
<sl-button-group>
|
||||
|
@ -55,6 +55,14 @@ Theme buttons are supported through the button's `type` attribute. Types can be
|
|||
|
||||
<br><br>
|
||||
|
||||
<sl-button-group>
|
||||
<sl-button type="success">Left</sl-button>
|
||||
<sl-button type="success">Center</sl-button>
|
||||
<sl-button type="success">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button-group>
|
||||
<sl-button type="info">Left</sl-button>
|
||||
<sl-button type="info">Center</sl-button>
|
||||
|
@ -64,9 +72,17 @@ Theme buttons are supported through the button's `type` attribute. Types can be
|
|||
<br><br>
|
||||
|
||||
<sl-button-group>
|
||||
<sl-button>Create</sl-button>
|
||||
<sl-button>Edit</sl-button>
|
||||
<sl-button type="danger">Destroy</sl-button>
|
||||
<sl-button type="warning">Left</sl-button>
|
||||
<sl-button type="warning">Center</sl-button>
|
||||
<sl-button type="warning">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button-group>
|
||||
<sl-button type="danger">Left</sl-button>
|
||||
<sl-button type="danger">Center</sl-button>
|
||||
<sl-button type="danger">Right</sl-button>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
|
@ -117,6 +133,24 @@ Dropdowns can be placed inside button groups as long as the trigger is a `<sl-bu
|
|||
</sl-button-group>
|
||||
```
|
||||
|
||||
### Split Buttons
|
||||
|
||||
Create a split button using a button and a dropdown.
|
||||
|
||||
```html preview
|
||||
<sl-button-group>
|
||||
<sl-button type="primary">Save</sl-button>
|
||||
<sl-dropdown placement="bottom-end">
|
||||
<sl-button slot="trigger" type="primary"caret></sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Save</sl-menu-item>
|
||||
<sl-menu-item>Save as…</sl-menu-item>
|
||||
<sl-menu-item>Save all</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
### Tooltips in Button Groups
|
||||
|
||||
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
|
||||
|
|
|
@ -180,22 +180,4 @@ Use the `disabled` prop to disable a button. Clicks will be suppressed until the
|
|||
<sl-button type="danger" disabled>Danger</sl-button>
|
||||
```
|
||||
|
||||
### Split Buttons
|
||||
|
||||
Create a split button using a [button group](/components/button-group) and a [dropdown](/components/dropdown).
|
||||
|
||||
```html preview
|
||||
<sl-button-group>
|
||||
<sl-button>Save</sl-button>
|
||||
<sl-dropdown placement="bottom-end">
|
||||
<sl-button slot="trigger" caret></sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Save</sl-menu-item>
|
||||
<sl-menu-item>Save as…</sl-menu-item>
|
||||
<sl-menu-item>Save all</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
[component-metadata:sl-button]
|
||||
|
|
|
@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Removed `input`, `prefix` and `suffix` parts
|
||||
- 🚨 BREAKING CHANGE: Removed `copy-button` part from `sl-color-picker` since copying is now done by clicking the preview
|
||||
- Added `getFormattedValue()` method to `sl-color-picker` so you can retrieve the current value in any format
|
||||
- Added visual separators between solid buttons in `sl-button-group`
|
||||
- Fixed a bug where moving the mouse while `sl-dropdown` is closing would remove focus from the trigger
|
||||
- Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
|
||||
- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
|
||||
|
|
|
@ -34,6 +34,16 @@ sl-button-group {
|
|||
> sl-dropdown:not(:first-child) > sl-button[slot='trigger'],
|
||||
> sl-tooltip:not(:first-child) > sl-button {
|
||||
margin-left: calc(-1 * var(--sl-input-border-width));
|
||||
|
||||
// Add a visual separator between solid buttons
|
||||
&:not([type='default'])::part(base):not(:hover):not(:active):not(:focus)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-left: solid 1px #ffffff40;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
|
|
Ładowanie…
Reference in New Issue