Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/singleware/ui-field
UI field package.
https://github.com/singleware/ui-field
browser field javascript shadow-dom singleware typescript user-interface web-component
Last synced: 4 days ago
JSON representation
UI field package.
- Host: GitHub
- URL: https://github.com/singleware/ui-field
- Owner: Singleware
- License: mit
- Created: 2018-07-29T21:00:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-03T15:57:36.000Z (over 4 years ago)
- Last Synced: 2024-10-07T23:35:35.763Z (about 1 month ago)
- Topics: browser, field, javascript, shadow-dom, singleware, typescript, user-interface, web-component
- Language: JavaScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI-Field
Custom HTML element used to mirror field properties into the first element in its center slot, also provides the common field structures with label, prepend and append slots.
### State Attributes
| Name | Description |
| ------- | -------------------------------------------------------------- |
| empty | Automatically assigned when the center slot element is empty |
| checked | Automatically assigned when the center slot element is checked |
| invalid | Automatically assigned when the center slot element is invalid |
### Mirrored Properties
| Name | Description |
| -------------- | ----------------------------------------------------------------- |
| empty | Get the `empty` state from the center slot element |
| type | Get and set the element `type` in the center slot |
| name | Get and set the element `name` in the center slot |
| value | Get and set the element `value` in the center slot |
| checked | Get and set the `checked` state in the center slot element |
| defaultValue | Get and set the `defaultValue` in the center slot element |
| defaultChecked | Get and set the `defaultChecked` state in the center slot element |
| required | Get and set the `required` state in the center slot element |
| readOnly | Get and set the `readOnly` state in the center slot element |
| disabled | Get and set the `disabled` state in the center slot element |
### Properties
| Name | Description |
| ----------- | --------------------------------------------------------------- |
| label | Get and set the field label |
| orientation | Get and set the field orientation. Use: `row` or `column` value |
### Methods
| Name | Description |
| ----------------- | ------------------------------------------------------------------------- |
| focus | Move the focus to the center slot element |
| reset | Reset the current value from the center slot element to its default value |
| checkValidity | Get the validity of the center slot element |
| setCustomValidity | Set a custom validity in the center slot element |
### Slots
| Name | Description |
| ------- | ------------------------------------------------------------------------ |
| label | Element to shows the field label |
| prepend | Element to show things before the center slot, like: icons, buttons, etc |
| center | Element to show the field target, like: inputs, selects, etc |
| append | Element to show things after the center slot, like: icons, buttons, etc |
### Events
| Name | Description |
| ------ | ------------------------------------ |
| change | Dispatched when the field is changed |
## Install
Using npm:
```sh
npm i @singleware/ui-field
```
## License
[MIT © Silas B. Domingos](https://balmante.eti.br)