mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
d8881c0b1e
* Initial progress on visual test suite * Additional tests and descriptions * Add native callout, add dividers between tables * Indicate test failures, improve alignment tests * Split tests into separate files * Add table scrolling * Remove irrelevant icon test cases * Add test failures * Shorten "Inline Code" > "Code" to prevent wrapping * Add horizontal orientation to radio button tests
745 lines
18 KiB
Plaintext
745 lines
18 KiB
Plaintext
<h3>Button</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-button></code></th>
|
|
<th><code><button></code></th>
|
|
<th><code>.wa-button</code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-button>Button</wa-button>
|
|
</td>
|
|
<td>
|
|
<button>Button</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button">Button</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-brand</code></th>
|
|
<td>
|
|
<wa-button class="wa-brand">Brand</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-brand">Brand</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-brand">Brand</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-neutral</code></th>
|
|
<td>
|
|
<wa-button class="wa-neutral">Neutral</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-neutral">Neutral</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-neutral">Neutral</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-success</code></th>
|
|
<td>
|
|
<wa-button class="wa-success">Success</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-success">Success</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-success">Success</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-warning</code></th>
|
|
<td>
|
|
<wa-button class="wa-warning">Warning</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-warning">Warning</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-warning">Warning</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-danger</code></th>
|
|
<td>
|
|
<wa-button class="wa-danger">Danger</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-danger">Danger</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-danger">Danger</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-accent</code></th>
|
|
<td>
|
|
<wa-button class="wa-accent">Accent</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-accent">Accent</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-accent">Accent</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-filled</code></th>
|
|
<td>
|
|
<wa-button class="wa-filled">Filled</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-filled">Filled</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-filled">Filled</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-outlined</code></th>
|
|
<td>
|
|
<wa-button class="wa-outlined">Outlined</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-outlined">Outlined</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-outlined">Outlined</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-plain</code></th>
|
|
<td>
|
|
<wa-button class="wa-plain">Plain</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-plain">Plain</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-plain">Plain</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-s</code></th>
|
|
<td>
|
|
<wa-button class="wa-size-s">Small</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-s">Small</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-size-s">Small</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-m</code></th>
|
|
<td>
|
|
<wa-button class="wa-size-m">Medium</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-m">Medium</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-size-m">Medium</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-l</code></th>
|
|
<td>
|
|
<wa-button class="wa-size-l">Large</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-size-l">Large</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-size-l">Large</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-pill</code></th>
|
|
<td>
|
|
<wa-button class="wa-pill">Pill</wa-button>
|
|
</td>
|
|
<td>
|
|
<button class="wa-pill">Pill</button>
|
|
</td>
|
|
<td>
|
|
<div class="wa-button wa-pill">Pill</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Callout</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-callout></code></th>
|
|
<th><code>.wa-callout</code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th class="test-failure"><em>default</em></th>
|
|
<td>
|
|
<wa-callout>Callout</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout">Callout</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-brand</code></th>
|
|
<td>
|
|
<wa-callout class="wa-brand">Brand</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-brand">Brand</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-neutral</code></th>
|
|
<td>
|
|
<wa-callout class="wa-neutral">Neutral</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-neutral">Neutral</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-success</code></th>
|
|
<td>
|
|
<wa-callout class="wa-success">Success</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-success">Success</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-warning</code></th>
|
|
<td>
|
|
<wa-callout class="wa-warning">Warning</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-warning">Warning</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-danger</code></th>
|
|
<td>
|
|
<wa-callout class="wa-danger">Danger</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-danger">Danger</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-accent</code></th>
|
|
<td>
|
|
<wa-callout class="wa-accent">Accent</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-accent">Accent</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-filled</code></th>
|
|
<td>
|
|
<wa-callout class="wa-filled">Filled</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-filled">Filled</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-outlined</code></th>
|
|
<td>
|
|
<wa-callout class="wa-outlined">Outlined</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-outlined">Outlined</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-plain</code></th>
|
|
<td>
|
|
<wa-callout class="wa-plain">Plain</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-plain">Plain</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-s</code></th>
|
|
<td>
|
|
<wa-callout class="wa-size-s">Small</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-size-s">Small</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-m</code></th>
|
|
<td>
|
|
<wa-callout class="wa-size-m">Medium</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-size-m">Medium</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-l</code></th>
|
|
<td>
|
|
<wa-callout class="wa-size-l">Large</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-size-l">Large</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-pill</code></th>
|
|
<td>
|
|
<wa-callout class="wa-pill">Pill</wa-callout>
|
|
</td>
|
|
<td>
|
|
<div class="wa-callout wa-pill">Pill</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Checkbox</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-checkbox></code></th>
|
|
<th><code><input type="checkbox"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-checkbox>Checkbox</wa-checkbox>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox"></input> Checkbox</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>checked</code></th>
|
|
<td>
|
|
<wa-checkbox checked>Checkbox</wa-checkbox>
|
|
</td>
|
|
<td>
|
|
<label><input type="checkbox" checked></input> Checkbox</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Color Picker</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-color-picker></code></th>
|
|
<th><code><input type="color"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
|
|
</td>
|
|
<td>
|
|
<label>Color Picker <input type="color" value="#ffa07a"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Details</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-details></code></th>
|
|
<th><code><details></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-details summary="Summary">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</wa-details>
|
|
</td>
|
|
<td>
|
|
<details>
|
|
<summary>Summary</summary>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</details>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>dir="rtl"</code></th>
|
|
<td>
|
|
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
|
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
|
</wa-details>
|
|
</td>
|
|
<td>
|
|
<details lang="ar" dir="rtl">
|
|
<summary>تبديلني</summary>
|
|
<p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
|
|
</details>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3 class="test-failure">Input</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-input></code></th>
|
|
<th><code><input></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="password"</code></th>
|
|
<td>
|
|
<wa-input label="Input (password)" type="password"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (password) <input type="password"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="date"</code></th>
|
|
<td>
|
|
<wa-input label="Input (date)" type="date"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (date) <input type="date"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>type="time"</code></th>
|
|
<td>
|
|
<wa-input label="Input (time)" type="time"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (time) <input type="time"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-filled</code></th>
|
|
<td>
|
|
<wa-input label="Input (filled)" placeholder="Placeholder" class="wa-filled"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-s</code></th>
|
|
<td>
|
|
<wa-input label="Input (small)" placeholder="Placeholder" class="wa-size-s"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-m</code></th>
|
|
<td>
|
|
<wa-input label="Input (medium)" placeholder="Placeholder" class="wa-size-m"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-l</code></th>
|
|
<td>
|
|
<wa-input label="Input (large)" placeholder="Placeholder" class="wa-size-l"></wa-input>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Progress Bar</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-progress-bar></code></th>
|
|
<th><code><progress></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
|
</td>
|
|
<td>
|
|
<progress value="50" max="100"></progress>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Radio</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-radio></code></th>
|
|
<th><code><input type="radio"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-radio>Radio</wa-radio>
|
|
</td>
|
|
<td>
|
|
<label><input type="radio"></input> Radio</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>checked</code></th>
|
|
<td>
|
|
<wa-radio-group value="1">
|
|
<wa-radio value="1">Radio</wa-radio>
|
|
</wa-radio-group>
|
|
</td>
|
|
<td>
|
|
<label><input type="radio" checked></input> Radio</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3>Select</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-select></code></th>
|
|
<th><code><select></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-select label="Select" value="1">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label>Select
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-filled</code></th>
|
|
<td>
|
|
<wa-select label="Select (filled)" value="1" class="wa-filled">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-filled">Select (filled)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-s</code></th>
|
|
<td>
|
|
<wa-select label="Select (small)" value="1" class="wa-size-s">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Select (small)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-m</code></th>
|
|
<td>
|
|
<wa-select label="Select (medium)" value="1" class="wa-size-m">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Select (medium)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-l</code></th>
|
|
<td>
|
|
<wa-select label="Select (large)" value="1" class="wa-size-l">
|
|
<wa-option value="1">Option</wa-option>
|
|
</wa-select>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Select (large)
|
|
<select value="1">
|
|
<option value="1">Option</option>
|
|
</select>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3 class="test-failure">Slider</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-slider></code></th>
|
|
<th><code><input type="range"></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-slider label="Slider"></wa-slider>
|
|
</td>
|
|
<td>
|
|
<label>Slider <input type="range"></input></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<wa-divider></wa-divider>
|
|
|
|
<h3 class="test-failure">Textarea</h3>
|
|
|
|
<div class="table-scroll">
|
|
<table>
|
|
<thead>
|
|
<th></th>
|
|
<th><code><wa-textarea></code></th>
|
|
<th><code><textarea></code></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th><em>default</em></th>
|
|
<td>
|
|
<wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-filled</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (filled)" placeholder="Placeholder" class="wa-filled" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-s</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (small)" placeholder="Placeholder" class="wa-size-s" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-m</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (medium)" placeholder="Placeholder" class="wa-size-m" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>.wa-size-l</code></th>
|
|
<td>
|
|
<wa-textarea label="Textarea (large)" placeholder="Placeholder" class="wa-size-l" rows="2"></wa-textarea>
|
|
</td>
|
|
<td>
|
|
<label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> |