ionic 按钮

收藏979

阅读27907

更新时间2022-04-11

按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。

默认情况下,按钮显示样式为:display: inline-block


  Default



  button-light



  button-stable



  button-positive



  button-calm



  button-balanced



  button-energized



  button-assertive



  button-royal



  button-dark

button-block 样式按钮显示为:display: block,它将完全填充父元素的宽度,包含了内边距属性padding。


  Block Button

使用 button-full 类,可以让按钮显示完全宽度,且不包含内边距padding。


  Full Width Block Button


不同大小的按钮

button-large 设置为大按钮,button-small 设置为小按钮。


  Small Button


  Large Button


无背景按钮

button-outline 设置背景为透明。


  Outlined Button


无背景与边框按钮

button-clear 设置按钮背景为透明,且无边框。


  Clear Button

图标按钮

我们可以在按钮上添加图标。


   Loading...


Home

Favorites

Learn More

Back





Reorder

头部/底部添加按钮

头部/底部可以添加按钮,按钮的样式根据头部/底部来设定,所以你不需要为按钮添加额外的样式。


  
  Header Buttons
  Edit

button-clear 类可以设置无背景和边框的头部/底部按钮。


  
  Header Buttons
  Edit

按钮栏

我们可以使用 button-bar 类来设置按钮栏。以下实例中,我们在头部和内容中添加了按钮栏。

  First
  Second
  Third

ionic 头部与底部

ionic 列表

相关

视频

RELATED VIDEOS

更多

免费

极客学院jQueryMobile视频教程

免费

极客学院Swift语言视频教程

免费

尚学堂Swift入门视频教程

免费

微信小程序--企业微网站

免费

Flutter基础视频教程
中级 Flutter基础视频教程

28784次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

热门下载

更多
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号