0.0.9 • Published 4 years ago
@fredxd/passwordtoggle v0.0.9
Custom element - Password Toggle
Attach toogle password behavior with this custom element.
Installation
With npm
npm i @fredxd/passwordtoggleOr yarn
yarn add @fredxd/passwordtoggleUsage
To attach toggle behavior to input, add is="toggle-password" to your password input
<input type="password" is="toggle-password" />Attributes
You can pass some parameters via data attributes
| Attribute | Type | Description |
|---|---|---|
data-show-text | string | Text rendered in input to show password |
data-hide-text | string | Text rendered in input to hide password |
data-display-icon | string or bool | You can display icon instead of text |
data-icon-show | string | Path of your "show" icon (local path or url) |
data-icon-hide | string | Path of your "hide" icon (local path or url) |
Styles
Input is encapsulate in shadow dom container. You can override some css var in order to apply your style.
You can change css variable for .toggle-password-container
| Css var | Type | Default value | Description |
|---|---|---|---|
--toggle-password-background-color | color | transparent | Change color of background for toggle element |
--toggle-password-color | color | #000 | Change color of text or icon |
--toggle-password-width | unit | 40px | Set width of toggle element |
--toggle-password-padding | unit | 5px | Set horizontal padding of toggle element |
--toggle-password-icon-width | unit | 24px | Height of toggle icon |
--toggle-password-icon-height | unit | 24px | Width of toggle icon |
--toggle-password-focused-color | color | #000 | Change color of text or icon when input is focused |
--toggle-password-disabled-color | color | #000 | Change color of text or icon when input is disabled |
--toggle-password-invalid-color | color | #000 | Change color of text or icon when input has class "is-invalid" |
--toggle-password-filled-color | color | #000 | Change color of text or icon when input is filled |