Ionic Introduction to colors, icons, margins and interface components: List

Reprint statement, this article from the HTTP://CNODEJS.ORG/TOPIC/551B516C33E515E67640631E directory:

1. colors, icons, and margins
   1. Color
   2. Icon
   3. Inner margin
2. Interface components: List
   1. Lists:. List
   2. Member container:. Item
   3. . Item: Embedded text
   4. . Item: Embed icon
   5. . Item: Embedded avatar
   6. . Item: Embedding thumbnails
   7. . Item: Embedding large image

Color

Ionic defines nine foreground/background/Border color styles:

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

<any class= "POSITIVE-BG energized" > ... </any> # # # icon Ionic use the Ionicons icon Style Gallery. Ionicons uses a TrueType font to implement the icon style, with over 500 icons to choose from.

Using icons is simple, declaring the following two CSS classes on an element:

• . Icon-Declare an element as an icon

• . Ion-{icon-name}-declares that the specific icon to use usually uses the I element to define the icon, for example, the following declares the element display Ion-home icon:

  To see which icons and specific names are available, you need to access ionics.com. Click an icon to view its CSS class name.

You can insert an icon in any element, using the font-size style of the element to specify the size of the icon:

<any style= "font-size:100px;" > </any> # # # Inner margin ionic defines commonly used padding styles:

The style name is straightforward and the margins are uniformly 10px. You can apply these styles on any element.

Lists:. List

The list is ideal for displaying information on your phone's screen. Use the. List Definition list container to define list members using. Item:

<any Class="List"><any Class= "item" > ... </any><any  Class= "item" > ... </any><any  Class= "item" > ... </any><any  Class= "item" > ... </any></ANY>        

The customization of the list's appearance is focused on the. Item element, with only a few style definitions for the. List element:

Member container:. Item

The style customization of a list occurs primarily on the. Item element. Within the. Item element, you can insert elements of various styles, such as text, badges, icons, images (avatar, thumbnail, or Large), buttons, and so on:

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

. Item: Embedded text

The list members often need to display different specifications of the text, such as today's Headline News list:

The. Item element can use H1~H6/P tags to insert text of different specifications.

. Item: Embed icon

Inserting icons in the contents of a list member is more vivid than simple text:

To insert an icon, you need to meet two conditions:

1. Declares the icon position on the. Item element. The icon can be on the left or right side of the list, using the. Item-icon-left and. Item-icon-right declarations
2. Inserts an icon inside the. Item element.

. Item: Embedded avatar

In many social apps, a fairly fixed UI pattern is a list of information that contains the user's avatar:

In Ionic, the avatar is set to 40x40 fixed size. Like the Insert icon, inserting an avatar into the. Item requires two conditions:

1. Declare the avatar position on the. Item element. The avatar can be on the left or right side of the list, respectively, using the. Item-avatar-left and. Item-avatar-right declarations 2. Insert the avatar using an IMG tag within the. Item element.

. Item: Embedding thumbnails

Back to today's headline News list, we'll add two news images to it:

In ionic, thumbnails are defined as 80px sizes, larger than avatars, and suitable for news images. Like inserting an avatar, inserting a thumbnail into the. Item requires two conditions:

Declares the thumbnail position on the. Item element. Thumbnails can be located on the left or right side of the list, using the. Item-thumbnail-left and. Item-thumbnail-right declarations to insert the avatar with an IMG tag within the. Item element. NOTE: Place the IMG tag at the beginning of the. Item content!

. Item: Embedding large image

The big picture is very powerful, and it's common in the Picture class app:

Ionic Introduction to colors, icons, margins and interface components: List