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 examples

Browse Source
This commit is contained in:
Cory LaViska
2022-12-20 17:43:50 -05:00
parent 0f67b9a9d1
commit 2ffbf9b017
1 changed files with 42 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
docs/components/input.md
View File

@@ -77,25 +77,13 @@ const App = () => <SlInput placeholder="Clearable" clearable />;
Add the `password-toggle` attribute to add a toggle button that will show the password when activated.
```html preview
<sl-input type="password" placeholder="Password Toggle" size="small" password-toggle></sl-input>
<br />
<sl-input type="password" placeholder="Password Toggle" size="medium" password-toggle></sl-input>
<br />
<sl-input type="password" placeholder="Password Toggle" size="large" password-toggle></sl-input>
<sl-input type="password" placeholder="Password Toggle" password-toggle></sl-input>
```
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlInput type="password" placeholder="Password Toggle" size="small" password-toggle />
<br />
<SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />
<br />
<SlInput type="password" placeholder="Password Toggle" size="large" password-toggle />
</>
);
const App = () => <SlInput type="password" placeholder="Password Toggle" size="medium" password-toggle />;
```
### Filled Inputs
@@ -112,6 +100,46 @@ import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlInput placeholder="Type something" filled />;
```
### Disabled
Use the `disabled` attribute to disable an input.
```html preview
<sl-input placeholder="Disabled" disabled></sl-input>
```
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlInput placeholder="Disabled" disabled />;
```
### 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>
```
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlInput placeholder="Small" size="small" />
<br />
<SlInput placeholder="Medium" size="medium" />
<br />
<SlInput placeholder="Large" size="large" />
</>
);
```
### Pill
Use the `pill` attribute to give inputs rounded edges.
@@ -164,58 +192,6 @@ const App = () => (
);
```
### 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>
```
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlInput placeholder="Disabled" size="small" disabled />
<br />
<SlInput placeholder="Disabled" size="medium" disabled />
<br />
<SlInput placeholder="Disabled" size="large" disabled />
</>
);
```
### 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>
```
```jsx react
import { SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlInput placeholder="Small" size="small" />
<br />
<SlInput placeholder="Medium" size="medium" />
<br />
<SlInput placeholder="Large" size="large" />
</>
);
```
### Prefix & Suffix Icons
Use the `prefix` and `suffix` slots to add icons.