8. List: Ion-list

1. Basic Style No-linesProperty hides the separator between list items insetattribute to remove the outer border of Ion-list. defaultThe Ion-list is an outer box.

/ *---Sample code----* /<ion-content>   <ion-listNo-lines>    <Ion-item>No-lines</Ion-item>    <Ion-item>No-lines</Ion-item>    <Ion-item>No-lines</Ion-item>  </ion-list>   <ion-list>    <Ion-item>Default</Ion-item>    <Ion-item>Default</Ion-item>    <Ion-item>Default</Ion-item>  </ion-list>   <ion-listinset>    <Ion-item>Inset</Ion-item>    <Ion-item>Inset</Ion-item>    <Ion-item>Inset</Ion-item>  </ion-list> </ion-content>/ *---Sample code----* /

2. Phone Book style

When you want to group the list, use < ion-item-group >  而不是 <ion-list> 。  It  <ion-item-group>  to divide multiple parts. He is like a telephone book.

/ *---Sample code----* /<ion-content>   <Ion-item-group>     <Ion-item-divider Light>A</Ion-item-divider>    <Ion-item>Angola</Ion-item>    <Ion-item>Argentina</Ion-item>     <Ion-item-divider Light>B</Ion-item-divider>    <Ion-item>Beijing</Ion-item>   </Ion-item-group> </ion-content>/ *---Sample code----* /

3, the head of the list

Each list can have a list of headers to display information. He is<ion-list-header>

/ *---Sample code----* /<ion-content>   <ion-list>    <Ion-list-header>Action</Ion-list-header>    <Ion-item>Terminator II</Ion-item>    <Ion-item>The Empire Strikes Back</Ion-item>    <Ion-item>Blade Runner</Ion-item>  </ion-list> </ion-content>/ *---Sample code----* /

4. Icon Ion-item

The location of the icons can be controlled with item-left and item-right .

/ *---Sample code----* /<ion-list>     <Ion-item>    <Ion-iconname= "Leaf"Item-left></Ion-icon>Herbology<Ion-iconname= "Rose"Item-right></Ion-icon>  </Ion-item> </ion-list>/ *---Sample code----* /

5. Thumbnail imageProject thumbnails show that the image occupies the entire height of a project. To use a thumbnail image, add a < ion-thumbnail > Component. Using the project's Item-left、 Item-rightproperty to set the location of the thumbnail:

/ *---Sample code----* /<ion-list>     <Ion-item>    <Ion-thumbnailItem-left>      <imgsrc= "Img/1.jpg">    </Ion-thumbnail>    <H2>My Neighbor Totoro</H2>    <P>Hayao Miyazaki 1988</P>    <ButtonClear Item-right>View</Button>  </Ion-item> </ion-list>/ *---Sample code----* /

6. Avatar

The Ion-avatar is larger than the icon. It is smaller than thumbnail, so it is suitable for avatar. When multiple headings or paragraph marks are added to <ion-item>, the item automatically adjusts its height to fit the new line.

/ *---Sample code----* /<ion-list>   <Ion-item>    <Ion-avatarItem-left>      <imgsrc= "Img/1.jpg">    </Ion-avatar>    <H2>Cher</H2>    <P>Ugh. As if.</P>  </Ion-item> </ion-list>/ *---Sample code----* /

7. Sliding Item ion-item-sliding

The ion-item-sliding contains the entire Ion-item button, which is configured in his subset ion-item-options.

/ *---Sample code----* /<ion-list>     <ion-item-sliding>    <Ion-item>      <Ion-avatarItem-left>        <imgsrc= "Img/1.jpg">      </Ion-avatar>      <H2>Slimer</H2>    </Ion-item>    <ion-item-options>      <ButtonPrimary>        <Ion-iconname= "text"></Ion-icon>Text</Button>      <ButtonSecondary>        <Ion-iconname= "Call"></Ion-icon>Pager</Button>    </ion-item-options>  </ion-item-sliding>   </ion-list>/ *---Sample code----* /

8. List: Ion-list