Ionic4.x the button

The official document: https://ionicframework.com/docs/api/button

. 1 , Ion-Button assembly may 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 , the expand width setting button

 

This property allows you to specify the width of the button. By default, the button inline block, but this property is set to change 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 the background fill

 

This property determines the background and border color of the button. By default, the buttons have a fixed background, unless the button is located inside the toolbar button in the toolbar at the top if the default button below to have a transparent background.

 

clear

A push button similar to the flat transparent background of the button.

 

outline	Visible buttons with a transparent background and border.
solid	Button has a background fill. A button 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> Back
 </ Ion-Button >

. 5 , size size setting button

small	Small buttons
default	Default button
large	Big Button

6 , the MODE decide which style to use platform

 

< Ion-Button MODE = 'iOS' Color = "Primary" > iOS internet button </ Ion-Button >  
< Ion-Button MODE = 'MD' Color = "Primary" > Android platform button </ Ion-Button >

 

7 , in conjunction with button icons

<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 icons

 

ionic icon official website: https://ionicons.com/

 

<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

The official document: https://ionicframework.com/docs/api/toolbar

 

on-header header, Ion Content- content, Ion-footer bottom ion-toolbar mainly for the head and the bottom, top or bottom of the page is fixed. ion-title on the ion-toolbar which specifies the name of the navigation

ion-buttons button group, mainly used in the ion-toolbar , a toolbar button should be placed in ion-buttons within.

ion-back-button return button on the ion-buttons which

 

ion-buttons inside properties:

secondary	In the element ios content on the left mode, directly to the right of the content md mode.
primary	In the right side of the element ios content mode, at the far right md mode.
start	LTR is located in the left side of the content, the content is located right in the RTL.
end	In the LTR located to the right of the content, the RTL on the left content.

<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>

Example:

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

<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>

<!-- Colors -->
<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="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>

<!-- Round -->
<ion-button shape="round">Round Button</ion-button>

<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

<!-- Icons -->
<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>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>