List

Design

Code

Example 1

User

Admin

SuperAdmin

  <nile-list>
    <nile-list-item>User</nile-list-item>
    <nile-list-item>Admin</nile-list-item>
    <nile-list-item>SuperAdmin</nile-list-item>
  </nile-list>

Example 2

User

Admin

SuperAdmin


  <nile-list>
    <nile-list-item icon-name="user" icon-size="14">User</nile-list-item>
    <nile-list-item icon-name="user" icon-size="14">Admin</nile-list-item>
    <nile-list-item icon-name="user" icon-size="14">SuperAdmin
    </nile-list-item>
  </nile-list>

Example 3


   <nile-list>
    <nile-list-item heading="I am heading" sub-heading="I am subheading"> </nile-list-item>
    <nile-list-item heading="I am heading" sub-heading="I am subheading"> </nile-list-item>
    <nile-list-item heading="I am heading" sub-heading="I am subheading"> </nile-list-item>
  </nile-list>

Example 4

  <nile-list>
    <nile-list-item heading="I am heading" sub-heading="I am subheading">
      <nile-checkbox slot="suffix"></nile-checkbox> 
    </nile-list-item>
    <nile-list-item heading="I am heading" sub-heading="I am subheading">
      <nile-checkbox slot="suffix"></nile-checkbox> 
    </nile-list-item>
    <nile-list-item heading="I am heading" sub-heading="I am subheading">
      <nile-checkbox slot="suffix"></nile-checkbox> 
    </nile-list-item>
  </nile-list>

Slots

Name	Description
base	slot for the content of the list
preffix	slot before the content of the list
suffix	slot after the content of the list
heading	slot for the heading of the list
subheading	slot for the subheading of the list

dependencies

This component automatically imports the following dependencies.

nile-list-item