Components chevron_right List

GitHub

Basic Usage

3 line item

Phil McKenzie-Padberg

Phil McKenzie-Padberg

Jarred_Leffler@gmail.com

Some longer notes here could be here. But they aren't.
Loren Brown

Loren Brown

Herman_Walter@gmail.com

Some longer notes here could be here. But they aren't.
Vera Windler

Vera Windler

Theodora_Hirthe@yahoo.com

Some longer notes here could be here. But they aren't.

2 line item

Phil McKenzie-Padberg

Phil McKenzie-Padberg

Jarred_Leffler@gmail.com
Loren Brown

Loren Brown

Herman_Walter@gmail.com
Vera Windler

Vera Windler

Theodora_Hirthe@yahoo.com

3 line item, long paragraph

Phil McKenzie-Padberg

Phil McKenzie-Padberg

Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Loren Brown

Loren Brown

Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Vera Windler

Vera Windler

Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Icons

phone

(555) 251-1234

Home
phone

(555) 786-9841

Mobile
phone

(555) 314-1592

Office

Template

<PaperList>
  <PaperSubheader>3 line item</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @class="md-3-line">
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <div class="md-list-item-text">
        <h3>{{item.name}}</h3>
        <h4>{{item.email}}</h4>
        <p>Some longer notes here could be here. But they aren't.</p>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>2 line item</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @class="md-2-line">
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <div class="md-list-item-text">
        <h3>{{item.name}}</h3>
        <p>{{item.email}}</p>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>3 line item, long paragraph</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @class="md-3-line md-long-text">
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <div class="md-list-item-text">
        <h3>{{item.name}}</h3>
        <p>
          Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
          Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
          velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        </p>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>Icons</PaperSubheader>
  {{#each this.phoneNumbers as |phone|}}
    <PaperItem @class="md-2-line">
      {{paper-icon "phone" class="md-avatar-icon"}}
      <div class="md-list-item-text">
        <h3>{{phone.number}}</h3>
        <p>{{phone.type}}</p>
      </div>
    </PaperItem>
  {{/each}}

</PaperList>

List Controls

Single Action Checkboxes

Pepperoni

Sausage

Black Olives

Green Peppers

Secondary Buttons

Clicking the button to the right will fire the secondary action

Click anywhere to fire the primary action, or the button to fire the secondary

Clickable Items with Secondary Controls

network_wifi

Wi-Fi
bluetooth

Bluetooth
data_usage

Data Usage

Checkbox with Secondary Action

Message A

Message B

Message C

Avatar with Secondary Action Icon

Phil McKenzie-Padberg

Phil McKenzie-Padberg
Loren Brown

Loren Brown
Vera Windler

Vera Windler

Clickable Avatars

Phil McKenzie-Padberg

Phil McKenzie-Padberg

Jarred_Leffler@gmail.com

Some notes here.
Loren Brown

Loren Brown

Herman_Walter@gmail.com

Some notes here.
Vera Windler

Vera Windler

Theodora_Hirthe@yahoo.com

Some notes here.

Avatar with Secondary Action Icon

Phil McKenzie-Padberg

Phil McKenzie-Padberg

Jarred_Leffler@gmail.com

Some notes here.
Loren Brown

Loren Brown

Herman_Walter@gmail.com

Some notes here.
Vera Windler

Vera Windler

Theodora_Hirthe@yahoo.com

Some notes here.

Single Action Radios

Pepperoni

Sausage

Black Olives

Green Peppers

Template

<PaperList>

  <PaperSubheader>Single Action Checkboxes</PaperSubheader>
  {{#each this.toppings as |topping|}}
    <PaperItem as |controls|>
      <p>{{topping.name}}</p>
      <div class="md-secondary-container">
        <controls.checkbox @value={{topping.enabled}} @secondary={{true}} @onChange={{action (mut topping.enabled)}} />
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>Secondary Buttons</PaperSubheader>
  <PaperItem as |controls|>
    <p>Clicking the button to the right will fire the secondary action</p>
    <div class="md-secondary-container">
      <controls.button @secondary={{true}} @onClick={{action "transitionTo" "more info"}}>
        More Info
      </controls.button>
    </div>
  </PaperItem>
  <PaperItem @onClick={{action "transitionTo" "primary action"}} as |controls|>
    <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
    <div class="md-secondary-container">
      <controls.button @secondary={{true}} @onClick={{action "transitionTo" "secondary action"}}>
        More Info
      </controls.button>
    </div>
  </PaperItem>

  <PaperDivider />

  <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
  <PaperItem @onClick={{action "transitionToWifiMenu"}} as |controls|>
    {{paper-icon "network-wifi"}}
    <p>Wi-Fi</p>
    <div class="md-secondary-container">
      <controls.switch @secondary={{true}} @value={{this.wifiEnabled}} @onChange={{action (mut this.wifiEnabled)}} />
    </div>
  </PaperItem>
  <PaperItem @onClick={{action "transitionToBluetoothMenu"}} as |controls|>
    {{paper-icon "bluetooth"}}
    <p>Bluetooth</p>
    <div class="md-secondary-container">
      <controls.switch @secondary={{true}} @value={{this.bluetoothEnabled}} @onChange={{action (mut this.bluetoothEnabled)}} />
    </div>
  </PaperItem>
  <PaperItem @onClick={{action "transitionToDataUsage"}}>
    {{paper-icon "data-usage"}}
    <p>Data Usage</p>
  </PaperItem>

  <PaperDivider />

  <PaperSubheader>Checkbox with Secondary Action</PaperSubheader>
  {{#each this.messageData as |item|}}
    <PaperItem as |controls|>
      <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
      <p>{{item.message}}</p>
      <div class="md-secondary-container">
        <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
          {{paper-icon "message"}}
        </controls.button>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @onClick={{action "goToPerson" item}} as |controls|>
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <p>{{item.name}}</p>
      <div class="md-secondary-container">
        <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
        <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
          {{paper-icon "email"}}
        </controls.button>
        <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
          {{paper-icon "message"}}
        </controls.button>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>Clickable Avatars</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}}>
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <div class="md-list-item-text">
        <h3>{{item.name}}</h3>
        <h4>{{item.email}}</h4>
        <p>Some notes here.</p>
      </div>
    </PaperItem>
  {{/each}}

  <PaperDivider />

  <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
  {{#each this.listData as |item|}}
    <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}} as |controls|>
      <img src={{item.img}} alt={{item.name}} class="md-avatar">
      <div class="md-list-item-text">
        <h3>{{item.name}}</h3>
        <h4>{{item.email}}</h4>
        <p>Some notes here.</p>
      </div>
      <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryPersonClick" item}}>
        {{paper-icon "phone"}}
      </controls.button>
    </PaperItem>
  {{/each}}

  <PaperSubheader>Single Action Radios</PaperSubheader>
  {{#each this.toppings as |topping|}}
    <PaperItem as |controls|>
      <p>{{topping.name}}</p>
      <div class="md-secondary-container">
        <controls.radio @groupValue={{this.radioSelectedTopping}} @value={{topping}} @secondary={{true}} @onChange={{action (mut this.radioSelectedTopping)}} />
      </div>
    </PaperItem>
  {{/each}}

</PaperList>