diff --git a/demos/dialog.html b/demos/dialog.html index 9d707358fe3..ecea24e5305 100644 --- a/demos/dialog.html +++ b/demos/dialog.html @@ -149,17 +149,61 @@

- - -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • - - -
    -

    Avatar List

    - -
    -
    -

    Avatar List (dense)

    - -
    -
    -

    Example - Avatar with Text

    - -
    -
    -

    Metadata

    - -
    -
    -

    Metadata (Dense)

    - -
    -
    -

    Trailing Checkbox

    - +
    +
    +

    Avatar List

    + +
    +
    +

    Avatar List (dense)

    + +
    +
    +

    Example - Avatar with Text

    + +
    +
    +

    Metadata

    + +
    +
    +

    Metadata (Dense)

    + +
    +
    +

    Trailing Checkbox

    + -
    -
    -

    Avatar + Metadata

    - -
    -
    -

    Avatar + Metadata (Dense)

    - -
    -
    -

    Example - Avatar with Text and Icon

    - -
    - -
    -

    Two-Line List

    -
    -

    Text-Only

    - -
    -
    -

    Text-Only (Dense)

    - -
    -
    -

    Graphic

    - -
    -
    -

    Graphic (Dense)

    - -
    -
    -

    Avatar List

    - -
    -
    -

    Avatar List (dense)

    - -
    -
    -

    Metadata

    - -
    -
    -

    Metadata (Dense)

    - -
    -
    -

    Example - Two-line Avatar + Text + Icon

    - -
    -
    -

    Lists w/ Ellipsis

    - -
    -
    -
    -

    List Dividers

    -
    -

    Full-Width Dividers

    - -
    -
    -

    Inset Dividers

    - -
    -
    -
    -

    List Groups

    -
    -

    Basic Usage

    -
    -

    List 1

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -

    List 2

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -
    -
    -

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    -
    -

    Folders

    -
      -
    • - - - - - Photos - Jan 9, 2014 - - - info - -
      • -
    • - - - - - Recipes - Jan 17, 2014 - - - info - -
      • -
    • - - - - - Work - Jan 28, 2014 - - - info - -
      • -
    -
    -

    Files

    -
      -
    • - - - - - Vacation Itinerary - Jan 10, 2014 - - - info - -
      • -
    • - - - - - Kitchen Remodel - Jan 20, 2014 - - - info - -
      • -
    -
    -
    -
    -
    -

    Interactive Lists (with ink ripple)

    -
    -

    Example - Interactive List

    -
    +
    +

    Avatar + Metadata

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Avatar + Metadata (Dense)

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Example - Avatar with Text and Icon

    +     +
    +
    +
    +

    Two-Line List

    +
    +

    Text-Only

    + +
    +
    +

    Text-Only (Dense)

    + +
    +
    +

    Graphic

    + +
    +
    +

    Graphic (Dense)

    + +
    +
    +

    Avatar List

    + +
    +
    +

    Avatar List (dense)

    + +
    +
    +

    Metadata

    + +
    +
    +

    Metadata (Dense)

    + +
    +
    +

    Example - Two-line Avatar + Text + Icon

    + +
    +
    +

    Lists w/ Ellipsis

    + +
    +
    +
    +

    List Dividers

    +
    +

    Full-Width Dividers

    + +
    +
    +

    Inset Dividers

    + +
    +
    +
    +

    List Groups

    +
    +

    Basic Usage

    +
    +

    List 1

    +
      +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    +
    +

    List 2

    +
      +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    • + + Single-line item + +
      • +
    +
    +
    +
    +

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    +
    +

    Folders

    +
    -
    - - - - - + - + }; + + [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) { + var list = mdc.list.MDCList.attachTo(ele); + list.wrapFocus = true; + }); + + addRippleToListItems(document.getElementById('leading-checkbox-list')); + addRippleToListItems(document.getElementById('trailing-checkbox-list')); + }); + + diff --git a/demos/menu-surface.html b/demos/menu-surface.html index 6dc317f1b82..b83bd904086 100644 --- a/demos/menu-surface.html +++ b/demos/menu-surface.html @@ -50,12 +50,33 @@
    diff --git a/demos/menu.html b/demos/menu.html index 136ec647606..3cf6fd1a118 100644 --- a/demos/menu.html +++ b/demos/menu.html @@ -50,11 +50,31 @@
    @@ -78,7 +98,9 @@ - Single + + Single + - - + + - + @@ -133,7 +173,9 @@ - Cut + + Cut + ⌘X @@ -166,13 +214,19 @@
    @@ -260,7 +320,9 @@ - Cut + + Cut + ⌘X diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md index b12c7df946d..3ecc9cd9552 100644 --- a/packages/mdc-dialog/README.md +++ b/packages/mdc-dialog/README.md @@ -92,17 +92,61 @@ a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.