Ionic4 learning notes 7 -- UI component 1 (no practice, direct excerpt)

1、 Ionic4.x Built in color

<ion-button color="primary"> primary </ion-button>
<ion-button color="secondary"> secondary </ion-button>

primary secondary tertiary success warning danger dark medium light
2、 Ionic4.x Button in
Official documents ： https://ionicframework.com/docs/api/button
1、 ion-button Components can define a button

<ion-button>Default</ion-button>

2、 color Attribute defines the color of the button

<ion-button color="primary"> primary </ion-button>
<ion-button color="secondary"> secondary </ion-button>
<ion-button color="tertiary"> tertiary </ion-button>
<ion-button color="success"> success </ion-button>
<ion-button color="warning"> warning </ion-button>
<ion-button color="danger"> danger </ion-button>
<ion-button color="dark"> dark </ion-button>
<ion-button color="medium"> medium </ion-button>
<ion-button color="light"> light </ion-button>

3、 expand Set the width of the button
This attribute allows you to specify the width of the button . By default , Buttons are inline blocks , But setting this property changes the button to
Full width block elements .

<ion-button color="primary" expand="block"> button </ion-button>
<ion-button color="primary" expand="full"> button </ion-button>

4、 fill Set background fill
This attribute determines the background and border color of the button . By default , The button has a fixed background , Unless the button is located at
Inside the column , If the button is at the top of the toolbar, the button has a transparent background by default .

clear

A button with a transparent background similar to a flat button .

outline	Button with transparent background and visible border .
solid	The button has a filled background . Used for buttons in the toolbar .

<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button fill="clear" color="success">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>
<ion-button fill="solid" (click)="goBack()">
<ion-icon name="ios-arrow-back" slot="start"></ion-icon>
 return 
</ion-button>

5、 size Set the size of the button

small	Small button
default	Default button
large	Big buttons

6、 mode Decide which platform style to use

<ion-button mode='ios' color="primary"> ios  Platform buttons  </ion-button>
<ion-button mode='md' color="primary">android  Platform buttons  </ion-button>

7、 Button combined with icon

<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>

3、 ionic The icon in
ionic Icon official website ： https://ionicons.com/
name Specify the name of the icon ：

<ion-icon name="arrow-dropright-circle"></ion-icon>

slot Specify the location of the icon :

<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button fill="clear" color="success">
<ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>

4、 ion-header 、 ion-footer、 ion-content、
ion-toolbar 、 ion-title 、 ion-buttons 、
ion-back-button
Official documents ： https://ionicframework.com/docs/api/toolbar
ion-header Head , ion-content Content , ion-footer Bottom
ion-toolbar Mainly used for head and bottom , Fixed at the top or bottom of the page .
ion-title Put it in ion-toolbar It specifies the name of the navigation
ion-buttons Button group , Mainly used in ion-toolbar in , The buttons in the toolbar should be placed in ion-buttons Within the
Ministry .
ion-back-button Return button , Put it in ion-buttons Inside
ion-buttons The properties inside ：

secondary	The elements are in ios In mode, it is on the left side of the content , stay md In mode, it is directly on the right side of the content .
primary	The elements are in ios In mode, it is on the right side of the content , stay md In mode, it is located on the far right .
start	stay LTR Middle is on the left side of the content , stay RTL Middle is on the right side of the content .
end	stay LTR Middle is on the right side of the content , stay RTL Middle is on the left side of the content .

usage ：

<ion-toolbar>
<ion-title>Title Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>Back Button</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Default Buttons</ion-title>
<ion-buttons slot="primary">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>