ionic 按钮
按钮是移动app不可或缺的一部分，就像Header一样。不同风格的app，需要的不同按钮的样式。
默认情况下，按钮显示样式为：display: inline-block。还有block选项可以让按钮满宽度显示。
<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>
Block Buttons
添加button-block到按钮使按钮以display: block方式显示. 一个block的按钮会100%集成他的父元素的宽度. 在下面这个例子当中, 按钮包含的内容同时也应用了padding, 所以在按钮和显示屏边框之间会有一定的空隙.
<button class="button button-block button-positive">
Block Button
</button>
Full Width Block Buttons(满宽度显示按钮)
添加 button-full 到按钮不仅将应用 display: block到按钮, 同时还将移除按钮的左右边距, 任何边框圆角也可能被应用. 当按钮需要撑满整个屏幕的时候,这种样式将非常有用. 另外, 按钮的父元素不会 有padding 被应用..
<button class="button button-full button-positive">
Full Width Block Button
</button>
Different Sizes(不同大小的按钮)
添加button-large 到按钮会让按钮变大, 添加button-small让它变小.
<button class="button button-small button-assertive">
Small Button
</button>
<button class="button button-large button-positive">
Large Button
</button>
Outlined Buttons(只有边框的按钮)
添加 button-outline 到按钮以应用空白背景,只有边框按钮的风格.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive 会使文字和边框变成蓝色,背景却是透明的.
<button class="button button-outline button-positive">
Outlined Button
</button>
Clear Buttons(干净的按钮)
添加button-clear 会移除按钮的边框.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive
会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.
<button class="button button-clear button-positive">
Clear Button
</button>
Icon Buttons(图标按钮)
图标是很容易被添加到按钮什么的,无论使用Ionic图标还是第三方图标. 点击了解更多.
图标能够以子元素的形式被放在按钮内部,不过,直接把图标分配给按钮将减少DOM的数量.
<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>
Buttons in Headers(头部/底部添加按钮)
头部/底部可以添加按钮，按钮的样式根据头部/底部来设定，所以你不需要为按钮添加额外的样式。
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
Clear Buttons in Headers(头部文字按钮)
button-clear 类可以设置无背景和边框的头部/底部按钮。
<div class="bar bar-header">
<button class="button button-icon icon ion-navicon"></button>
<div class="h1 title">Header Buttons</div>
<button class="button button-clear button-positive">Edit</button>
</div>
Button Bar(按钮栏)
我们可以使用 button-bar 类来设置按钮栏。以下实例中，我们在头部和内容中添加了按钮栏。
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
网友评论