ionic4ノート（4）UIコンポーネント、色、ボタン、アイコン、等

図1は、内蔵色ionic4.x

一次、二次、三次の成功、警告、危険、暗い媒体光
の色プロジェクトはで見つけることができますのでだけ、など成功と、缶を覚えておく必要があります

色の使用：タブの色、右の追加、I-色を入力し、ドロップダウンのヒントを入力し、あなたが選択することができますカラー

図2に示すように、ボタンアセンブリをionic4.x

1.ionボタンアセンブリは、ボタンを定義することができます

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

I-ボタン入力プロンプト入力するに従って

routerLinkにジャンプページを、/分岐点の背後に塗りつぶし

入力I-バックボタン、戻るボタンが途中で入力、イオンのみ-toolbarタグを入力するように求め、
イオンバックボタン必見イオンボタンで、スロットの位置は、説明開始位置で開始されます

2.color属性は、ボタンの色を定義します

<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

このプロパティは、ボタンの幅を指定することができます。デフォルトでは、ボタンのインラインブロックが、このプロパティは全幅ブロック要素にボタンを変更するように設定されています。

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

レンダリング：

背景の塗りつぶしを設定し4.fill

このプロパティは、ボタンの背景と境界の色を決定します。デフォルトでは、ボタンはボタンが作動している場合を除き、固定のバックグラウンドを持っている
内部のツールバーで、ボタンは透明な背景を持っている場合は、以下のツールバーのデフォルトの上部にあるボタンを押します。

<ion-button fill="outline" expand="block">  </ion-button>

  <ion-button fill="solid"> 
    <icon-icon  slot="icon-only" name="add"></icon-icon>
  </ion-button>
  
  <ion-button fill="clear"> 
    <icon-icon  slot="icon-only" name="add"></icon-icon>
  </ion-button>/
  

クリアボタンは、ボタンと同様のフラットの透明な背景た
輪郭が透明な背景やボタンの可視境界線がある
ボタンで満たされた単色の背景を。ツールバーのボタンをクリックします。

サイズ設定ボタン

<ion-button size="large">
    设置按钮的大小
  </ion-button>
  <ion-button size="small">
    设置按钮的大小
  </ion-button>

小さな小さなボタンの
デフォルトデフォルトボタン
大きな大きなボタン

プラットフォームを使用するスタイル6.mode決めます

<ion-button mode='ios' color="primary">ios平台的按钮</ion-button>
 <ion-button mode='md' color="primary">android平台的按钮</ion-button>

它安装了两套按钮样式，一套是安卓一套是ios，所以可以根据平台自动更改样式

7.按钮结合图标

<ion-button color="primary">
    <ion-icon name="add-circle-outline" slot="start"></ion-icon>
    left icon
  </ion-button>//图标在文字左边
  <ion-button color="primary">
    right icon
    <ion-icon name="add-circle-outline" slot="end"></ion-icon>
  </ion-button>//图标在文字右边
</ion-content>

3、ionic中的图标

ionic中文网组件文档：https://ionicons.com/
name 指定图标的名称：<ion-icon name="arrow-dropright-circle"></ion-icon>
slot 指定图标的位置:

<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-toobar、icon-title、icon-button、icon-back-button

ionic官方文档：https://ionicframework.com/docs/api/toolbar
ion-header 头部 ion-footer 底部 ion-content 内容
ion-toolbar 主要用于头部和底部，固定在页面顶部或者底部。
ion-title 放在 ion-toolbar 里面指定导航的名称
ion-buttons 按钮组，主要用在 ion-toolbar 中，工具栏中的按钮应该放在 ion-buttons 的内部。
ion-back-button 返回按钮，放在 ion-buttons 里面

ion-buttons 里面的属性

secondary	元素在 ios 模式下位于内容左侧，在 md 模式下直接位于内容右侧。
primary	元素在 ios 模式下位于内容右侧，在 md 模式下位于最右侧
start	在 LTR 中位于内容的左侧，在 RTL 中位于内容的右侧。
–	–
end	在 LTR 中位于内容的右侧，在 RTL 中位于内容的左侧

用法

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