@material/icon-toggle
Advanced tools
@material/icon-toggle - npm Package Compare versions
Comparing version 0.40.0 to 0.40.1
| { | ||
| "name": "@material/icon-toggle", | ||
| "description": "The Material Components for the web icon toggle component", | ||
| "version": "0.40.0", | ||
| "version": "0.40.1", | ||
| "license": "MIT", | ||
@@ -17,7 +17,7 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@material/animation": "^0.39.0", | ||
| "@material/base": "^0.39.0", | ||
| "@material/ripple": "^0.40.0", | ||
| "@material/theme": "^0.40.0" | ||
| "@material/animation": "^0.40.1", | ||
| "@material/base": "^0.40.1", | ||
| "@material/ripple": "^0.40.1", | ||
| "@material/theme": "^0.40.1" | ||
| } | ||
| } |
@@ -45,6 +45,5 @@ <!--docs: | ||
| ## Usage | ||
| ## Basic Usage | ||
| In order to use MDC Icon Toggle, you will need to import an icon set, such as | ||
| [Material Icons](https://design.google.com/icons/) or [Font Awesome](http://fontawesome.io/). | ||
| ### HTML Structure | ||
@@ -60,3 +59,3 @@ ```html | ||
| Then in JS | ||
| Then in JS: | ||
@@ -76,5 +75,20 @@ ```js | ||
| ### Using with Font Awesome and similar libraries | ||
| ### Icon set | ||
| Font Awesome - as well as other popular icon font libraries - use pseudo-elements in order to | ||
| In order to use MDC Icon Toggle, you will need to import an icon set. | ||
| We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts: | ||
| ```html | ||
| <head> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
| </head> | ||
| ``` | ||
| However, you can use any icon set you like! See the [Font Awesome section](#font-awesome) below for details. | ||
| <a id="font-awesome"></a> | ||
| #### Using with Font Awesome and similar libraries | ||
| [Font Awesome](https://fontawesome.com/) and other popular icon font libraries use pseudo-elements in order to | ||
| provide the icon, via the `content` property. However, MDC Web uses pseudo-elements for ripple styles. | ||
@@ -154,3 +168,3 @@ In order to get around this, you can nest the icon itself inside the icon toggle. | ||
| ### MDCIconToggle API | ||
| ### `MDCIconToggle` API | ||
@@ -160,3 +174,3 @@ Similar to regular DOM elements, the `MDCIconToggle` functionality is exposed through accessor | ||
| #### MDCIconToggle.on | ||
| #### `MDCIconToggle.on` | ||
@@ -166,3 +180,3 @@ Boolean. Returns whether or not the icon toggle is currently toggled on. Setting this property | ||
| #### MDCIconToggle.disabled | ||
| #### `MDCIconToggle.disabled` | ||
@@ -206,3 +220,3 @@ Boolean. Returns whether or not the icon toggle is currently disabled. Setting this property will | ||
| ##### MDCIconToggleFoundation.refreshToggleData() => void | ||
| ##### `MDCIconToggleFoundation.refreshToggleData() => void` | ||
@@ -214,7 +228,7 @@ As described above, the `data-toggle-*` attributes are cached so as not to have to perform redundant | ||
| ##### MDCIconToggleFoundation.isOn() => boolean | ||
| ##### `MDCIconToggleFoundation.isOn() => boolean` | ||
| Returns true if the foundation's state is toggled on, false otherwise. | ||
| ##### MDCIconToggleFoundation.toggle(isOn: boolean = !this.isOn()) => void | ||
| ##### `MDCIconToggleFoundation.toggle(isOn: boolean = !this.isOn()) => void` | ||
@@ -225,14 +239,14 @@ Toggles the foundation's state, updating the component via the adapter methods. Defaults to the | ||
| ##### MDCIconToggleFoundation.isDisabled() => boolean | ||
| ##### `MDCIconToggleFoundation.isDisabled() => boolean` | ||
| Returns true if the foundation's state is disabled, false otherwise. | ||
| Returns `true` if the foundation's state is disabled, `false` otherwise. | ||
| ##### MDCIconToggleFoundation.setDisabled(isDisabled: boolean) => void | ||
| ##### `MDCIconToggleFoundation.setDisabled(isDisabled: boolean) => void` | ||
| Enables / disables the foundation's state, updating the component via the adapter methods. | ||
| ##### MDCIconToggleFoundation.isKeyboardActivated() => boolean | ||
| ##### `MDCIconToggleFoundation.isKeyboardActivated() => boolean` | ||
| Returns true if the foundation is currently activated by a keyboard event, false otherwise. | ||
| Useful for MDCRippleFoundation's `isSurfaceActive()` adapter method. | ||
| Returns `true` if the foundation is currently activated by a keyboard event, `false` otherwise. | ||
| Useful for the `MDCRippleFoundation.isSurfaceActive()` adapter method. | ||
@@ -239,0 +253,0 @@ ### Sass Mixins |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
Improved metrics
- Total package byte prevSize
- increased by0.23%
167208
- Number of lines in readme file
- increased by5.96%
249
Dependency changes
- Removed@material/animation@0.39.0(transitive)
- Removed@material/base@0.39.0(transitive)
Updated@material/animation@^0.40.1
Updated@material/base@^0.40.1
Updated@material/ripple@^0.40.1
Updated@material/theme@^0.40.1