@dile/dile-checkbox
Advanced tools
@dile/dile-checkbox - npm Package Compare versions
Comparing version 3.0.0 to 3.0.2
| { | ||
| "name": "@dile/dile-checkbox", | ||
| "version": "3.0.0", | ||
| "version": "3.0.2", | ||
| "description": "Webcomponent dile-checkbox to create a custom-styled checkbox element following open-wc recommendations", | ||
@@ -32,6 +32,6 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@dile/dile-form-mixin": "^1.0.0", | ||
| "@dile/dile-form-mixin": "^1.0.2", | ||
| "lit": "^2.2.1" | ||
| }, | ||
| "gitHead": "d16d2269b51ad7eac884dad1ddb7806dac173da5" | ||
| "gitHead": "b404cf91b5ed5788d9ec6c1560299569accb7cce" | ||
| } |
@@ -5,64 +5,5 @@ # @dile/dile-checkbox | ||
| ## Installation | ||
| ```bash | ||
| npm i @dile/dile-checkbox | ||
| ``` | ||
| ## Docs and demos | ||
| ## Usage | ||
| ```html | ||
| <script type="module"> | ||
| import '@dile/dile-checkbox/dile-checkbox.js'; | ||
| </script> | ||
| <dile-checkbox>Label for the checkbox element</dile-checkbox> | ||
| ``` | ||
| ### Properties | ||
| - **checked**: Boolean, defines the checkbox state. | ||
| - **disabled**: Boolean, mark checkbox as disabled. | ||
| - **name**: The name of the checkbox, only for identification purposes | ||
| There is a special ```value``` property. This is not a actual component property but it mirrors the ```checked``` property, because sometimes forms colud use this property instead of checked to query or change its state. | ||
| ### Custom events | ||
| - **dile-checkbox-changed**: Every time the checkbox changes emits a dile-checkbox-changed event. The checkbox current state is received in the handler usign the event object "detail" property. | ||
| when fired, the custom event sends a detail object, containing the checked state of the element and the value of the name property. | ||
| - **element-changed**: this event is dispatched when the cheked property changes. The event detail emmit the ```name```, ```checked``` and ```value``` property. | ||
| ### CSS Custom Properties | ||
| You can customize it using CSS Custom Properties. | ||
| Custom property | Description | Default | ||
| ----------------|-------------|--------- | ||
| --dile-checkbox-checked-color | Checked color for check control | #30a030 | ||
| --dile-checkbox-unchecked-color | Unchecked color for check control | #ccc | ||
| --dile-checkbox-fill-color | Fill color for the check control | #fff | ||
| --dile-checkbox-unchecked-fill-color | Checked color for check control when is in unchecked status| #fff | ||
| --dile-checkbox-label-color | label regular color | #303030 | ||
| --dile-checkbox-label-disabled-color | Label color for disabled status | #303030 | ||
| --dile-checkbox-font-weight | Font weight for te label | normal | ||
| --dile-checkbox-size | Checkbox size | 20px | ||
| #### Customization example | ||
| ``` | ||
| <style> | ||
| .customized { | ||
| --dile-checkbox-checked-color: #006; | ||
| --dile-checkbox-unchecked-color: #f66; | ||
| --dile-checkbox-fill-color: #fcc; | ||
| --dile-checkbox-unchecked-fill-color: #666; | ||
| --dile-checkbox-label-color: #c57; | ||
| --dile-checkbox-font-weight: bold; | ||
| --dile-checkbox-label-disabled-color: #ddd; | ||
| } | ||
| </style> | ||
| <dile-checkbox checked class="customized">Mark as urgent</dile-checkbox> | ||
| ``` | ||
| - [GitHub readme docs](https://github.com/Polydile/dile-components/blob/master/site/pages/components/dile-checkbox.rocket.md) | ||
| - [Docs and demos on the dile-components site](https://dile-components.polydile.com/components/dile-checkbox/) |
No alert changes
Worsened metrics
- Total package byte prevSize
6293
-24.55%- Number of lines in readme file
8
-88.24%Dependency changes
Updated
@dile/dile-form-mixin@^1.0.2