Added some more dummy validating form inputs
This commit is contained in:
Samuel Andert
180
src/documentations/external/skeleton.md
vendored
Normal file
180
src/documentations/external/skeleton.md
vendored
Normal file
@ -0,0 +1,180 @@
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
import { RangeSlider } from '@skeletonlabs/skeleton';
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Keyboard
|
||||
Demo
|
||||
|
||||
|
||||
Combines a native range input with datalist ticks to create a powerful range slider element.
|
||||
|
||||
Labeled
|
||||
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
let value = 15;
|
||||
let max = 25;
|
||||
HTML
|
||||
Copy
|
||||
<RangeSlider name="range-slider" bind:value={value} max={25} step={1} ticked>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-bold">Label</div>
|
||||
<div class="text-xs">{value} / {max}</div>
|
||||
</div>
|
||||
</RangeSlider>
|
||||
|
||||
This component implements restProps. This passes all extra attributes to the component's input elements.
|
||||
|
||||
Name Type Value Description
|
||||
name string - Required. Set a unique name for the input.
|
||||
id string - Provide a unique input id. Auto-generated by default
|
||||
value number 0 Set the input value.
|
||||
min number 0 Set the input minimum range.
|
||||
max number 100 Set the input maximum range.
|
||||
step number 1 Set the input step offset.
|
||||
ticked boolean false Enables tick marks. See browser support below.
|
||||
accent string 'accent-surface-900 dark:accent-surface-50' Provide classes to set the input accent color.
|
||||
label string - A semantic ARIA label.
|
||||
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Keyboard
|
||||
Name Default Fallback Description
|
||||
default ✓ - -
|
||||
trail - - A label slot directly below the range slider.
|
||||
|
||||
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Keyboard
|
||||
Name Type Element Response Description
|
||||
on:click forwarded <input> - -
|
||||
on:change forwarded <input> - -
|
||||
on:blur forwarded <input> - -
|
||||
|
||||
|
||||
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Keyboard
|
||||
Keys Description
|
||||
Right Arrow or Up Arrow Increase the value of the slider by one step.
|
||||
Left Arrow or Down Arrow Decrease the value of the slider by one step.
|
||||
Home Set the slider to the first allowed value in its range.
|
||||
End Set the slider to the last allowed value in its range.
|
||||
Page Up Increase the slider value by a large amount.
|
||||
Page Down Decrease the slider value by a large amount.
|
||||
|
||||
|
||||
Slide Toggles
|
||||
A sliding toggle element that can capture input from a user.
|
||||
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Demo
|
||||
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
let value: boolean = false;
|
||||
HTML
|
||||
Copy
|
||||
<SlideToggle name="slide" bind:checked={value} />
|
||||
This component provides an alternative UI for a checkbox input element.
|
||||
|
||||
Labeled
|
||||
|
||||
HTML
|
||||
Copy
|
||||
<SlideToggle name="slider-label" checked>(label)</SlideToggle>
|
||||
Customized
|
||||
Slide toggles styles and colors can be easily customized with the active and size properties.
|
||||
|
||||
|
||||
HTML
|
||||
Copy
|
||||
<SlideToggle name="slider-large" checked active="bg-primary-500" size="lg" />
|
||||
Checkbox Attributes
|
||||
This component supports Svelte's $$restProps, which allows for required, disabled, and any other valid checkbox input attributes.
|
||||
|
||||
HTML
|
||||
Copy
|
||||
<SlideToggle ... required disabled />
|
||||
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
This component implements restProps. This passes all extra attributes to the component's input elements.
|
||||
|
||||
Name Type Value Description
|
||||
name string - Required. Set a unique name for the input.
|
||||
checked boolean false The checked state of the input element.
|
||||
size 'sm' | 'md' | 'lg' 'md' Sets the size of the component.
|
||||
background string 'bg-surface-400 dark:bg-surface-700' Provide classes to set the inactive state background color.
|
||||
active string 'bg-surface-900 dark:bg-surface-300' Provide classes to set the active state background color.
|
||||
border string - Provide classes to set the border styles.
|
||||
rounded string 'rounded-full' Provide classes to set border radius styles.
|
||||
label string - Provide a semantic label.
|
||||
|
||||
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Name Default Fallback Description
|
||||
default ✓ - -
|
||||
|
||||
Slide Toggles
|
||||
A sliding toggle element that can capture input from a user.
|
||||
|
||||
TYPESCRIPT
|
||||
Copy
|
||||
import { SlideToggle } from '@skeletonlabs/skeleton';
|
||||
Source
|
||||
Page Source
|
||||
WAI-ARIA
|
||||
Usage
|
||||
Props
|
||||
Slots
|
||||
Events
|
||||
Name Type Element Response Description
|
||||
on:keyup dispatched - { event } Fires when the component is focused and key is pressed.
|
||||
on:click forwarded <input> - -
|
||||
on:keydown forwarded <input> - -
|
||||
on:keypress forwarded <input> - -
|
||||
on:mouseover forwarded <input> - -
|
||||
on:change forwarded <input> - -
|
||||
on:focus forwarded <input> - -
|
||||
on:blur forwarded <input> - -
|
||||
Reference in New Issue
Block a user