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

add <br>

Browse Source
This commit is contained in:
Cory LaViska
2024-05-28 13:35:40 -04:00
parent cd8d5d0eea
commit 2941db66e4
1 changed files with 24 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/docs/components/radio.md
View File

@@ -8,8 +8,8 @@ Radios are designed to be used with [radio groups](/components/radio-group).
```html {.example}
<wa-radio-group label="Select an option" name="a" value="1">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2">Option 2</wa-radio>
<wa-radio value="1">Option 1</wa-radio><br>
<wa-radio value="2">Option 2</wa-radio><br>
<wa-radio value="3">Option 3</wa-radio>
</wa-radio-group>
```
@@ -21,8 +21,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
const App = () => (
<WaRadioGroup label="Select an option" name="a" value="1">
<WaRadio value="1">Option 1</WaRadio>
<WaRadio value="2">Option 2</WaRadio>
<WaRadio value="1">Option 1</WaRadio><br />
<WaRadio value="2">Option 2</WaRadio><br />
<WaRadio value="3">Option 3</WaRadio>
</WaRadioGroup>
);
@@ -41,8 +41,8 @@ To set the initial value and checked state, use the `value` attribute on the con
```html {.example}
<wa-radio-group label="Select an option" name="a" value="3">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2">Option 2</wa-radio>
<wa-radio value="1">Option 1</wa-radio><br>
<wa-radio value="2">Option 2</wa-radio><br>
<wa-radio value="3">Option 3</wa-radio>
</wa-radio-group>
```
@@ -54,8 +54,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
const App = () => (
<WaRadioGroup label="Select an option" name="a" value="3">
<WaRadio value="1">Option 1</WaRadio>
<WaRadio value="2">Option 2</WaRadio>
<WaRadio value="1">Option 1</WaRadio><br />
<WaRadio value="2">Option 2</WaRadio><br />
<WaRadio value="3">Option 3</WaRadio>
</WaRadioGroup>
);
@@ -68,8 +68,8 @@ Use the `disabled` attribute to disable a radio.
```html {.example}
<wa-radio-group label="Select an option" name="a" value="1">
<wa-radio value="1">Option 1</wa-radio>
<wa-radio value="2" disabled>Option 2</wa-radio>
<wa-radio value="1">Option 1</wa-radio><br>
<wa-radio value="2" disabled>Option 2</wa-radio><br>
<wa-radio value="3">Option 3</wa-radio>
</wa-radio-group>
```
@@ -81,10 +81,8 @@ import WaRadioGroup from '@shoelace-style/shoelace/dist/react/radio-group';
const App = () => (
<WaRadioGroup label="Select an option" name="a" value="1">
<WaRadio value="1">Option 1</WaRadio>
<WaRadio value="2" disabled>
Option 2
</WaRadio>
<WaRadio value="1">Option 1</WaRadio><br />
<WaRadio value="2" disabled>Option 2</WaRadio><br />
<WaRadio value="3">Option 3</WaRadio>
</WaRadioGroup>
);
@@ -97,24 +95,24 @@ Add the `size` attribute to the [Radio Group](/components/radio-group) to change
```html {.example}
<wa-radio-group size="small" value="1">
<wa-radio value="1">Small 1</wa-radio>
<wa-radio value="2">Small 2</wa-radio>
<wa-radio value="1">Small 1</wa-radio><br>
<wa-radio value="2">Small 2</wa-radio><br>
<wa-radio value="3">Small 3</wa-radio>
</wa-radio-group>
<br />
<wa-radio-group size="medium" value="1">
<wa-radio value="1">Medium 1</wa-radio>
<wa-radio value="2">Medium 2</wa-radio>
<wa-radio value="1">Medium 1</wa-radio><br>
<wa-radio value="2">Medium 2</wa-radio><br>
<wa-radio value="3">Medium 3</wa-radio>
</wa-radio-group>
<br />
<wa-radio-group size="large" value="1">
<wa-radio value="1">Large 1</wa-radio>
<wa-radio value="2">Large 2</wa-radio>
<wa-radio value="1">Large 1</wa-radio><br>
<wa-radio value="2">Large 2</wa-radio><br>
<wa-radio value="3">Large 3</wa-radio>
</wa-radio-group>
```
@@ -125,24 +123,24 @@ import WaRadio from '@shoelace-style/shoelace/dist/react/radio';
const App = () => (
<>
<WaRadioGroup size="small" value="1">
<WaRadio value="1">Small 1</WaRadio>
<WaRadio value="2">Small 2</WaRadio>
<WaRadio value="1">Small 1</WaRadio><br />
<WaRadio value="2">Small 2</WaRadio><br />
<WaRadio value="3">Small 3</WaRadio>
</WaRadioGroup>
<br />
<WaRadioGroup size="medium" value="1">
<WaRadio value="1">Medium 1</WaRadio>
<WaRadio value="2">Medium 2</WaRadio>
<WaRadio value="1">Medium 1</WaRadio><br />
<WaRadio value="2">Medium 2</WaRadio><br />
<WaRadio value="3">Medium 3</WaRadio>
</WaRadioGroup>
<br />
<WaRadioGroup size="large" value="1">
<WaRadio value="1">Large 1</WaRadio>
<WaRadio value="2">Large 2</WaRadio>
<WaRadio value="1">Large 1</WaRadio><br />
<WaRadio value="2">Large 2</WaRadio><br />
<WaRadio value="3">Large 3</WaRadio>
</WaRadioGroup>
</>