ionic-CSS：ionic 按钮

ionic 按钮

按钮是移动app不可或缺的一部分，就像Header一样。不同风格的app，需要的不同按钮的样式。
默认情况下，按钮显示样式为：display: inline-block。还有block选项可以让按钮满宽度显示。

 
  Default


 
  button-light


 
  button-stable


 
  button-positive


 
  button-calm


 
  button-balanced


 
  button-energized


 
  button-assertive


 
  button-royal


 
  button-dark

---

Block Buttons

添加button-block到按钮使按钮以display: block方式显示. 一个block的按钮会100%集成他的父元素的宽度. 在下面这个例子当中, 按钮包含的内容同时也应用了padding, 所以在按钮和显示屏边框之间会有一定的空隙.

 
  Block Button

---

Full Width Block Buttons(满宽度显示按钮)

添加 button-full 到按钮不仅将应用 display: block到按钮, 同时还将移除按钮的左右边距, 任何边框圆角也可能被应用. 当按钮需要撑满整个屏幕的时候,这种样式将非常有用. 另外, 按钮的父元素不会 有padding 被应用..

 
  Full Width Block Button

---

Different Sizes(不同大小的按钮)

添加button-large 到按钮会让按钮变大, 添加button-small让它变小.

 
  Small Button

 
  Large Button

---

Outlined Buttons(只有边框的按钮)

添加 button-outline 到按钮以应用空白背景,只有边框按钮的风格.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive 会使文字和边框变成蓝色,背景却是透明的.

 
  Outlined Button

---

Clear Buttons(干净的按钮)

添加button-clear 会移除按钮的边框.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说button-positive
会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.

 
  Clear Button

---

Icon Buttons(图标按钮)

图标是很容易被添加到按钮什么的,无论使用Ionic图标还是第三方图标. 点击了解更多.

图标能够以子元素的形式被放在按钮内部,不过,直接把图标分配给按钮将减少DOM的数量.

 
    Loading...


Home

Favorites

Learn More

Back





Reorder

---

Buttons in Headers(头部/底部添加按钮)

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

 
   
  
Header Buttons
 
  Edit

Clear Buttons in Headers(头部文字按钮)

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

 
   
  
Header Buttons
 
  Edit

---

Button Bar(按钮栏)

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

 
  First 
  Second 
  Third