Ionic Css样式详解

时间:2024-04-18 12:04:07

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

Ionic Css样式详解

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

如:

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

Ionic Css样式详解

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

Footer

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

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

Ionic Css样式详解

值得注意的是,在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

  1. button的默认情况是按照display: inline-block来显示,宽度是随其内部文字长度增长的。
    有许多不同的显示样式。
    1
    <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>

Ionic Css样式详解


  1. 如果想让button占满父元素宽度,父元素没有padding的话,就是屏幕宽度,需要加上 button-block 样式
    1
    <button class="button button-full button-positive">
    Full Width Block Button
    </button>

Ionic Css样式详解

  1. 当然还有可以控制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>

Ionic Css样式详解

  1. 还有只显示框线的button,样式button-outline
    1
    <button class="button button-outline button-positive">
    Outlined Button
    </button>

Ionic Css样式详解

  1. 还有不显示框的button,样式button-clear
    1
    <button class="button button-clear button-positive">
    Clear Button
    </button>

Ionic Css样式详解

  1. 带icon的button,可以控制icon的位置,直接看代码
    1
    <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>

Ionic Css样式详解

  1. 放在header的button,注意button-icon样式和button-clear样式
    1
    <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>

Ionic Css样式详解

Ionic Css样式详解

  1. 一组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>

Ionic Css样式详解

List

  1. list列表是一个比较常用的组件,list views支持很多的交互操作,比如编辑,划屏幕编辑,拖拽排序,下拉刷新等等。可以参看javascript API中的list介绍,这里给个综合的例子:
    1
    <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>

Ionic Css样式详解

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

  1. list分栏,主意item-divider样式
    1
    <div class="list">
    
      <div class="item item-divider">
    Candy Bars
    </div> <a class="item" href="#">
    Butterfinger
    </a> ... </div>

Ionic Css样式详解

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

Ionic Css样式详解

  1. 带有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>

Ionic Css样式详解

  1. 带有头像的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>

Ionic Css样式详解

  1. 带有缩略图的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>

Ionic Css样式详解

  1. 表格样式的list,这个主要是有了margin的样式,显示两边的框线。注意样式list list-inset。可以参考后面的inset-forms效果。
    1
    <div class="list list-inset">
    
        <div class="item">
    Raiders of the Lost Ark
    </div> ... </div>

Ionic Css样式详解

卡片card

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

Ionic Css样式详解

  1. 列表形式的card,主意list card 样式
    1
    <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>

Ionic Css样式详解

  1. 带有图像的组合显示的card
    1
    <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>

Ionic Css样式详解

  1. card显示风格的示例。该实例综合多种元素,主意item-avatar,item-body,item-divider等样式
    1
    <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>

Ionic Css样式详解

表单输入

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

  1. 基本的表单,主意textarea标签,其他的主意placeholder属性
    1
    <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>

Ionic Css样式详解

  1. 带有标签的输入框,注意input-label样式
    1
    <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>

Ionic Css样式详解

  1. 堆栈式的表单,注意item-stacked-label样式
    1
    <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>

Ionic Css样式详解

  1. 动态显示标签的堆栈式表单,注意item-floating-label样式,而且这个是和input-label样式的元素对应的,两者搭配使用。
    1
    <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>

Ionic Css样式详解

  1. 默认的form是满屏宽度的,还有一种 inset form 是带有padding的,类似inset list的样式。
    1
    <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>

Ionic Css样式详解

  1. 内嵌输入样式,和form一样,这种输入框并不是100%宽的。注意item-input-inset样式。
    1
    <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>

Ionic Css样式详解

  1. 带有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>

Ionic Css样式详解

  1. header上的输入框
    1
    <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>

Ionic Css样式详解

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>

Ionic Css样式详解

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>

Ionic Css样式详解

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>

Ionic Css样式详解

range范围选择

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

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

Ionic Css样式详解

select下拉选框

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

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

Ionic Css样式详解

tabs组件

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

Ionic Css样式详解

  1. 仅有图标的tabs
    1
    <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>

Ionic Css样式详解

  1. icon在上,下有文字的tabs,注意tabs-icon-top样式
    1
    <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>

Ionic Css样式详解

  1. icon在左的tabs,注意tabs-icon-left标签
    1
    <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>

Ionic Css样式详解

grid系统

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

  1. 平均分的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>

Ionic Css样式详解

  1. 指定列宽的grid
    1
    <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>

Ionic Css样式详解

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%
  1. 有偏移量的grid
    1
    <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>

Ionic Css样式详解

1
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%
  1. 纵向对其的grid
    1
    <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>

Ionic Css样式详解

  1. 响应式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>

Ionic Css样式详解

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样式详解

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

padding

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

  1. padding, Adds padding around every side.
  2. padding-vertical, Adds padding to the top and bottom.
  3. padding-horizontal, Adds padding to the left and right.
  4. padding-top, Adds padding to the top.
  5. padding-right, Adds padding to the right.
  6. padding-bottom, Adds padding to the bottom.
  7. 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