@material/auto-init
Advanced tools
@material/auto-init - npm Package Compare versions
Comparing version 0.24.0 to 0.25.0
| { | ||
| "name": "@material/auto-init", | ||
| "description": "Declarative, easy-to-use auto-initialization for Material Components for the web", | ||
| "version": "0.24.0", | ||
| "version": "0.25.0", | ||
| "main": "index.js", | ||
@@ -6,0 +6,0 @@ "license": "Apache-2.0", |
@@ -33,6 +33,6 @@ <!--docs: | ||
| ```html | ||
| <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> | ||
| <input class="mdc-textfield__input" type="text" id="input"> | ||
| <label for="input" class="mdc-textfield__label">Input Label</label> | ||
| <div class="mdc-textfield__bottom-line"></div> | ||
| <div class="mdc-text-field" data-mdc-auto-init="MDCTextField"> | ||
| <input class="mdc-text-field__input" type="text" id="input"> | ||
| <label for="input" class="mdc-text-field__label">Input Label</label> | ||
| <div class="mdc-text-field__bottom-line"></div> | ||
| </div> | ||
@@ -46,3 +46,3 @@ | ||
| This will attach an [MDCTextfield](../mdc-textfield) instance to the root `<div>` element. | ||
| This will attach an [MDCTextField](../mdc-textfield) instance to the root `<div>` element. | ||
@@ -55,14 +55,14 @@ #### Accessing the component instance | ||
| ```html | ||
| <div class="mdc-textfield" data-mdc-auto-init="MDCTextfield"> | ||
| <input class="mdc-textfield__input" type="text" id="input"> | ||
| <label for="input" class="mdc-textfield__label">Input Label</label> | ||
| <div class="mdc-textfield__bottom-line"></div> | ||
| <div class="mdc-text-field" data-mdc-auto-init="MDCTextField"> | ||
| <input class="mdc-text-field__input" type="text" id="input"> | ||
| <label for="input" class="mdc-text-field__label">Input Label</label> | ||
| <div class="mdc-text-field__bottom-line"></div> | ||
| </div> | ||
| ``` | ||
| Once `mdc.autoInit()` is called, you can access the component instance via an `MDCTextfield` | ||
| Once `mdc.autoInit()` is called, you can access the component instance via an `MDCTextField` | ||
| property on that element. | ||
| ```js | ||
| document.querySelector('.mdc-textfield').MDCTextfield.disabled = true; | ||
| document.querySelector('.mdc-text-field').MDCTextField.disabled = true; | ||
| ``` | ||
@@ -80,9 +80,9 @@ | ||
| import mdcAutoInit from '@material/auto-init'; | ||
| import {MDCTextfield} from '@material/textfield'; | ||
| import {MDCTextField} from '@material/textfield'; | ||
| mdcAutoInit.register('MDCTextfield', MDCTextfield); | ||
| mdcAutoInit.register('MDCTextField', MDCTextField); | ||
| ``` | ||
| `mdcAutoInit.register()` tells `mdc-auto-init` that when it comes across an element with a | ||
| `data-mdc-auto-init` attribute set to `"MDCTextfield"`, it should initialize an `MDCTextfield` | ||
| `data-mdc-auto-init` attribute set to `"MDCTextField"`, it should initialize an `MDCTextField` | ||
| instance on that element. The `material-components-web` package does this for all components for | ||
@@ -95,9 +95,9 @@ convenience. | ||
| import mdcAutoInit from '@material/auto-init'; | ||
| import {MDCTextfield} from '@material/textfield'; | ||
| import {MDCTextField} from '@material/textfield'; | ||
| mdcAutoInit.register('My amazing text field!!!', MDCTextfield); | ||
| mdcAutoInit.register('My amazing text field!!!', MDCTextField); | ||
| ``` | ||
| ```html | ||
| <div class="mdc-textfield" data-mdc-auto-init="My amazing text field!!!"> | ||
| <div class="mdc-text-field" data-mdc-auto-init="My amazing text field!!!"> | ||
| <!-- ... --> | ||
@@ -114,3 +114,3 @@ </div> | ||
| ```js | ||
| mdcAutoInit.deregister('MDCTextfield'); | ||
| mdcAutoInit.deregister('MDCTextField'); | ||
| ``` | ||
@@ -117,0 +117,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.05%
18241
- Number of medium supply chain risk alerts
- decreased by-100%
0