Add visual separators for solid buttons

pull/481/head
Cory LaViska 2020-12-23 08:48:48 -05:00
rodzic 9f7bc29b5f
commit 3883be3193
4 zmienionych plików z 49 dodań i 22 usunięć

Wyświetl plik

@ -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&hellip;</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.

Wyświetl plik

@ -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&hellip;</sl-menu-item>
<sl-menu-item>Save all</sl-menu-item>
</sl-menu>
</sl-dropdown>
</sl-button-group>
```
[component-metadata:sl-button]

Wyświetl plik

@ -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

Wyświetl plik

@ -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