ionic-CSS：ionic 按钮

2017-01-11 本文已影响86人 hx永恒之恋

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>