ionic4学习笔记7--UI组件1(没实践，直接摘抄)

「爱情、让人受尽委屈。」 2023-02-20 02:11 127阅读 0赞

1、 Ionic4.x 内置颜色

<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 中的按钮  
官方文档： https://ionicframework.com/docs/api/button  
1、 ion-button 组件可以定义一个按钮

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

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"> button </ion-button>
    <ion-button color="primary" expand="full"> button </ion-button>

4、 fill 设置背景填充  
此属性决定按钮的背景和边框颜色。 默认情况下， 按钮有一个固定的背景， 除非按钮位于工  
具栏内部， 如果按钮在工具栏顶部默认情况下面按钮有一个透明的背景。

<table> 
 <tbody> 
  <tr> 
   <td>clear</td> 
   <td>具有类似于扁平按钮的透明背景的按钮。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>outline</td> 
   <td>具有透明背景和可见边框的按钮。</td> 
  </tr> 
  <tr> 
   <td>solid</td> 
   <td>按钮具有填充的背景。用于工具栏中的按钮。</td> 
  </tr> 
 </tbody> 
</table>

<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>
    返回
    </ion-button>

5、 size 设置按钮的大小

<table> 
 <tbody> 
  <tr> 
   <td>small</td> 
   <td>小按钮</td> 
  </tr> 
  <tr> 
   <td>default</td> 
   <td>默认按钮</td> 
  </tr> 
  <tr> 
   <td>large</td> 
   <td>大按钮</td> 
  </tr> 
 </tbody> 
</table>

6、 mode 决定使用哪种平台样式

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

7、 按钮结合图标

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

<table> 
 <tbody> 
  <tr> 
   <td>secondary</td> 
   <td>元素在 ios 模式下位于内容左侧， 在 md 模式下直接位于内容右侧。</td> 
  </tr> 
  <tr> 
   <td>primary</td> 
   <td>元素在 ios 模式下位于内容右侧， 在 md 模式下位于最右侧。</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>在 LTR 中位于内容的左侧， 在 RTL 中位于内容的右侧。</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>在 LTR 中位于内容的右侧， 在 RTL 中位于内容的左侧。</td> 
  </tr> 
 </tbody> 
</table>

用法：

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