kopia lustrzana https://github.com/shoelace-style/shoelace
Reorder examples
Cory LaViska
rodzic
cd0d01f5e5
commit
de1daad04e
|
|
@ -12,27 +12,7 @@ Inputs collect data from the user.
|
|||
|
||||
## Examples
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the input an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-input label="Name"></sl-input>
|
||||
<br>
|
||||
<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to an input with the `help-text` slot.
|
||||
|
||||
```html preview
|
||||
<sl-input label="Nickname">
|
||||
<div slot="help-text">What would you like people to call you?</div>
|
||||
</sl-input>
|
||||
```
|
||||
|
||||
### Placeholder
|
||||
### Placeholders
|
||||
|
||||
Use the `placeholder` attribute to add a placeholder.
|
||||
|
||||
|
|
@ -40,16 +20,24 @@ Use the `placeholder` attribute to add a placeholder.
|
|||
<sl-input placeholder="Type something"></sl-input>
|
||||
```
|
||||
|
||||
### Size
|
||||
### Clearable
|
||||
|
||||
Use the `size` attribute to change an input's size.
|
||||
Add the `clearable` prop to add a clear button when the input has content.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Small" size="small"></sl-input>
|
||||
<sl-input placeholder="Clearable" clearable></sl-input>
|
||||
```
|
||||
|
||||
### Toggle Password
|
||||
|
||||
Add the `toggle-password` prop to add a toggle button that will show the password when activated.
|
||||
|
||||
```html preview
|
||||
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Medium" size="medium"></sl-input>
|
||||
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Large" size="large"></sl-input>
|
||||
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
|
||||
```
|
||||
|
||||
### Pill
|
||||
|
|
@ -64,6 +52,30 @@ Use the `pill` prop to give inputs rounded edges.
|
|||
<sl-input placeholder="Large" size="large" pill></sl-input>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an input.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Disabled" size="small" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Disabled" size="medium" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Disabled" size="large" disabled></sl-input>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change an input's size.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Small" size="small"></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Medium" size="medium"></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Large" size="large"></sl-input>
|
||||
```
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
|
@ -85,40 +97,24 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
</sl-input>
|
||||
```
|
||||
|
||||
### Clearable
|
||||
### Labels
|
||||
|
||||
Add the `clearable` prop to add a clear button when the input has content.
|
||||
Use the `label` attribute to give the input an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Clearable" size="small" clearable></sl-input>
|
||||
<sl-input label="Name"></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Clearable" size="medium" clearable></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Clearable" size="large" clearable></sl-input>
|
||||
<sl-input type="email" label="Email" placeholder="bob@example.com"></sl-input>
|
||||
```
|
||||
|
||||
### Toggle Password
|
||||
### Help Text
|
||||
|
||||
Add the `toggle-password` prop to add a toggle button that will show the password when activated.
|
||||
Add descriptive help text to an input with the `help-text` slot.
|
||||
|
||||
```html preview
|
||||
<sl-input type="password" placeholder="Password Toggle" size="small" toggle-password></sl-input>
|
||||
<br>
|
||||
<sl-input type="password" placeholder="Password Toggle" size="medium" toggle-password></sl-input>
|
||||
<br>
|
||||
<sl-input type="password" placeholder="Password Toggle" size="large" toggle-password></sl-input>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an input.
|
||||
|
||||
```html preview
|
||||
<sl-input placeholder="Disabled" size="small" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Disabled" size="medium" disabled></sl-input>
|
||||
<br>
|
||||
<sl-input placeholder="Disabled" size="large" disabled></sl-input>
|
||||
<sl-input label="Nickname">
|
||||
<div slot="help-text">What would you like people to call you?</div>
|
||||
</sl-input>
|
||||
```
|
||||
|
||||
### Validation
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Tags are used as labels to organize things or to indicate a selection.
|
|||
|
||||
## Examples
|
||||
|
||||
### Size
|
||||
### Sizes
|
||||
|
||||
Use the `size` prop to change a tab's size.
|
||||
|
||||
|
|
|
|||
|
|
@ -12,24 +12,6 @@ Textareas collect data from the user and allow multiple lines of text.
|
|||
|
||||
## Examples
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the textarea an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-textarea label="Comments"></sl-textarea>
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a textarea with the `help-text` slot.
|
||||
|
||||
```html preview
|
||||
<sl-textarea label="Feedback">
|
||||
<div slot="help-text">Please tell us what you think.</div>
|
||||
</sl-textarea>
|
||||
```
|
||||
|
||||
### Rows
|
||||
|
||||
Use the `rows` attribute to change the number of text rows that get shown.
|
||||
|
|
@ -54,6 +36,36 @@ Use the `disabled` attribute to disable an input.
|
|||
<sl-textarea placeholder="Textarea" disabled></sl-textarea>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a textarea's size.
|
||||
|
||||
```html preview
|
||||
<sl-textarea placeholder="Small" size="small"></sl-textarea>
|
||||
<br>
|
||||
<sl-textarea placeholder="Medium" size="medium"></sl-textarea>
|
||||
<br>
|
||||
<sl-textarea placeholder="Large" size="large"></sl-textarea>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to give the textarea an accessible label.
|
||||
|
||||
```html preview
|
||||
<sl-textarea label="Comments"></sl-textarea>
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a textarea with the `help-text` slot.
|
||||
|
||||
```html preview
|
||||
<sl-textarea label="Feedback">
|
||||
<div slot="help-text">Please tell us what you think.</div>
|
||||
</sl-textarea>
|
||||
```
|
||||
|
||||
### Validation
|
||||
|
||||
Show a valid or invalid state by setting the `valid` and `invalid` attributes, respectively. Help text can be used to provide feedback for validation and will be styled accordingly.
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue