Ionic Css样式详解

Header是固定在屏幕顶部的组件。可以包含如标题和左右的功能按钮。Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。

如：

<ion-view>

    <ion-content class="no-header">

        <div class="bar bar-header  bar-royal">

            <a href="#/app/capture" class="button button-icon icon ion-gear-a"></a>

            <h1 class="title">Header</h1>

            <a href="#/app/playlists" class="button button-icon icon ion-heart"></a>

        </div>

        <div class="bar bar-subheader">

            <h2 class="title">Sub Header</h2>

            <a href="#/app/playlists" class="button button-icon icon ion-ios7-undo-outline"></a>

            <a href="#/app/capture" class="button button-icon icon ion-ios7-redo-outline"></a>

        </div>

    </ion-content>

</ion-view>

仔细的读者可能发现，我在header和subheader里面各自放了两个按钮，我并没有定位，ionic会自动将两个分开在两边。经测试，ionic会自动把header或subheader里面的最后一个图标靠右，其他的靠左依次摆开。

Footer

footer是显示在屏幕底部的边栏，你可以用这个做导航栏或者添加一些菜单操作，示例如下：

 <div class="bar bar-footer bar-balanced">

        <button class="button button-clear">Left</button>

        <div class="title"> <button ng-click="captureVideo();" class="button button-clear button-icon icon ion-ios7-videocam-outline"></button></div>

        <button class="button button-clear">Right</button>

</div>

值得注意的是，在bar-footer和bar-header里面一样，class=title的元素都会被自动居中。如果没有的话，会自动向左排列。可以使用如下pull-right方式让其靠右排列：（header里面也一样）

1	<div class="bar bar-footer"> <button class="button button-clear pull-right">Right</button> </div>

button

button的默认情况是按照display: inline-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>

如果想让button占满父元素宽度，父元素没有padding的话，就是屏幕宽度，需要加上 button-block 样式
1

<button class="button button-full button-positive">
Full Width Block Button
</button>

当然还有可以控制button大小的默认样式，button-small，button-large

1	<button class="button button-small button-assertive"> Small Button </button> <button class="button button-large button-positive"> Large Button </button>

还有只显示框线的button，样式button-outline

1	<button class="button button-outline button-positive"> Outlined Button </button>

还有不显示框的button，样式button-clear

1	<button class="button button-clear button-positive"> Clear Button </button>

带icon的button，可以控制icon的位置，直接看代码

<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>

放在header的button，注意button-icon样式和button-clear样式

<div class="bar bar-header">

  <button class="button icon ion-navicon"></button>

  <h1 class="title">Header Buttons</h1>

  <button class="button">Edit</button>

</div>

<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，注意button-bar样式，可以与其他的icon组合

1	<div class="button-bar"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a> </div>

List

list列表是一个比较常用的组件，list views支持很多的交互操作，比如编辑，划屏幕编辑，拖拽排序，下拉刷新等等。可以参看javascript API中的list介绍，这里给个综合的例子：

<ion-list ng-controller="MyCtrl"

          show-delete="shouldShowDelete"

          show-reorder="shouldShowReorder"

          can-swipe="listCanSwipe">

  <ion-item ng-repeat="item in items"

            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">

    <h2>{{item.title}}</h2>

    <p>{{item.description}}</p>

    <ion-option-button class="button-positive"

                       ng-click="share(item)">

      Share

    </ion-option-button>

    <ion-option-button class="button-info"

                       ng-click="edit(item)">

      Edit

    </ion-option-button>

    <ion-delete-button class="ion-minus-circled"

                       ng-click="items.splice($index, 1)">

    </ion-delete-button>

    <ion-reorder-button class="ion-navicon"

                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">

    </ion-reorder-button>

  </ion-item>

</ion-list>

上图中那个有一行是向左划屏出现的效果。

list分栏，主意item-divider样式

1	<div class="list"> <div class="item item-divider"> Candy Bars </div> <a class="item" href="#"> Butterfinger </a> ... </div>

带有icon的list，可以通过i标签添加icon到item中，通过item-icon-left或item-icon-right指定icon在左边还是右边。下面的例子中使用a或button标签做每个item，主要是为了让这每个item可以tappable，还有一个特点是当没有添加任何icon时，会自动在右边添加一个小的向右的箭头图标。直接看例子：

<div class="list">

  <a class="item item-icon-left" href="#">

    <i class="icon ion-email"></i>

    Check mail

  </a>

  <a class="item item-icon-left item-icon-right" href="#">

    <i class="icon ion-chatbubble-working"></i>

    Call Ma

    <i class="icon ion-ios7-telephone-outline"></i>

  </a>

  <a class="item item-icon-left" href="#">

    <i class="icon ion-mic-a"></i>

    Record album

    <span class="item-note">

      Grammy

    </span>

  </a>

  <a class="item item-icon-left" href="#">

    <i class="icon ion-person-stalker"></i>

    Friends

    <span class="badge badge-assertive">0</span>

  </a>

</div>

带有button的list，注意item-button-right or item-button-left样式

1	<div class="list"> <div class="item item-button-right"> Call Ma <button class="button button-positive"> <i class="icon ion-ios7-telephone"></i> </button> </div> ... </div>

带有头像的item，主意item-avatar样式

1	<div class="list"> <a class="item item-avatar" href="#"> <img src="venkman.jpg"> <h2>Venkman</h2> <p>Back off, man. I'm a scientist.</p> </a> ... </div>

带有缩略图的list，注意item-thumbnail-left 和 item-thumbnail-right样式，可以指定缩略图不同的显示位置。

1	<div class="list"> <a class="item item-thumbnail-left" href="#"> <img src="cover.jpg"> <h2>Pretty Hate Machine</h2> <p>Nine Inch Nails</p> </a> ... </div>

表格样式的list，这个主要是有了margin的样式，显示两边的框线。注意样式list list-inset。可以参考后面的inset-forms效果。
1

<div class="list list-inset"> <div class="item">
Raiders of the Lost Ark
</div> ... </div>

卡片card

card卡片一起整洁内容涵盖丰富的表现形式，在应用中使用的越来越多。card默认样式带有box-shadow，由于性能的原因，和他类似的元素像list list-inset 并没有shadow。如果你有很多的card，每个card都有很多子元素，建议使用inset list。下面是一个简单的带有footer和header的card。

<div class="card">

  <div class="item item-divider">

    I'm a Header in a Card!

  </div>

  <div class="item item-text-wrap">

    This is a basic Card with some text.

  </div>

  <div class="item item-divider">

    I'm a Footer in a Card!

  </div>

</div>

列表形式的card，主意list card 样式

<div class="list card">

  <a href="#" class="item item-icon-left">

    <i class="icon ion-home"></i>

    Enter home address

  </a>

  <a href="#" class="item item-icon-left">

    <i class="icon ion-ios7-telephone"></i>

    Enter phone number

  </a>

  <a href="#" class="item item-icon-left">

    <i class="icon ion-wifi"></i>

    Enter wireless password

  </a>

  <a href="#" class="item item-icon-left">

    <i class="icon ion-card"></i>

    Enter card information

  </a>

</div>

带有图像的组合显示的card

<div class="list card">

  <div class="item item-avatar">

    <img src="avatar.jpg">

    <h2>Pretty Hate Machine</h2>

    <p>Nine Inch Nails</p>

  </div>

  <div class="item item-image">

    <img src="cover.jpg">

  </div>

  <a class="item item-icon-left assertive" href="#">

    <i class="icon ion-music-note"></i>

    Start listening

  </a>

</div>

card显示风格的示例。该实例综合多种元素，主意item-avatar，item-body，item-divider等样式

<div class="list card">

  <div class="item item-avatar">

    <img src="mcfly.jpg">

    <h2>Marty McFly</h2>

    <p>November 05, 1955</p>

  </div>

  <div class="item item-body">

    <img class="full-image" src="delorean.jpg">

    <p>

      This is a "Facebook" styled Card. The header is created from a Thumbnail List item,

      the content is from a card-body consisting of an image and paragraph text. The footer

      consists of tabs, icons aligned left, within the card-footer.

    </p>

    <p>

      <a href="#" class="subdued">1 Like</a>

      <a href="#" class="subdued">5 Comments</a>

    </p>

  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">

    <a class="tab-item" href="#">

      <i class="icon ion-thumbsup"></i>

      Like

    </a>

    <a class="tab-item" href="#">

      <i class="icon ion-chatbox"></i>

      Comment

    </a>

    <a class="tab-item" href="#">

      <i class="icon ion-share"></i>

      Share

    </a>

  </div>

</div>

表单输入

关于html5支持的输入类型，参考我的另外一篇HTML5输入类型

基本的表单，主意textarea标签，其他的主意placeholder属性

<div class="list">

  <label class="item item-input">

    <input type="text" placeholder="First Name">

  </label>

  <label class="item item-input">

    <input type="text" placeholder="Last Name">

  </label>

  <label class="item item-input">

    <textarea placeholder="Comments"></textarea>

  </label>

</div>

带有标签的输入框,注意input-label样式

<div class="list">

  <label class="item item-input">

    <span class="input-label">Username</span>

    <input type="text">

  </label>

  <label class="item item-input">

    <span class="input-label">Password</span>

    <input type="password">

  </label>

</div>

堆栈式的表单，注意item-stacked-label样式

<div class="list">

  <label class="item item-input item-stacked-label">

    <span class="input-label">First Name</span>

    <input type="text" placeholder="John">

  </label>

  <label class="item item-input item-stacked-label">

    <span class="input-label">Last Name</span>

    <input type="text" placeholder="Suhr">

  </label>

  <label class="item item-input item-stacked-label">

    <span class="input-label">Email</span>

    <input type="text" placeholder="john@suhr.com">

  </label>

</div>

动态显示标签的堆栈式表单，注意item-floating-label样式，而且这个是和input-label样式的元素对应的，两者搭配使用。

<div class="list">

  <label class="item item-input item-floating-label">

    <span class="input-label">First Name</span>

    <input type="text" placeholder="First Name">

  </label>

  <label class="item item-input item-floating-label">

    <span class="input-label">Last Name</span>

    <input type="text" placeholder="Last Name">

  </label>

  <label class="item item-input item-floating-label">

    <span class="input-label">Email</span>

    <input type="text" placeholder="Email">

  </label>

</div>

默认的form是满屏宽度的，还有一种 inset form 是带有padding的，类似inset list的样式。

<div class="list list-inset">

  <label class="item item-input">

    <input type="text" placeholder="First Name">

  </label>

  <label class="item item-input">

    <input type="text" placeholder="Last Name">

  </label>

</div>

内嵌输入样式，和form一样，这种输入框并不是100%宽的。注意item-input-inset样式。

<div class="list">

  <div class="item item-input-inset">

    <label class="item-input-wrapper">

      <input type="text" placeholder="Email">

    </label>

    <button class="button button-small">

      Submit

    </button>

  </div>

</div>

带有icon的输入框，可以很轻松的给item-input元素添加icon，也可以添加placeholder内容

1	<div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search"> </label> </div>

header上的输入框

<div class="bar bar-header item-input-inset">

  <label class="item-input-wrapper">

    <i class="icon ion-ios7-search placeholder-icon"></i>

    <input type="search" placeholder="Search">

  </label>

  <button class="button button-clear">

    Cancel

  </button>

</div>

Toggle选择

toggle是一种比较容易操作的多选框，类似于checkbox，只不过表现上更容易操作，这里是用label标签包裹toggle组件，为了是更容易操作。

1	<ul class="list"> <li class="item item-toggle"> HTML5 <label class="toggle toggle-assertive"> <input type="checkbox"> <div class="track"> <div class="handle"></div> </div> </label> </li> ... </ul>

checkbox多选框

多选框是一种常见的html组件，这里同样使用label包裹多选框，为了方便实现tap操作，label标签中可以使用checkbox-assertive来指定选中激活时的颜色。

1	<ul class="list"> <li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> Flux Capacitor </li> ... </ul>

radio单选框

通过item-radio来表示单选框，每个都有相同的name属性，radio-icon样式的标签用来指定显示勾选的icon。这里同样使用label包裹整个组件，为了方便操作

1	<div class="list"> <label class="item item-radio"> <input type="radio" name="group"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </label> ... </div>

range范围选择

range组件用于在某个范围内选择值。

<div class="range">

  <i class="icon ion-volume-low"></i>

  <input type="range" name="volume">

  <i class="icon ion-volume-high"></i>

</div>

<div class="list">

  <div class="item range range-positive">

    <i class="icon ion-ios7-sunny-outline"></i>

    <input type="range" name="volume" min="0" max="100" value="33">

    <i class="icon ion-ios7-sunny"></i>

  </div>

</div>

select下拉选框

下拉框用于在多个候选项中选择一个值，不同的浏览器表现形式不一样。注意item-select样式。

<div class="list">

  <label class="item item-input item-select">

    <div class="input-label">

      Lightsaber

    </div>

    <select>

      <option>Blue</option>

      <option selected>Green</option>

      <option>Red</option>

    </select>

  </label>

</div>

tabs组件

tabs是水平排列的button或link，用于切换视图。是一种很常用的导航方法。

1	<div class="tabs"> <a class="tab-item"> Home </a> <a class="tab-item"> Favorites </a> <a class="tab-item"> Settings </a> </div>

仅有图标的tabs

<div class="tabs tabs-icon-only">

  <a class="tab-item">

    <i class="icon ion-home"></i>

  </a>

  <a class="tab-item">

    <i class="icon ion-star"></i>

  </a>

  <a class="tab-item">

    <i class="icon ion-gear-a"></i>

  </a>

</div>

icon在上，下有文字的tabs，注意tabs-icon-top样式

<div class="tabs tabs-icon-top">

  <a class="tab-item">

    <i class="icon ion-home"></i>

    Home

  </a>

  <a class="tab-item">

    <i class="icon ion-star"></i>

    Favorites

  </a>

  <a class="tab-item">

    <i class="icon ion-gear-a"></i>

    Settings

  </a>

</div>

icon在左的tabs，注意tabs-icon-left标签

<div class="tabs tabs-icon-left">

  <a class="tab-item">

    <i class="icon ion-home"></i>

    Home

  </a>

  <a class="tab-item">

    <i class="icon ion-star"></i>

    Favorites

  </a>

  <a class="tab-item">

    <i class="icon ion-gear-a"></i>

    Settings

  </a>

</div>

grid系统

ionic的网格系统采用的是 CSS Flexible Box Layout Module标准，所有支持ionic的设备都支持flexbox。可以用row样式指定行，用col样式指定列。

平均分的grid

1	<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>

指定列宽的grid

<div class="row">

  <div class="col col-50">.col.col-50</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

</div>

<div class="row">

  <div class="col col-75">.col.col-75</div>

  <div class="col">.col</div>

</div>

<div class="row">

  <div class="col">.col</div>

  <div class="col col-75">.col.col-75</div>

</div>

<div class="row">

  <div class="col">.col</div>

  <div class="col">.col</div>

</div>

1	Explicit Column Percentage Classnames .col-10 10% .col-20 20% .col-25 25% .col-33 33.3333% .col-50 50% .col-67 66.6666% .col-75 75% .col-80 80% .col-90 90%

有偏移量的grid

<div class="row">

  <div class="col col-33 col-offset-33">.col</div>

  <div class="col">.col</div>

</div>

<div class="row">

  <div class="col col-33">.col</div>

  <div class="col col-33 col-offset-33">.col</div>

</div>

<div class="row">

  <div class="col col-33 col-offset-67">.col</div>

</div>

Offset Column Percentage Classnames

.col-offset-10		10%

.col-offset-20		20%

.col-offset-25		25%

.col-offset-33		33.3333%

.col-offset-50		50%

.col-offset-67		66.6666%

.col-offset-75		75%

.col-offset-80		80%

.col-offset-90		90%

纵向对其的grid

<div class="row">

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">1<br>2<br>3<br>4</div>

</div>

<div class="row">

  <div class="col col-top">.col</div>

  <div class="col col-center">.col</div>

  <div class="col col-bottom">.col</div>

  <div class="col">1<br>2<br>3<br>4</div>

</div>

<div class="row row-top">

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">1<br>2<br>3<br>4</div>

</div>

<div class="row row-center">

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">1<br>2<br>3<br>4</div>

</div>

<div class="row row-bottom">

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">.col</div>

  <div class="col">1<br>2<br>3<br>4</div>

</div>

响应式grid

1	<div class="row responsive-sm"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>

1	Responsive Class Break when roughly .responsive-sm Smaller than landscape phone .responsive-md Smaller than portrait tablet .responsive-lg Smaller than landscape tablet

color定制

ionic提供的各种配色如下：

你也可以修改ionic.css，由于使用的sass，可以修改_variables.scss文件来扩展或修改配色。

padding

ionic中许多组建都有默认的padding。你也可以修改，通过如下的样式

padding， Adds padding around every side.
padding-vertical， Adds padding to the top and bottom.
padding-horizontal， Adds padding to the left and right.
padding-top， Adds padding to the top.
padding-right， Adds padding to the right.
padding-bottom， Adds padding to the bottom.
padding-left， Adds padding to the left.

动画样式

fade-in
nav-title-slide-ios7
no-animation
reverse
slide-in-left
slide-in-right
slide-in-up
slide-left-right-ios7
slide-left-right
slide-out-left
slide-out-right
slide-right-left-ios7
slide-right-left

来自为知笔记(Wiz)