adwaveui
Version:
Interactive Web Components inspired by the Gtk Adwaita theme.
152 lines (119 loc) • 9.94 kB
Markdown
<p align="center">
<h1 align="center">ADWave UI</h1>
<p align="center">
Web Components inspired by the Gtk's Adwaita theme.
</p>
<p align="center">
<a href="https://adwave.qzz.io/">
Examples
</a>
</p>
</p>
## Setup
AdwaveUI requires the AdwaveCSS stylesheet to be present.
The css files needed can be found in this package path: `adwavecss/dist/styles.css`
The adwave web components need to be imported in the JavaScript files:
```ts
import "adwaveui";
```
alternatively each web comoponent can be importted individually:
```ts
import "adwaveui/dist/esm/components/input/input";
import "adwaveui/dist/esm/components/selector/selector";
import "adwaveui/dist/esm/components/slider/slider";
import "adwaveui/dist/esm/components/switch/switch";
import "adwaveui/dist/esm/components/calendar/calendar";
```
style files for each of these can also be found in their respective directories.
## Components
1. [Input](#input)
2. [Selector](#selector)
3. [Slider](#slider)
4. [Switch](#switch)
5. [Calendar](#calendar)
## Input
```html
<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. By default filtering is done using a simple string match. | "false" |
| `type` | The type of the input. (text, password, email, etc.) | "text" |
| `value` | The current value of the input. | |
| `defaultvalue` | The default value, if the `value` is empty on mount, it will be set to this value. | |
## Selector
```html
<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. | |
| `scrollintoview` | If the selector were to open outside the viewport, scroll the whole viewport into view so the select option is visible. | "false" |
| `value` | The current selected value, must match one of the passed options. | |
| `defaultvalue` | The default value, if the `value` is empty on mount, it will be set to this value. | |
| `allowunselect` | Show an option on top that can be used to deselect (set the current value to null.) | |
| `unselectlabel` | The label of the unselect option button, if not provided, placeholder will be used. Only applicable when `allowunselect` is enabled. | "Select option" |
### adw-option properties
| Property | Description | Default |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| `selected` | If the option is selected or not. | "false" |
| `value` | The value of the option. | |
| `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" |
## Slider
```html
<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. | |
| `defaultvalue` | The default value, if the `value` is empty on mount, it will be set to this value. | |
## Switch
```html
<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" |
## Calendar
```html
<adw-calendar value="2025-10-04"></adw-calendar>
```
### Properties
| Property | Description | Default |
| -------- | ----------------------------------------------------------------- | ------------------ |
| `form` | The form the date input belongs to. | |
| `name` | The name of the date input, used when submitting a form. | |
| `locale` | The locale that will be used to format the dates. | navigator.language |
| `value` | The selected date. Must be in a format acceptable by Date.parse() | current date |