Color, icon, margin, and interface components of ionic entry: List, ionic entry

Color, icon, margin, and interface components of ionic entry: List, ionic entry

Directory:

Interface components: List

Color

Ionic defines nine Foreground/background/border color styles ,:

You can use these styles on any element to set foreground and background colors:

<Any class = "positive-bg energized">... </Any>

Icon

Ionic uses the ionicons icon Style Library. Ionicons uses the TrueType font to implement the icon style. Over 500 icons are available.

It is easy to use icons. declare the following two CSS classes on the element:

• . Icon-declare an element as an icon

• . Ion-{icon-name}-declares the specific icon to be used. The I element is usually used to define the icon. For example, the following declares that the ion-home icon is displayed for the element:

  To learn which icons and specific names are available, visit ionics.com. Click an icon to view its CSS class name.

You can insert an icon into any element and use the font-size style of the element to specify the Icon size:

<Any><any class="list"> <any class="item">...</any> <any class="item">...</any> <any class="item">...</any> <any class="item">...</any></any>

Customization of the appearance of the list is mainly focused on the. item element, and the. list element has only a few style definitions:

Member container:. item

The style customization of the list mainly occurs on the. item element. You can insert text, badges, icons, images (portraits, thumbnails, or big charts), buttons, and other style elements into the. item element:

PS: the "badge" in the image should be "badge. Example

. Item: Embedded text

The list members often need to display texts of different specifications, such as the news list of toutiao.com:

The. item element can use h1 ~ H6/p labels insert text of different specifications.

. Item: Embedded icon

Insert icons in the content of list members, which is more vivid than plain text:

To insert an icon, two conditions must be met:

. Item: Embedded Avatar

In many social apps, a fairly Fixed UI mode contains a list of user profile pictures:

In ionic, the Avatar is set to a fixed size of 40x40. Like the insert icon, inserting an avatar into A. item must meet two conditions:

1. Declare the Avatar position on the. item element. The avatar can be located on the left or right side of the list, with. item-avatar-left and. item-avatar-right declared respectively. 2. Use the img label in the. item element to insert the avatar.

. Item: Embedded thumbnail

Return to the toutiao.com News list and add two news images to it:

In ionic, the thumbnail is defined as 80 PX, which is larger than the profile picture and is suitable for news pictures. Like inserting an avatar, inserting a thumbnail into A. item meets two conditions:

Declare the thumbnail position on the. item element. The thumbnail can be located on the left or right side of the list. Use. item-thumbnail-left and. item-thumbnail-right to declare that the img label is used to insert an avatar in the. item element. Note: place the img tag at the beginning of the. item content!

. Item: embed a large image

Large charts are very influential and are common in image apps: