https://github.com/polydile/dile-input
Web Component for a customized input text field, based on LitElement.
https://github.com/polydile/dile-input
Last synced: 11 months ago
JSON representation
Web Component for a customized input text field, based on LitElement.
- Host: GitHub
- URL: https://github.com/polydile/dile-input
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-04-03T12:46:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:27:05.000Z (over 1 year ago)
- Last Synced: 2025-07-06T12:48:52.660Z (12 months ago)
- Language: JavaScript
- Size: 2.48 MB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved!
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# Polydile Input
Input text field Web Component, with customized design. Based on LitElement.
```
```
# Install
```
npm install dile-input
```
## Import the component
### Into your HTML page
```
```
### ...Or into your module script
```
import 'dile-input/dile-input';
```
## Use the component
```
```
### Properties
- name: the name of the input element. This is usefull to distinguish the related element in an input event listener.
- label: the element label
- value: defines the text inside the input element
- placeholder: Defines the texts present in the input element when is empty
- disabled: on true, the element is disabled
- errored: on true, the element is marked as error
- disabeAutocomplete: on true, the input autocomplete HTML featured is disabled
## Run the project
You will need to configure Webpack, or some similar tool, as usual in your frontend workflow. But, if you prefer, simply run the "polymer serve" command from your project folder.
1. Install the Polymer CLI:
```npm i -g polymer-cli```
2. Run the development server and open a browser pointing to its URL:
```polymer serve```
## Styling
Custom property | Description | Default
----------------|-------------|---------
--dile-input-width | Input element width | 100%
--dile-input-border-width | Input element border width | 1px
--dile-input-border-color | Input element border color | #888
--dile-input-border-radius | Input element border radius | 5px
--dile-input-error-border-color | Input element border on errored property = true | #c00
--dile-input-focus-border-color | Input element border on focus | #6af
--dile-input-disabled-border-color | Input element border when disabled | #eee
--dile-input-font-size | Input element font size | 1em
--dile-input-line-height | Input element line height | 1.5em
--dile-input-label-font-size | Font size for the label | 1em
--dile-input-label-color | Color for the label text | #59e
--dile-input-label-font-weight | Label text font weight | normal
--dile-input-label-margin-bottom | Label marging bottom | 4px
--dile-input-background-color | Color for the background input element | #fff
--dile-input-padding | Padding for the input text | 5px
## Events
### input
This element acts as an native input element. So, you can listen the native `input` event.
```
inputField.addEventListener('input', (e) => {
console.log('input event named ', e.target.name, ' has value: ', e.target.value);
});
```
### enter-pressed
The `enter-pressed` event is dispatched when the user press enter on it.
```
inputField.addEventListener('enter-pressed', (e) => {
console.log('enter-pressed event, value: ', e.target.value);
});
```