ionic css笔记

ionic Css

ionic css是什么

可以只使用 ionic 的 CSS 框架：直接在 HTML 中引入 ionic.css 就可以了。ionic 的 CSS 框架主要提供预定义的 CSS 类，来帮助我们快速构建适用于手机端的 UI。

Ionic css组成

基本布局类
颜色和图标类
界面组件类
栅格系统类

布局

定高条块定义

.bar——将元素声明为屏幕上绝对定位的块状区域，具有固定的高度（44px）

条块位置

.bar-header - 置顶
.bar-subheader - header之下置顶
.bar-footer - 置底
.bar-subfooter - footer之上置底

内容

.content - 流式定位，内容在文档流中按顺序定位
.scroll-content - 绝对定位，内容元素占满整个屏幕

bar子元素

有三种.bar子元素的样式是预定义的：

1
2
3

<any class="bar">
  <any class="title">...</any>
</any>

标题文字 - 对包含标题文字的元素应用 .title 样式，通常使用h1元素。

按钮 - 对用作按钮的元素，应用 .button 样式，通常使用 button 或 a 元素作为按钮。注意按钮将使用 .bar 的配色方案。

工具栏 - 工具栏包含一组按钮。对用作工具栏的元素，应用 .button-bar 样式，通常使用 div 元素作为工具栏。

bar嵌入input

在条块元素上应用 .item-input-inset 样式
将input包裹在应用 .item-input-wrapper 样式的元素内

<div class="bar bar-subheader light-bg item-input-inset">
    <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
    <label class="item-input-wrapper">
      <input type="text" placeholder="输入查询信息">
    </label>
</div>

小结

颜色&图标

色彩

ionic定义了九种前景/背景/边框的色彩样式：

1
2
3

<any class="positive-bg energized">
...
</any>

图标

官网地址：http://ionicons.com/

.icon - 将元素声明为图标
.ion-{icon-name} - 声明要使用的具体图标

1	<any class="icon ion-ionic calm"></any>

比如：

1	<button class="button button-light icon ion-bug">   bug  </button>

内边距

ionic定义了常用的内边距样式：

样式名很直白，边距统一为10px。可以在任何元素上应用这些样式。

1
2
3

<any class="padding-top">
  .padding-top
</any>

列表样式

列表

使用.list定义列表容器，使用.item定义列表成员：

<any class="list">
    <any class="item">...</any>
    <any class="item">...</any>
    <any class="item">...</any>
    <any class="item">...</any>
</any>

成员项

列表的样式定制主要发生在.item元素上。

按钮

ionic使用.button样式定义按钮元素

开关

开关通常用来设置两种状态 - 开启和关闭

<any class="item item-toggle">
  iMessage
  <label class="toggle toggle-balanced">
    <input type="checkbox">
    <div class="track">
      <div class="handle"></div>
    </div>
  </label>
</any>

复选

复选框通常用来在一组列表中选中部分成员

<any class="item item-chexkbox">
    <any class="checkbox">
        <input type="checkbox">
    </any>
</any>

单选

<label class="item item-radio">
  <input type="radio" name="group">
  <div class="item-content">f支付宝客户端支付</div>
  <i class="radio-icon ion-checkmark assertive"></i>
</label>

单选按钮通常不单独使用，将他们放入一个列表中

<any class="list">
    <any class="item item-radio">...</any>
    <any class="item item-radio">...</any>
    ...
</any>

滑动条

<any class="item range">
    <any class="icon icon-volume-low"></any>
    <input type="range" name="volume">
    <any class="icon icon-volume-high"></any>
</any>

选择框

<any class=item item-select”>
  <label class="item-input">
    <any class="input-label"></any>
    <select>
        <option>...</option>
        <option>...</option>
        ...
    </select>
  </label>
</any>

选项卡

选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。 ionic中使用.tabs样式声明选项卡，使用.tab-item样式声明选项卡成员

<any class="tabs">
    <any class="tab-item">...</any>
    <any class="tab-item">...</any>
    ...
</any>

徽章

使用 .badge 样式插入徽章元素
在 .tab-item 同级声明 .has-badge 样式

<any class="tabs">
<any class="tab-item has-badge">
    <any class="badge">...</any>
</any>
...
</any>

示例代码

<ion-view id="guidePage" view-title="引导页" cache-view="false">
  <div class="bar bar-header calm-bg">
    <h1 class="title">头部区域</h1>
  </div>
  <div class="bar bar-subheader assertive-bg has-subheader">
    <button class="button button-energized">会员登录</button>
    <button class="button balanced-bg">注册会员</button>
  </div>
  <div class="bar bar-subheader positive-bg item-input-inset">
    <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
    <label class="item-input-wrapper">
      <input type="text" placeholder="输入查询信息">
    </label>
  </div>
  <div class="scroll-content balanced-bg has-header has-subheader has-footer has-subfooter">
    <div class="list">
      <div class="item">列表1</div>
      <div class="item">列表2</div>
      <div class="item">列表3</div>
      <div class="item">列表4</div>
      <div class="item">
        <button class="button icon ion-ios-cart royal-bg">&nbsp;&nbsp;&nbsp;购物车&nbsp;&nbsp;</button>
        <div class="badge badge-assertive">34</div>
      </div>
    </div>
  </div>
  <div class="bar bar-subfooter royal-bg">
    <div class="button-bar">
      <button class="button button-energized">按钮1</button>
      <button class="button button-energized">按钮2</button>
      <button class="button balanced-bg">按钮3</button>
      <button class="button balanced-bg">按钮4</button>
    </div>
  </div>
  <div class="bar bar-footer dark-bg">
    <button class="button button-light icon ion-bug">&nbsp;&nbsp;&nbsp;bug&nbsp;&nbsp;</button>
  </div>
</ion-view>