kopia lustrzana https://github.com/shoelace-style/shoelace
remove variant
Cory LaViska
rodzic
ae76bea220
commit
e3f691fbda
|
|
@ -94,110 +94,6 @@ const App = () => (
|
|||
);
|
||||
```
|
||||
|
||||
### Variants
|
||||
|
||||
Use the `variant` attribute to set the button's variant.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="default" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="default" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="default" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="primary" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="primary" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="primary" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="success" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="success" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="success" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="neutral" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="neutral" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="neutral" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="warning" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="warning" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="warning" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button variant="success" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button variant="success" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button variant="success" name="option" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="default" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="default" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="default" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="primary" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="primary" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="primary" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="success" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="success" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="success" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="neutral" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="neutral" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="neutral" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="warning" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="warning" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="warning" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton variant="success" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton variant="success" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton variant="success" name="option" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a radio button's size.
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
- Removed the `--sl-focus-ring-alpha` design token
|
||||
- Refactored `--sl-focus-ring` to be an `outline` property instead of a `box-shadow` property
|
||||
- Added `--sl-focus-ring-color`, `--sl-focus-ring-style`, and `--sl-focus-ring-offset`
|
||||
- 🚨 BREAKING: removed `variant` from `<sl-radio-button>`
|
||||
- Added `sl-label-change` event to `<sl-menu-item>`
|
||||
- Added `blur()`, `click()`, and `focus()` methods as well as `sl-blur` and `sl-focus` events to `<sl-icon-button>` [#730](https://github.com/shoelace-style/shoelace/issues/730)
|
||||
- Added Tabler Icons example to icons page
|
||||
|
|
|
|||
|
|
@ -127,10 +127,6 @@ export default class SlRadioButton extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
/** The button's variant. */
|
||||
@property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' =
|
||||
'default';
|
||||
|
||||
/** The button's size. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
|
|
@ -145,12 +141,7 @@ export default class SlRadioButton extends LitElement {
|
|||
part="button"
|
||||
class=${classMap({
|
||||
button: true,
|
||||
'button--default': this.variant === 'default',
|
||||
'button--primary': this.variant === 'primary',
|
||||
'button--success': this.variant === 'success',
|
||||
'button--neutral': this.variant === 'neutral',
|
||||
'button--warning': this.variant === 'warning',
|
||||
'button--danger': this.variant === 'danger',
|
||||
'button--default': true,
|
||||
'button--small': this.size === 'small',
|
||||
'button--medium': this.size === 'medium',
|
||||
'button--large': this.size === 'large',
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue