ionic button 实用笔记
2016-03-07 14:53
393 查看
源码文件:_button.scss 和 _button-bar.scss,以及_variables.scss(66行-163行)。按钮是手机app不可或缺的一部分,不同风格的app,需要的按钮多种多样,按钮的设置涉及按钮的大小、颜色、状态等。下面将对ionic的按钮样式做一一笔记。
ionic button样式
ionic默认提供9种颜色风格:$light: #fff !default; $stable: #f8f8f8 !default; $positive: #4a87ee !default; $calm: #43cee6 !default; $balanced: #66cc33 !default; $energized: #f0b840 !default; $assertive: #ef4e3a !default; $royal: #8a6de9 !default; $dark: #444 !default;使用如下所示:
<button class="button"> Default </button> <button class="button button-light"> button-light </button> <button class="button button-stable"> button-stable </button> <button class="button button-positive"> button-positive </button> <button class="button button-calm"> button-calm </button> <button class="button button-balanced"> button-balanced </button> <button class="button button-energized"> button-energized </button> <button class="button button-assertive"> button-assertive </button> <button class="button button-royal"> button-royal </button> <button class="button button-dark"> button-dark </button>按钮风格首先定义了基础的.button,以及根据不同的颜色风格,定义不同ative行为特效。.button基础样式部分代码如下:
// _button.scss 第7行 - 30行 .button { // set the color defaults @include button-style($button-default-bg, $button-default-border, $button- default-active-bg, $button-default-active-border, $button-default-text); position: relative; display: inline-block; margin: 0; padding: 0 $button-padding; min-width: ($button-padding * 3) + $button-font-size; min-height: $button-height + 5px; border-width: $button-border-width; border-style: solid; border-radius: $button-border-radius; vertical-align: top; text-align: center; text-overflow: ellipsis; font-size: $button-font-size; line-height: $button-height - $button-border-width + 1px; cursor: pointer;另外,根据不同的颜色样式的active的效果也不一样,如positive颜色样式的active效果如下:
$button-positive-bg: $positive !default; $button-positive-text: #fff !default; $button-positive-border: darken($positive, 15%) !default; $button-positive-active-bg: darken($positive, 15%) !default; $button-positive-active-border: darken($positive, 15%) !default;字体颜色为白色(#fff),边框颜色加深15%;当按钮按下时,背景颜色加深15%。其它颜色样式的active效果类似。
Block Buttons & Full Width Block Buttons
通常按钮的宽度是由text长度+左右padding值决定的,所以很难满足100%宽度的填充父容器。然而,ionic提供了block级的button样式(Block Buttons & Full Width Block Buttons)。这两类Buttons的代码如下:.button-block { display: block; clear: both; &:after { clear: both; } } .button-full, .button-full > .button { display: block; margin-right: 0; margin-left: 0; border-right-width: 0; border-left-width: 0; border-radius: 0; } button.button-block, button.button-full, .button-full > button.button, input.button.button-block { width: 100%; }示例如下:
<button class="button button-block button-positive"> Block Button </button> <button class="button button-full button-positive"> Full Width Block Button </button>从上面可以看出,这两者的相同点在于display: block,而Full Width Block Buttons删除左右边框和边框半径(border-radius);Block Buttons保留着padding,让元素间有点呼吸空隙,而Full Width Bloc Buttons不包含padding值。
button大小
除了正常大小之外,ionic提供两种不同的Sizes: button-large、button-small.button-small {padding: 2px $button-small-padding 1px;min-width: $button-small-height;min-height: $button-small-height + 2;font-size: $button-small-font-size;line-height: $button-small-height - $button-border-width - 1;.icon:before,&.icon:before,&.icon-left:before,&.icon-right:before {font-size: $button-small-icon-size;line-height: $button-small-icon-size + 3;margin-top: 3px;}}.button-large {padding: 0 $button-large-padding;min-width: ($button-large-padding * 3) + $button-large-font-size;min-height: $button-large-height + 5;font-size: $button-large-font-size;line-height: $button-large-height - $button-border-width;.icon:before,&.icon:before,&.icon-left:before,&.icon-right:before {padding-bottom: ($button-border-width * 2);font-size: $button-large-icon-size;line-height: $button-large-height - ($button-border-width * 2) - 1;}}示例代码:
<button class="button button-small button-assertive">Small Button</button><button class="button">Default Button</button><button class="button button-large button-positive">Large Button</button><button class="button button-block button-small button-assertive">Small Button</button><button class="button button-block">Default Button</button><button class="button button-block button-large button-positive">Large Button</button>两者主要的区别在于:padding、min-width、min-height、font-size 和 line-height。
Outlined Button & Clear Button
这两种button,都是无背景、字体颜色为button样式颜色,其中clear button是无边框的,源代码如下:button-clear {@include button-clear($button-default-border);@include transition(opacity .s);padding: 0 $button-clear-padding;max-height: $button-height;border-color: transparent;background: none;box-shadow: none;&.active,&.activated {opacity: 0.3;}}.button-outline {@include button-outline($button-default-border);@include transition(opacity .s);background: none;box-shadow: none;}示例代码:
<button class="button button-outline button-positive">Outlined Button</button><button class="button button-clear button-positive">Clear Button</button>
Icon Buttons
一个按钮只有冷冷的文字显得没有生气,这时添加个icon,会使app的效果更上一个台阶。其中你可以使用ionic提供的Ionicons,或者其它类型的icon。同时,虽然我们能够在button中添加icon子元素,但这样做会增加DOM元素,增加DOM载入负担,所以ionic提供了Icon Buttons样式。使用示例:<button class="button"><i class="icon ion-loading-c"></i> Loading...</button><button class="button icon-left ion-home">Home</button><button class="button icon-left ion-star button-positive">Favorites</button><a class="button icon-right ion-chevron-right button-calm">Learn More</a><a class="button icon-left ion-chevron-left button-clear button-dark">Back</a><button class="button icon ion-gear-a"></button><a class="button button-icon icon ion-settings"></a><a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>效果图:不错吧,不仅可以只显示icon,也可以icon+text;不仅可以左边显示,可以右边显示icon。
header、footer下button的使用
button可以使用在app的各个空间中,如在header中使用,在app头部左右各增加一个button,代码如下:<div class="bar bar-header"><button class="button icon ion-navicon"></button><h1 class="title">Header Buttons</h1><button class="button">Edit</button></div>其中,以上的button样式基本都可以应用其中。
a button
此外,ionic提供了链接a的button效果,源代码:a.button {text-decoration: none;}
Button Bar
ionic提供了类似Bootstrap按钮组.btn-group效果,源代码如下:/*** Button Bar* --------------------------------------------------*/.button-bar {@include display-flex();@include flex(1);width: 100%;&.button-baf538r-inline {display: block;width: auto;@include clearfix();> .button {width: auto;display: inline-block;float: left;}}}.button-bar > .button {@include flex(1);display: block;overflow: hidden;padding: 0 16px;width: 0;border-width: 1px 0px 1px 1px;border-radius: 0;text-align: center;text-overflow: ellipsis;white-space: nowrap;&:before,.icon:before {line-height: 44px;}&:first-child {border-radius: 2px 0px 0px 2px;}&:last-child {border-right-width: 1px;border-radius: 0px 2px 2px 0px;}}示例代码:
<div class="button-bar"><a class="button">First</a><a class="button">Second</a><a class="button">Third</a></div>其中按钮组是一个block组件,100%宽度;排除第一个和最后一个按钮,其它按钮都取消圆角设置;第一个按钮的左上角和左下角保留圆角设置;最后一个按钮保留右上角和右下角圆角设置。除了最后一个按钮之外,其它的border-width: 1px 0px 1px 1px;;最后一个按钮再补上最右边的边框: border-right-width: 1px;
相关文章推荐
- Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
- Ionic框架入门(原文翻译)
- Ionic学习笔记
- Ionic常用命令行解释
- 图片懒加载imglazyload之ioniclazyload的使用和介绍
- 图片懒加载imglazylod之jquery.lazy.load.js的使用说明介绍及在移动端的兼容
- angularJs异步的问题及解决方案
- ngCordova插件之InAppBrowser插件的使用
- 将原生安卓项目封装为cordova插件实例分析
- ionic通讯录点击滑动效果的实现以及$ionicscrolldelegate使用分析
- 自定义popup写法以及点击backdrop隐藏popup的directive写法
- ng-include用法分析以及多标签页面的简单实现方式
- IONIC框架使用ping++支付
- $locationChangeStart ,$locationChangeSuccess,$routeChangeStart,$routeChangeSuccess如何使用
- 是时候开始学习 Ionic了
- ionic 隐藏ion-tabs 并解决延迟问题 (tabs)
- ionic---手机移动Webapp框架,环境配置
- win10下为ionic搭载开发环境
- ionic工程中使用git进行项目管理