@material/list - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "license": "Apache-2.0",
@@ -11,6 +11,7 @@ "repository": {
   "dependencies": {
-    "@material/rtl": "^0.1.0",
-    "@material/typography": "^0.1.0",
-    "@material/theme": "^0.1.0"
+    "@material/rtl": "^0.1.1",
+    "@material/typography": "^0.1.1",
+    "@material/ripple": "^0.1.2",
+    "@material/theme": "^0.1.1"
   }
 }

README.md

@@ -20,7 +20,7 @@ # MDC List
 ```html
-<div class="mdc-list">
+<ul class="mdc-list">
   <li class="mdc-list-item">Single-line item</li>
   <li class="mdc-list-item">Single-line item</li>
   <li class="mdc-list-item">Single-line item</li>
-</div>
+</ul>
 ```
@@ -178,3 +178,34 @@
 
+### Using ink ripples for interactive lists
 
+MDC List supports adding ripples to `mdc-list-item` elements, for example in the case of a nav menu.
+To add ripples to lists, simply attach a ripple to all list items. Note that this can be easily done
+via `mdc-auto-init` when using the [material-components-web](../packages/material-components-web).
+
+```html
+<nav class="mdc-list">
+  <a href="/wifi" class="mdc-list-item" data-mdc-auto-init="MDCRipple">
+    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
+      network_wifi
+    </i>
+    Wi-Fi
+  </a>
+  <a href="/bluetooth" class="mdc-list-item" data-mdc-auto-init="MDCRipple">
+    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
+      bluetooth
+    </i>
+    Bluetooth
+  </a>
+  <a href="/data-usage" class="mdc-list-item" data-mdc-auto-init="MDCRipple">
+    <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">
+      data_usage
+    </i>
+    Data Usage
+  </a>
+</nav>
+<script>
+  mdc.autoInit();
+</script>
+```
+
 ### List Dividers
@@ -181,0 +212,0 @@

New alerts

License Policy Violation

License

This 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

License

This 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

68187

increased by67.25%

Lines of code

889

increased by52.49%

Number of lines in readme file

360

increased by9.42%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@material/ripple@^0.1.2

• + Added@material/animation@0.1.5(transitive)

• + Added@material/base@0.1.3(transitive)

• + Added@material/ripple@0.1.2(transitive)

• Updated@material/rtl@^0.1.1

• Updated@material/theme@^0.1.1

• Updated@material/typography@^0.1.1