mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
revert changes to visual tests to simplify PR
This commit is contained in:
lindsaym-fa
@@ -206,147 +206,10 @@
|
||||
<tr>
|
||||
<th><code>checked</code></th>
|
||||
<td>
|
||||
<wa-checkbox checked>Checked</wa-checkbox>
|
||||
<wa-checkbox checked>Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="checkbox" checked></input> Checked</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-checkbox size="small">Small</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s"><input type="checkbox"></input> Small</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-checkbox size="medium">Medium</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m"><input type="checkbox"></input> Medium</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-checkbox size="large">Large</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l"><input type="checkbox"></input> Large</label>
|
||||
</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">Checked</wa-radio>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="radio" checked></input> Checked</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-radio size="small">Small</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s"><input type="radio"></input> Small</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-radio size="medium">Medium</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m"><input type="radio"></input> Medium</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-radio size="large">Large</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l"><input type="radio"></input> Large</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>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>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>
|
||||
<label><input type="checkbox" checked></input> Checkbox</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -373,294 +236,6 @@
|
||||
<label>Color Picker <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-color-picker label="Small" value="#ffa07a" size="small"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Small <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-color-picker label="Medium" value="#ffa07a" size="medium"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Medium <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-color-picker label="Large" value="#ffa07a" size="large"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Large <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>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="Password" type="password"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Password <input type="password"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="date"</code></th>
|
||||
<td>
|
||||
<wa-input label="Date" type="date"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Date <input type="date"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="time"</code></th>
|
||||
<td>
|
||||
<wa-input label="Time" type="time"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Time <input type="time"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<wa-input label="Filled" placeholder="Placeholder" appearance="filled"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Filled <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-input label="Small" placeholder="Placeholder" size="small"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Small <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-input label="Medium" placeholder="Placeholder" size="medium"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Medium <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-input label="Large" placeholder="Placeholder" size="large"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Large <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>pill</code></th>
|
||||
<td>
|
||||
<wa-input label="Pill" placeholder="Placeholder" pill></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Pill <input type="text" placeholder="Placeholder" class="wa-pill"></input></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>filled</code></th>
|
||||
<td>
|
||||
<wa-select label="Filled" value="1" appearance="filled">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-filled">Filled
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-select label="Small" value="1" size="small">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Small
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-select label="Medium" value="1" size="medium">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Medium
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-select label="Large" value="1" size="large">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Large
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>pill</code></th>
|
||||
<td>
|
||||
<wa-select label="Pill" value="1" pill>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label>Pill
|
||||
<select value="1" class="wa-pill">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>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>filled</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Filled" placeholder="Placeholder" appearance="filled" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label>Filled <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Small" placeholder="Placeholder" size="small" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Small <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Medium" placeholder="Placeholder" size="medium" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Medium <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Large" placeholder="Placeholder" size="large" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Large <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -708,4 +283,324 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>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>filled</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (filled)" placeholder="Placeholder" appearance="filled"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>small</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (small)" placeholder="Placeholder" size="small"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (medium)" placeholder="Placeholder" size="medium"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (large)" placeholder="Placeholder" size="large"></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>filled</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (filled)" value="1" appearance="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>small</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (small)" value="1" size="small">
|
||||
<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>medium</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (medium)" value="1" size="medium">
|
||||
<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>large</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (large)" value="1" size="large">
|
||||
<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>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>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>filled</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (filled)" placeholder="Placeholder" appearance="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>small</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (small)" placeholder="Placeholder" size="small" 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>medium</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (medium)" placeholder="Placeholder" size="medium" 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>large</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (large)" placeholder="Placeholder" size="large" 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>
|
||||
@@ -336,40 +336,14 @@
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-menu size="small">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-s">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -377,40 +351,14 @@
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-menu size="medium">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-m">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -418,40 +366,14 @@
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-menu size="large">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-l">
|
||||
<wa-menu-item type="checkbox" checked>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 2</wa-menu-item>
|
||||
<wa-menu-item type="checkbox">Menu Item 3</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item>
|
||||
Prefix
|
||||
<wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-menu-item>
|
||||
Suffix
|
||||
<wa-icon slot="suffix" name="heart" variant="solid"></wa-icon>
|
||||
</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item loading>Loading</wa-menu-item>
|
||||
<wa-menu-item disabled>Disabled</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user