Link copied!

Action List Examples

<e-actionlist>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist>
  <e-actionlist-group label="General Information">
    <e-actionlist-item value="first-name">
      First Name
    </e-actionlist-item>
    <e-actionlist-item value="last-name" selected>
      Last Name
    </e-actionlist-item>
    <e-actionlist-item value="email">
      Email
    </e-actionlist-item>
  </e-actionlist-group>
  <e-actionlist-group label="Personal Information">
    <e-actionlist-item value="address">
      Address
    </e-actionlist-item>
    <e-actionlist-item value="city">
      City
    </e-actionlist-item>
    <e-actionlist-item value="state">
      State
    </e-actionlist-item>
    <e-actionlist-item value="zip-code" disabled>
      ZIP Code
    </e-actionlist-item>
    <e-actionlist-item value="phone">
      Phone
    </e-actionlist-item>
    <e-actionlist-item value="mobile">
      Mobile
    </e-actionlist-item>
    <e-actionlist-item value="first-name-of-partner">
      First Name of Partner
    </e-actionlist-item>
    <e-actionlist-item value="anniversary">
      Anniversary
    </e-actionlist-item>
    <e-actionlist-item value="fax">
      Fax
    </e-actionlist-item>
    <e-actionlist-item value="date-of-birth">
      Date of Birth
    </e-actionlist-item>
  </e-actionlist-group>
</e-actionlist>
<e-actionlist multiple>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name" selected>
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile" selected>
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist multiple selection-max="3">
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state">
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist height="200px">
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<div style="display: inline-block;">
  <e-actionlist disable-min-width>
    <e-actionlist-item value="1">
      1
    </e-actionlist-item>
    <e-actionlist-item value="2">
      2
    </e-actionlist-item>
    <e-actionlist-item value="3">
      3
    </e-actionlist-item>
    <e-actionlist-item value="4">
      4
    </e-actionlist-item>
    <e-actionlist-item value="5">
      5
    </e-actionlist-item>
  </e-actionlist>
</div>
<e-actionlist always-show-search>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
</e-actionlist>
<e-actionlist search-hidden>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
  <e-actionlist-item value="address">
    Address
  </e-actionlist-item>
  <e-actionlist-item value="city">
    City
  </e-actionlist-item>
  <e-actionlist-item value="state" selected>
    State
  </e-actionlist-item>
  <e-actionlist-item value="zip-code">
    ZIP Code
  </e-actionlist-item>
  <e-actionlist-item value="phone">
    Phone
  </e-actionlist-item>
  <e-actionlist-item value="mobile">
    Mobile
  </e-actionlist-item>
  <e-actionlist-item value="first-name-of-partner">
    First Name of Partner
  </e-actionlist-item>
  <e-actionlist-item value="anniversary">
    Anniversary
  </e-actionlist-item>
  <e-actionlist-item value="fax">
    Fax
  </e-actionlist-item>
  <e-actionlist-item value="date-of-birth">
    Date of Birth
  </e-actionlist-item>
</e-actionlist>
<e-actionlist always-show-search empty-state-text="There are no items in this list"></e-actionlist>
<e-actionlist loading>
  <e-actionlist-item value="first-name">
    First Name
  </e-actionlist-item>
  <e-actionlist-item value="last-name">
    Last Name
  </e-actionlist-item>
  <e-actionlist-item value="email" disabled>
    Email
  </e-actionlist-item>
</e-actionlist>
<e-actionlist selection-disabled>
  <e-actionlist-item>Item 1</e-actionlist-item>
  <e-actionlist-item>Item 2</e-actionlist-item>
  <e-actionlist-item>Item 3</e-actionlist-item>
</e-actionlist>
<e-actionlist id="itemsExample"></e-actionlist>
Copy Javascript
Copied to clipboard! 
document.querySelector('#itemsExample').items = [
  { type: 'item', content: 'Simple item 1', value: 'item1' },
  { type: 'group', label: 'group 1', items: [
    { type: 'item', content: 'Item 1', value: 'group1item1' }
  ] },
  { type: 'group', label: 'group 2', items: [
    { type: 'item', content: 'Item 1', value: 'group2item1' },
    { type: 'item', content: 'Item 2', value: 'group2item1', selected: true }
  ] }
];
<e-actionlist always-show-active>
  <e-actionlist-item>Item 1</e-actionlist-item>
  <e-actionlist-item selected>Item 2</e-actionlist-item>
  <e-actionlist-item>Item 3</e-actionlist-item>
</e-actionlist>