kopia lustrzana https://github.com/shoelace-style/shoelace
Improve button spacing
Cory LaViska
rodzic
23d9ff9096
commit
48eeb9ecd0
|
|
@ -91,6 +91,24 @@ As expected, buttons can be given a custom width by setting its `width`. This is
|
|||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html preview
|
||||
<sl-button type="default" size="small">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
|
||||
<sl-button type="default" size="small">
|
||||
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
|
||||
<sl-button type="default" size="small">
|
||||
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button type="default">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
|
|
@ -106,6 +124,24 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<sl-button type="default" size="large">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
|
||||
<sl-button type="default" size="large">
|
||||
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
|
||||
<sl-button type="default" size="large">
|
||||
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
### Caret
|
||||
|
|
@ -144,4 +180,22 @@ 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]
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
|
||||
- Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
|
||||
- Fixed a bug where disabled link buttons didn't appear disabled
|
||||
- Improved button spacings and added split button example
|
||||
- Improved elevation tokens in dark theme
|
||||
- Improved accessibility in `sl-tooltip` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
|
||||
- Improved slot detection in `sl-card`, `sl-dialog`, and `sl-drawer`
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
transition: var(--sl-transition-fast) background-color, var(--sl-transition-fast) color,
|
||||
var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
|
||||
cursor: inherit;
|
||||
|
|
@ -55,13 +56,13 @@
|
|||
}
|
||||
|
||||
.button__prefix ::slotted(:first-child) {
|
||||
margin-left: calc(-1 * var(--sl-spacing-x-small));
|
||||
margin-right: var(--sl-spacing-x-small);
|
||||
// margin-left: calc(-1 * var(--sl-spacing-x-small));
|
||||
// margin-right: var(--sl-spacing-x-small);
|
||||
}
|
||||
|
||||
.button__suffix ::slotted(:last-child) {
|
||||
margin-left: var(--sl-spacing-x-small);
|
||||
margin-right: calc(-1 * var(--sl-spacing-x-small));
|
||||
// margin-left: var(--sl-spacing-x-small);
|
||||
// margin-right: calc(-1 * var(--sl-spacing-x-small));
|
||||
}
|
||||
|
||||
.button__label {
|
||||
|
|
@ -264,7 +265,6 @@
|
|||
height: var(--sl-input-height-small);
|
||||
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
|
||||
border-radius: var(--sl-input-border-radius-small);
|
||||
padding: 0 var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
.button--medium {
|
||||
|
|
@ -272,7 +272,6 @@
|
|||
height: var(--sl-input-height-medium);
|
||||
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
|
||||
border-radius: var(--sl-input-border-radius-medium);
|
||||
padding: 0 var(--sl-spacing-large);
|
||||
}
|
||||
|
||||
.button--large {
|
||||
|
|
@ -280,7 +279,6 @@
|
|||
height: var(--sl-input-height-large);
|
||||
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
|
||||
border-radius: var(--sl-input-border-radius-large);
|
||||
padding: 0 var(--sl-spacing-x-large);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -343,8 +341,6 @@
|
|||
.button__caret {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: var(--sl-spacing-xx-small);
|
||||
margin-right: calc(-1 * var(--sl-spacing-xx-small));
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
|
|
@ -389,3 +385,74 @@
|
|||
transform: translateY(-50%) translateX(50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Button spacing
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.button--has-label {
|
||||
&.button--small .button__label {
|
||||
padding: 0 var(--sl-spacing-small);
|
||||
}
|
||||
|
||||
&.button--medium .button__label {
|
||||
padding: 0 var(--sl-spacing-medium);
|
||||
}
|
||||
|
||||
&.button--large .button__label {
|
||||
padding: 0 var(--sl-spacing-large);
|
||||
}
|
||||
}
|
||||
|
||||
.button--has-prefix {
|
||||
&.button--small {
|
||||
padding-left: var(--sl-spacing-x-small);
|
||||
|
||||
.button__label {
|
||||
padding-left: var(--sl-spacing-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--medium {
|
||||
padding-left: var(--sl-spacing-small);
|
||||
|
||||
.button__label {
|
||||
padding-left: var(--sl-spacing-small);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--large {
|
||||
padding-left: var(--sl-spacing-small);
|
||||
|
||||
.button__label {
|
||||
padding-left: var(--sl-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--has-suffix,
|
||||
.button--caret {
|
||||
&.button--small {
|
||||
padding-right: var(--sl-spacing-x-small);
|
||||
|
||||
.button__label {
|
||||
padding-right: var(--sl-spacing-x-small);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--medium {
|
||||
padding-right: var(--sl-spacing-small);
|
||||
|
||||
.button__label {
|
||||
padding-right: var(--sl-spacing-small);
|
||||
}
|
||||
}
|
||||
|
||||
&.button--large {
|
||||
padding-right: var(--sl-spacing-small);
|
||||
|
||||
.button__label {
|
||||
padding-right: var(--sl-spacing-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, State, h } from '@stencil/core';
|
||||
import { hasSlot } from '../../utilities/slot';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
|
|
@ -23,7 +24,12 @@ import { Component, Event, EventEmitter, Method, Prop, State, h } from '@stencil
|
|||
export class Button {
|
||||
button: HTMLButtonElement;
|
||||
|
||||
@Element() host: HTMLSlButtonElement;
|
||||
|
||||
@State() hasFocus = false;
|
||||
@State() hasLabel = false;
|
||||
@State() hasPrefix = false;
|
||||
@State() hasSuffix = false;
|
||||
|
||||
/** The button's type. */
|
||||
@Prop({ reflect: true }) type: 'default' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'text' = 'default';
|
||||
|
|
@ -74,6 +80,11 @@ export class Button {
|
|||
this.handleBlur = this.handleBlur.bind(this);
|
||||
this.handleFocus = this.handleFocus.bind(this);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.handleSlotChange = this.handleSlotChange.bind(this);
|
||||
}
|
||||
|
||||
componentWillLoad() {
|
||||
this.handleSlotChange();
|
||||
}
|
||||
|
||||
/** Sets focus on the button. */
|
||||
|
|
@ -88,6 +99,12 @@ export class Button {
|
|||
this.button.blur();
|
||||
}
|
||||
|
||||
handleSlotChange() {
|
||||
this.hasLabel = hasSlot(this.host);
|
||||
this.hasPrefix = hasSlot(this.host, 'prefix');
|
||||
this.hasSuffix = hasSlot(this.host, 'suffix');
|
||||
}
|
||||
|
||||
handleBlur() {
|
||||
this.hasFocus = false;
|
||||
this.slBlur.emit();
|
||||
|
|
@ -137,7 +154,10 @@ export class Button {
|
|||
'button--disabled': this.disabled,
|
||||
'button--focused': this.hasFocus,
|
||||
'button--loading': this.loading,
|
||||
'button--pill': this.pill
|
||||
'button--pill': this.pill,
|
||||
'button--has-label': this.hasLabel,
|
||||
'button--has-prefix': this.hasPrefix,
|
||||
'button--has-suffix': this.hasSuffix
|
||||
}}
|
||||
disabled={isButton ? this.disabled : null}
|
||||
type={isButton ? (this.submit ? 'submit' : 'button') : null}
|
||||
|
|
@ -152,13 +172,13 @@ export class Button {
|
|||
onClick={this.handleClick}
|
||||
>
|
||||
<span part="prefix" class="button__prefix">
|
||||
<slot name="prefix" />
|
||||
<slot onSlotchange={this.handleSlotChange} name="prefix" />
|
||||
</span>
|
||||
<span part="label" class="button__label">
|
||||
<slot />
|
||||
<slot onSlotchange={this.handleSlotChange} />
|
||||
</span>
|
||||
<span part="suffix" class="button__suffix">
|
||||
<slot name="suffix" />
|
||||
<slot onSlotchange={this.handleSlotChange} name="suffix" />
|
||||
</span>
|
||||
{this.caret && (
|
||||
<span part="caret" class="button__caret">
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue