js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update docs

Browse Source
This commit is contained in:
Cory LaViska
2020-07-12 07:42:22 -04:00
parent aa7c7d0923
commit 2226168bdc
13 changed files with 192 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/components/alert.md
View File

@@ -4,8 +4,10 @@
Alerts are used to display important messages.
Alerts are designed to be shown dynamically, so you need to include the `open` attribute to display them.
```html preview
<sl-alert type="primary" open>
<sl-alert open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
This is a standard alert. You can customize its content and even the icon.
</sl-alert>
@@ -15,6 +17,8 @@ Alerts are used to display important messages.
### Types
Set the `type` attribute to change the alert's type.
```html preview
<sl-alert type="primary" open>
<sl-icon slot="icon" name="info-circle"></sl-icon>
@@ -57,14 +61,25 @@ Alerts are used to display important messages.
### Closable
Add the `closable` attribute to show a close button that will hide the alert.
```html preview
<sl-alert type="primary" open closable>
<sl-alert type="primary" open closable class="alert-closable">
<sl-icon slot="icon" name="info-circle"></sl-icon>
You can close this alert any time!
</sl-alert>
<script>
const alert = document.querySelector('.alert-closable');
alert.addEventListener('slAfterHide', () => {
setTimeout(() => alert.open = true, 2000);
});
</script>
```
### Without Icon
### Without Icons
Icons are optional. Simply omit the `icon` slot if you don't want them.
```html preview
<sl-alert type="primary" open>

40
docs/components/avatar.md
View File

@@ -6,32 +6,32 @@ Avatars are used to represent a person or object.
```html preview
<sl-avatar></sl-avatar>
<sl-avatar initials="SL"></sl-avatar>
<sl-avatar
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
alt="Gray tabby kitten looking down"
></sl-avatar>
```
## Examples
### Shape
### Images
To use an image for the avatar, set the `image` and `alt` attributes. This will take priority and be shown over initials and icons.
```html preview
<sl-avatar shape="square"></sl-avatar>
<sl-avatar shape="square" initials="SL"></sl-avatar>
<sl-avatar
shape="square"
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
alt="Gray tabby kitten looking down"
></sl-avatar>
```
### Custom Icon
### Initials
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
```html preview
<sl-avatar initials="SL"></sl-avatar>
```
### Custom Icons
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
```html preview
<sl-avatar>
@@ -47,4 +47,16 @@ Avatars are used to represent a person or object.
</sl-avatar>
```
### Shapes
Avatars can be shaped using the `shape` attribute.
```html preview
<sl-avatar shape="square"></sl-avatar>
<sl-avatar shape="rounded"></sl-avatar>
<sl-avatar shape="circle"></sl-avatar>
```
[component-metadata:sl-avatar]

16
docs/components/badge.md
View File

@@ -4,6 +4,16 @@
Badges are used to draw attention and display statuses or counts.
```html preview
<sl-badge>Badge</sl-icon></sl-badge>
```
## Examples
### Types
Set the `type` attribute to change the badge's type.
```html preview
<sl-badge type="primary">Primary</sl-icon></sl-badge>
<sl-badge type="success">Success</sl-badge>
@@ -12,9 +22,7 @@ Badges are used to draw attention and display statuses or counts.
<sl-badge type="danger">Danger</sl-badge>
```
## Examples
### Buttons
### With Buttons
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
@@ -35,7 +43,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak
</sl-button>
```
### Menu Items
### With Menu Items
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.

39
docs/components/button.md
View File

@@ -4,6 +4,16 @@
Buttons represent actions that are available to the user.
```html preview
<sl-button>Button</sl-button>
```
## Examples
### Types
Use the `type` attribute to set the button's type.
```html preview
<sl-button type="default">Default</sl-button>
<sl-button type="primary">Primary</sl-button>
@@ -13,8 +23,6 @@ Buttons represent actions that are available to the user.
<sl-button type="danger">Danger</sl-button>
```
## Examples
### Sizes
Use the `size` prop to change a button's size.
@@ -25,20 +33,17 @@ Use the `size` prop to change a button's size.
<sl-button size="large">Large</sl-button>
```
### Pill
### Pill Buttons
Use the `pill` prop to give buttons rounded edges.
```html preview
<sl-button type="default" pill>Default</sl-button>
<sl-button type="primary" pill>Primary</sl-button>
<sl-button type="success" pill>Success</sl-button>
<sl-button type="info" pill>Info</sl-button>
<sl-button type="warning" pill>Warning</sl-button>
<sl-button type="danger" pill>Danger</sl-button>
<sl-button size="small" pill>Small</sl-button>
<sl-button size="medium" pill>Medium</sl-button>
<sl-button size="large" pill>Large</sl-button>
```
### Circle
### Circle Buttons
Use the `circle` prop to create circular icon buttons.
@@ -48,9 +53,9 @@ Use the `circle` prop to create circular icon buttons.
<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
```
### Text
### Text Buttons
Use `type="text"` to create text buttons, which share the same size as regular buttons but don't have backgrounds or borders.
Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
```html preview
<sl-button type="text" size="small">Text</sl-button>
@@ -58,9 +63,9 @@ Use `type="text"` to create text buttons, which share the same size as regular b
<sl-button type="text" size="large">Text</sl-button>
```
### Custom Width
### Setting a Custom Width
Custom width buttons can be created by setting the button's `width`.
As expected, buttons can be given a custom width by setting its `width`. This is useful for making buttons span the full width of their container on smaller screens.
```html preview
<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
@@ -68,7 +73,7 @@ Custom width buttons can be created by setting the button's `width`.
<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
```
### Icons
### Prefix and Suffix Icons
Use the `prefix` and `suffix` slots to add icons.
@@ -102,7 +107,7 @@ Use the `caret` prop to add a dropdown indicator when a button will trigger a dr
### Loading
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
Use the `loading` prop to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
```html preview
<sl-button type="default" loading>Default</sl-button>
@@ -115,7 +120,7 @@ Use the `loading` prop to make a button busy. The width will remain the same as
### Disabled
Use the `disabled` prop to disable a button.
Use the `disabled` prop to disable a button. Clicks will be suppressed until the disabled state is removed.
```html preview
<sl-button type="default" disabled>Default</sl-button>

27
docs/components/checkbox.md
View File

@@ -5,9 +5,34 @@
Checkboxes allow the user to toggle an option on or off.
```html preview
<sl-checkbox>Default</sl-checkbox><br>
<sl-checkbox>Checkbox</sl-checkbox><br>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Checked
Use the `checked` attribute to activate the checkbox.
```html preview
<sl-checkbox checked>Checked</sl-checkbox><br>
```
### Indeterminate
Use the `indeterminate` attribute to make the checkbox indeterminate.
```html preview
<sl-checkbox indeterminate>Indeterminate</sl-checkbox><br>
```
### Disabled
Use the `disabled` attribute to disable the checkbox.
```html preview
<sl-checkbox disabled>Disabled</sl-checkbox><br>
```

2
docs/components/input.md
View File

@@ -8,6 +8,8 @@ Inputs collect data from the user.
<sl-input type="text" placeholder="Input"></sl-input>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Labels

37
docs/components/radio.md
View File

@@ -5,9 +5,38 @@
Radios allow the user to select one option from a group of many.
```html preview
<sl-radio name="my-radio">Default</sl-radio><br>
<sl-radio name="my-radio" checked>Checked</sl-radio><br>
<sl-radio name="my-radio" disabled>Disabled</sl-radio><br>
<sl-radio>Radio</sl-radio><br>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Checked
Use the `checked` attribute to activate the radio.
```html preview
<sl-radio checked>Checked</sl-radio><br>
```
### Disabled
Use the `disabled` attribute to disable the radio.
```html preview
<sl-radio disabled>Disabled</sl-radio><br>
```
### Grouping Radios
Radios are grouped based on their `name` attribute.
```html preview
<sl-radio name="option" checked>Option 1</sl-radio><br>
<sl-radio name="option">Option 2</sl-radio><br>
<sl-radio name="option">Option 3</sl-radio><br>
<sl-radio name="option">Option 4</sl-radio><br>
```
[component-metadata:sl-radio]

2
docs/components/range.md
View File

@@ -8,6 +8,8 @@ Ranges allow the user to select a single value within a given range using a slid
<sl-range min="0" max="100" step="1"></sl-range>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Custom Formatter

2
docs/components/select.md
View File

@@ -18,6 +18,8 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
</sl-select>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Labels

26
docs/components/spinner.md
View File

@@ -10,12 +10,30 @@ Spinners are used to show the progress of an indeterminate operation.
## Examples
## Size
### Size
Spinners are sized relative to the current font size. To change their size, set the `font-size` property on the spinner itself or on a parent element as shown below.
```html preview
<sl-spinner size="16"></sl-spinner>
<sl-spinner size="32"></sl-spinner>
<sl-spinner size="48"></sl-spinner>
<sl-spinner></sl-spinner>
<sl-spinner style="font-size: 2rem;"></sl-spinner>
<sl-spinner style="font-size: 3rem;"></sl-spinner>
```
### Stroke Width
The width of the spinner can be changed by setting the `--stroke-width` custom property.
```html preview
<sl-spinner style="font-size: 2rem; --stroke-width: 6px;"></sl-spinner>
```
### Color
The spinner's color can be changed by setting the `--color` custom property.
```html preview
<sl-spinner style="font-size: 2rem; --color: tomato;"></sl-spinner>
```
[component-metadata:sl-spinner]

31
docs/components/switch.md
View File

@@ -5,15 +5,28 @@
Switches allow the user to toggle an option on or off.
```html preview
<sl-switch>Default</sl-switch>
<br>
<sl-switch checked>Checked</sl-switch>
<br>
<sl-switch disabled>Disabled</sl-switch>
<sl-switch>Switch</sl-switch>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Checked
Use the `checked` attribute to activate the switch.
```html preview
<sl-switch checked>Checked</sl-switch><br>
```
### Disabled
Use the `disabled` attribute to disable the switch.
```html preview
<sl-switch disabled>Disabled</sl-switch><br>
```
[component-metadata:sl-switch]

2
docs/components/textarea.md
View File

@@ -8,6 +8,8 @@ Textareas collect data from the user and allow multiple lines of text.
<sl-textarea placeholder="Textarea"></sl-textarea>
```
?> This component doesn't work with standard forms. Use [`<sl-form>`](/components/form.md) instead.
## Examples
### Labels

3
src/components/radio/radio.tsx
View File

@@ -75,6 +75,9 @@ export class Radio {
getAllRadios() {
const form = this.host.closest('sl-form, form') || document.body;
if (!this.name) return [];
return [...form.querySelectorAll('sl-radio')].filter(
(radio: HTMLSlRadioElement) => radio.name === this.name
) as HTMLSlRadioElement[];