Angular ionic 按钮内置基本样式

参考ionic中文网:http://www.ionic.wang/components_doc-index-id-213.html#expand

效果展示:

html代码:

<ion-content>
  <ion-button color="dark"> 通过color属性改变按钮颜色 </ion-button>

  <ion-button expand="full" color="success">expand设置按钮的样式</ion-button>
  <ion-button expand="block" color="success">expand设置按钮的样式</ion-button>

  <ion-button color="primary" fill="outline"> fill设置背景填充 </ion-button>
  <ion-button color="primary" fill="clear"> fill设置背景填充 </ion-button>

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

  <ion-button mode="ios">mode决定使用那种平台的样式</ion-button>
  <ion-button mode="md">mode决定使用那种平台的样式</ion-button>

  <ion-button>
    <ion-icon slot="start" name="barbell-outline"></ion-icon>
    icon在左,文字在右
  </ion-button>
  <ion-button>
    文字在左,icon在右
    <ion-icon slot="end" name="barbell-outline"></ion-icon>
  </ion-button>

</ion-content>

color:

目录:src/theme/variables.scss  中需要的颜色都可以在此文件中查找

expand:

  • full:全宽按钮与方角,没有边框在左或右。
  • block:带圆角的全宽按钮。

fill:

  • clear:类似于扁平按钮的透明背景按钮;
  • outline:具有透明背景和组件边框的按钮;
  • solid:按钮具有填充的背景,用于工具栏中的按钮;

size:设置按钮大小

  • Small:小按钮
  • Default:默认按钮
  • Large:大按钮

Mode:决定使用那种平台的样式

  • Ios:苹果
  • md:安卓

slot:图标所在位置

  • Start:图标在前
  • end:图标在后

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值