Floating Labels

说明

关于为什么ionic有两种css(div)和ion-xxx写法说明:

<ion-xxx>:是angularjs的directive指令内部处理了html标签(div)
不是所有标签都有ion-具体查看官方js文档使用所有功能时(ionic,angularjs)使用指令
<div class="xx-xxx">:ionic允许你只使用ionic.css前端布局
如果只需要使用ionic.css前端则用div

Sub Header(副标题)

Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header。 参考Button Bars以获得更多例子。

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

另外,记住添加has-subheader CSS类到你的 ion-content directive.

Header
Sub Header

Content

在app里面,Ionic的内容区域是一个可以滚动的窗口. 当你的头部和底部都各自固定在顶和底的时候, 内容区域就会填充满其他的空白区域.

* 点击这里,查看更多有关 Content 的文档.

Content

I'm an H1!

I'm an H2!

I'm an H3!

I'm an H4!

I'm an H5!
I'm an H6!

I'm a paragraph with a link!

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

Block Buttons

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

<button class="button button-block button-positive">
  Block Button
</button>
Block Buttons

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

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

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

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>
Small and Large Buttons

Outlined Buttons(只有边框的按钮)

添加 button-outline 到按钮以应用空白背景,只有边框按钮的风格.

注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说 button-positive 会使文字和边框变成蓝色,背景却是透明的.

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

Clear Buttons(干净的按钮)

添加 button-clear 会移除按钮的边框.

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

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

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

Learn More

Back

Reorder

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

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

Button Bar(按钮栏)

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

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

List(列表)

列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。

列表可以是基本文字、按钮,开关,图标和缩略图等。

列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。

ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。

为了实现更牛逼的效果你可以是使用Ionic's AngularJS directives. 点击 AngularJS list docs 了解更多.

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

* 了解更多Lists的扩展功能, 点击 AngularJS List Docs

List Items
  • Battletoads
  • Contra
  • Duck Tales
  • Mega Man
  • Metroid
  • Mike Tyson's Punch-Out
  • R.C. Pro-Am
  • Spy Hunter
  • Super Mario Bros.
  • The Legend of Zelda

List Dividers(列表分隔符)

我们可以使用 item-divider 类来为列表创建分隔符,默认情况下,列表项以不同的背景颜色和字体加粗来区分,但你也可以很容易的定制他。

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

List Icons(带图标列表)

我们可以在列表项的左侧或右侧指定图标。了解更多Icon相关.

使用 item-icon-left图标在左侧,item-icon-right 设置图标在右侧。如果你需要在两边都有图标,则两个类都添加上即可。

以下实例中,我们在列表项中使用了 <a> 标签,使得每个列表项可点击。 如果使用 <a> 或者 <button> 标签, 同时又没有没有图标被添加在右侧,那么一个小小的右箭头将会被自动添加.

实例中,第一项只有左侧图标,第二项左右均有图标,第三项有右侧图标(还有注释 item-note ),第四项有 badge(标记)元素。

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

List Buttons(按钮列表)

使用 item-button-rightitem-button-left 类将按钮放在列表项中。

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>
List Buttons
Call Ma

Item Avatars(带头像列表)

使用 item-avatar 来创建一个带头像的列表.

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

Item Thumbnails(缩略图列表)

item-thumbnail-left 类用于添加左侧对齐的缩略图, item-thumbnail-right 类用于添加右侧对齐的缩略图。

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

Quick ng-repeat 例子

Inset Lists(内嵌列表)

我们可以在容器当中内嵌列表,列表不会显示完整的宽度。 内嵌列表的样式为:list list-inset,与常规列表区别是,它设置了外边距(marign), 类似于选项卡。 内嵌列表是没有阴影效果的,滚动时效果会更好。Inset forms 有更多例子.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>
Inset Lists
Raiders of the Lost Ark
Temple of Doom
Last Crusade
Kingdom of the Crystal Skull

Cards(卡片)

近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 像 Google, Twitter, 和 Spotify..

针对移动端的应用,卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做"页"来使用,像左滑,右滑.

<div class="card">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>

卡片(card)默认样式带有box-shadow(阴影),由于性能的原因,和他类似的元素像 list list-inset 并没有阴影。 如果你有很多的卡片,每个卡片都有很多子元素,建议使用内嵌列表 inset lists

Cards
This is a basic Card which contains an item that has wrapping text.

Card Headers and Footers(卡片的头部与底部)

我们可以通过添加 item-divider 类为卡片添加头部与底部: 添加带 item-divider 类的 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>
Cards
I'm a Header in a Card!
This is a basic Card with some text.
I'm a Footer in a Card!

Card Lists(卡片列表)

使用 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-ios-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 Images(带图片卡片)

卡片中使用图片,效果会更好,实例如下:

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

Pretty Hate Machine

Nine Inch Nails

Start listening

Card Showcase(卡片展现)

以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list 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>
Cards

Marty McFly

November 05, 1955

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 a tabs, icons aligned left, within the card-footer.

1 Like 5 Comments

Forms & Inputs(表单和输入框)

list 类同样可以用于 input 元素。item-inputitem 类指定了文本框及其标签。

Ionic 更倾向于在元素<label> 外创建 item-input , 这样无论任何某一行的任何部位被点击的时候都可以进入输入状态.

另外, 开发者们需要知道不同的 HTML5 Input 类型,这样就可以重现给用户不同的键盘.

Forms

输入框属性: Placeholder 标签

以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息。 当用户开始输入的时候Placeholder 标签就会隐藏掉, 注意正确使用 <textarea> 的多行输入.

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

输入框属性:Input Labels

使用 input-label 将标签放置于输入框 input 的左侧。同时你还可以使用placeholder

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

Text Input: Stacked Labels(堆叠标签)

堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label 类指定。 每个输入框需要指定 input-label。以下实例也使用了 placeholder 属性来设置信息输入提示。

<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="[email protected]">
  </label>
</div>
Stacked Labels

Text Input: Floating Labels(浮动标签)

浮动标签类似于 堆叠标签,但浮动标签有一个动画的效果,每个选项需要指定 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>

Inset Forms(内嵌表单)

默认情况下每个输入域宽度都是100%,但我们可以使用 list list-insetcard 类设置表单的内边距(padding), card 类带有阴影。 另外, 如果列表的父元素有 padding 那么当前元素同样会有一个内嵌的表现.

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

Inset Inputs(内嵌输入域)

使用 list-inset 设置内嵌实体列表。 使用 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>
Inset Inputs

Input Icons(带图标的输入框)

item-input 输入框可以很简单的添加图标。 图标可以在 <input> 前添加。 默认的图标会使用label文字的颜色, 但你也可以添加placeholder-icon来改变placeholder的颜色

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

Header Inputs(头部输入框)

输入框可放置在头部,并可添加提交或取消按钮。

<div class="bar bar-header item-input-inset">
  <label class="item-input-wrapper">
    <i class="icon ion-ios-search placeholder-icon"></i>
    <input type="search" placeholder="Search">
  </label>
  <button class="button button-clear">
    Cancel
  </button>
</div>

Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。

切换开关可以使用 toggle-assertive 来指定颜色

<label class="toggle">
   <input type="checkbox">
   <div class="track">
     <div class="handle"></div>
   </div>
</label>

该实例有是多个切换开关列表。注意,每个选项的 item 类后需要添加 item-toggle 类。

<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>
Toggle
  • HTML5
  • CSS3
  • Flashplayer
  • Java Applets
  • JavaScript
  • Silverlight
  • Web Components

Checkbox(多选框)

ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大,只是样式上有所不同。 以下实例颜色了多个多选框的列表。

注意,每个选项的 item 类后需要添加 item-checkbox 类。 多选框可以使用 checkbox-assertive 来指定颜色

<ion-list>

  <ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
  <ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
  <ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>

</ion-list>
Checkbox
  • Flux Capacitor
  • 1.21 Gigawatts
  • Delorean
  • 88 MPH
  • Plutonium Resupply

Radio Button List(单选框)

ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 <label> 元素,使其更易点击。

<ion-list>
  <ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
  <ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
</ion-list>
Radio Button List

Range(滑块控件)

ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。

<div class="item 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-ios-sunny-outline"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-ios-sunny"></i>
  </div>
</div>
Range
列表排列的滑块

Select(选择器)

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。

<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>
Select
光剑
战斗机
机器人
星球

Tabs(选项卡)

ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。

* 要想知道怎样创建Tab页面请看 Tabs 文档.

以下选项卡容器使用了 tabs 类,每个选项卡使用 tab-item 类。默认情况下,选项卡是文本的,并没有图标。

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

默认情况,选项卡颜色为default,你可以设置以下不同颜色样式: tabs-default tabs-light tabs-stable tabs-positive tabs-calm tabs-balanced tabs-energized tabs-assertive tabs-royal tabs-dark

要隐藏选项卡栏,可使用 tabs-item-hide 类。 无论什么时候只要你使用tabs, 记住添加has-tabs CSS 类到你的ion-content.

Icon-only Tabs(图标选项卡)

tabs 类后添加 tabs-icon-only 类可设置只显示图标选项卡。

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

Top Icon Tabs(顶部图标+文字选项卡)

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>

Left Icon Tabs(左侧图标+文字选项卡)

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>

Striped Style Tabs(条纹样式选项卡)

可以在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。

也可以添加 tabs-top 来实现选项卡在页面顶部。

条纹选项卡颜色可通过 tabs-background-{color}tabs-color-{color} 来控制, {color} 值可以是: default, light, stable, positive, calm, balanced, energized, assertive, royal, or dark

注意:如果要再选项卡上设置头部标题,需要使用 has-tabs-top 类。

  <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  

Grid(网格)

ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) 。 而且在移动端,基本上的手机都支持flexbox。row 样式指定行,col 样式指定列。

在row简单添加columns,columns会被平分row的空间. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic没有12列的限制,也没有列大小的限制. 你还可以在每个列中设置垂直居中.

row 类是用来定义行, col 是用来定义列. 在右边的demo里面,我们有4列和2列.但我们也可以用3, 6, 7, 23 等等, 不重要. 关键在于创建你想要的列,不用担心他们的占位百分比, 因为都是自动的.

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

Grid
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3
Line 1
Line 1
Line 2
Line 3

Grid: Evenly Spaced Columns(同等大小网格)

在带有 row 的样式的元素里如果包含了 col 的样式,col 就会设置为同等大小。 以下实例中 row 的样式包含了 5 个 col 样式,每个 col 的宽度为 20%。

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

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

Evenly Spaced Columns
.col
.col
.col
.col
.col

Grid: Explicit Column Sizes(指定列宽)

可以 设定一行中各个列的大小不一样。默认情况下,列都会被划分为同等大小。但你也可以按百分比来设置列的宽度(一行为 12 个网格)。

使用栅格系统的好处在于你只需要指明你需要的列占位百分比即可,其他的列就会被平均分配使用剩下的空间.

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

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

下面列出了指定列宽的一些百分比的样式名:
.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%
Explicit Column Sizes
.col.col-50
.col
.col
.col.col-75
.col
.col
.col.col-75
.col
.col

Grid: Offset Columns(有偏移量的网格)

列可以设置左侧偏移量,实例如下:

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

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

下面列出了指定列宽的一些百分比的样式名:
.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%
Offset Columns
.col
.col
.col
.col
.col

Grid: Wrap Columns(换行网格)

默认为不换行当我们需要换行的时候只需要添加row-wrap即可

<div class="row row-wrap">
  <div class="col col-25">.col-1</div>
  <div class="col col-25">.col-2</div>
  <div class="col col-25">.col-3</div>
  <div class="col col-25">.col-4</div>
  <div class="col col-25">.col-5</div>
  <div class="col col-25">.col-6</div>
</div>
Wrap Columns(换行网格)
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6

Grid: Vertically Align Columns(纵向对齐网格)

弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部,中间部分,底部,可以应用到每一行的列,或者指定的某列。

实例中,最后一列设置了最高的内容用于更好的演示纵向对齐网格。

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

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

Vertically Aligned Columns
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4
.col
.col
.col
1
2
3
4

Responsive Grid(响应式网格)

手持设备屏幕在切换时,例如横屏,竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。

不同设备响应式类的样式如下:

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

注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.

响应式类 描述
.responsive-sm 小于手机横屏
.responsive-md 小于平板竖屏
.responsive-lg 小于平板横屏

以后配置中, 每一个使用Sass变量的类都可以替换为你喜欢的样式. 你还可以使用responsive-grid-break来创建你自己的类.

Responsive Grid
.col
.col
.col
.col

Utility(工具类)

Ionic 提供了非常有用的工具类来实现快速设计

Colors(颜色)

ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色。通常来说 颜色意味着重写. 我们更推崇让ionic提供一种推荐的命名约束来命名你的颜色, 样式, 主题等.

工具类颜色被用来设置命名规约. 你可能会注意到ionic有意地不使用red或者blue这些词语. 取而代之的是通过使用描述情绪或通用主题的词语.

回到现实, 设置颜色是最简单的一件事情, 不同的app对颜色有不同的要求. ionic的目标就是提供一套干净的系统用于建立在维护之上,又保持远离怎样使不同的app通过选择颜色的方式去自定义它的设计.

要自定义颜色,你只需要简单的重写 ionic.css CSS 文件即可. 另外, 由于ionic使用了Sass, 为了达到更好的效果,你还可以找到_variables.scss 修改或扩展颜色变量.

* 为了更好的灵活性, 你还可以通过Sass自定义样式

Utility Colors
  • light
  • stable
  • positive
  • calm
  • balanced
  • energized
  • assertive
  • royal
  • dark

Icons(图标)

ionic 也默认提供了许多的 图标,大概有500多个。用法也非常的简单:

只需添加 icon 和Ionicon的类名即可, Ionicon可在Ionicons此查阅.

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

要在按钮上面设置图标你可以给按钮添加子节点 <i> 你还可以就只是把按钮的图标设置于按钮的class上面, 点击 按钮图标 了解更多.

注意: Ionic对图标库的使用并没有过多限制,so尽情的用吧.

Ionicons

Padding(内边距)

在Ionic当中, 许多组件的内边距,外边距都有意的被重置为了0. 许多例子告诉我们, app都需要将其组件无缝的靠近屏幕边缘. 这样开发人员也可以非常容易的控制组件的内外边距.

你可以重用padding 类来给任何元素的内容设置一定的空隙. 也就说会有一个默认的 10px 出现在控件的内容相对控件的边缘. 以下的类不需要任何元素, 但也许可以帮助你理解布局.

  • padding 在四周添加内边距e.
  • padding-vertical 添加内边距到顶和底.
  • padding-horizontal 添加内边距到左和右.
  • padding-top 添加内边距到顶.
  • padding-right 添加内边距到右.
  • padding-bottom 添加内边距到底.
  • padding-left 添加内边距到左.
Padding

灰色方框代表元素, 当padding被应用时, 蓝色即代表元素的内容.