ADWave UI

Web Components inspired by the Gtk's Adwaita theme.

Examples

Components

1. Input
2. Selector
3. Slider
4. Switch

Input

<adw-input
    placeholder="Put in your name"
></adw-input>

Properties

Property	Description	Default
disabled	If the input is disabled or not.	"false"
form	The form the input belongs to.
maxlength	The maximum length of the input.
minlength	The minimum length of the input.
name	The name of the input, used when submitting a form.
placeholder	Text displayed when the input is empty.
suggestions	List of suggested strings to display when the input is focused.
suggestionsorientation	Determines whether the list of suggestions appears above or below the input field. up or down.	"down"
suggestionsshowall	Set to "true" to always display all the suggestions.	"false"
fuzzy	When set to "true" the suggestions will be filtered using a fuzzy search algorithm as the user types. By default filtering is done using a simple string match.
type	The type of the input. (text, password, email, etc.)	"text"
value	The current value of the input.

Selector

<adw-selector placeholder="Select option">
    <adw-option value="1" selected="true">
        Option 1
    </adw-option>
    <adw-option value="2">
        Option 2
    </adw-option>
    <adw-option value="3">
        Option 3
    </adw-option>
</adw-selector>

Properties

Property	Description	Default
disabled	If the selector is disabled or not.	"false"
form	The form the selector belongs to.
name	The name of the selector, used when submitting a form.
orientation	Determines whether the list of options appears above or below the selector. up or down.	"down"
reverseorder	When set to true, the options will be displayed in reverse order.	"false"
placeholder	Text displayed when no option is selected.
inert	When set to true, this option will appear as non-selectable, this can be used to create separators or headers above or in between other options.	"false"

adw-option properties

Property	Description	Default
selected	If the option is selected or not.	"false"
value	The value of the option.

Slider

<adw-slider
    min="0"
    max="100"
    value="50"
></adw-slider>

Properties

Property	Description	Default
disabled	If the slider is disabled or not.	"false"
form	The form the slider belongs to.
max	The maximum value on the slider.	100
min	The minimum value on the slider.	0
name	The name of the slider, used when submitting a form.
precision	The number of decimal places to round the value to.	4
step	The amount to increment or decrement the value by when moving the slider.	1
value	The current value of the slider.

Switch

<adw-switch
    active="true"
></adw-switch>

Properties

Property	Description	Default
disabled	If the switch is disabled or not.
form	The form the switch belongs to.
name	The name of the switch, used when submitting a form.
active	If the switch is active or not.	"false"