ionic入门到精通

admin管理员组

文章数量:1794759

ionic入门到精通

ionic css 介绍

ionic 的预定义 CSS 类主要分四个方面：

基本布局类

颜色和图标类

界面组件类

栅格系统类

基本布局类

ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。

头部，定高条块：bar

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

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

bar 嵌入 input

在 bar 元素中嵌入 input 元素，需要注意两点： 在条块元素上应用 item-input-inset 样式 将input包裹在应用 item-input-wrapper 样式的元素内 <div class="bar bar-header bar-calm"> <div class="item-input-inset "> 搜索 ： <input class="item-input-wrapper" type="" name="" id="" value="" /> </div> </div> 内容：content/scroll-content

ionic预定义了两个内容容器样式： content - 流式定位，内容在文档流中按顺序定位 scroll-content - 绝对定位，内容元素占满整个屏幕

Ionic CSS 颜色

ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。

Ionic CSS图标

ionic 使用 ionicons 图标样式库。 使用图标很简单，在元素上声明以下两个 CSS 类即可： .icon - 将元素声明为图标 .ion-{icon-name} - 声明要使用的具体图标 要了解有哪些图标及具体名称，需要访问ionicons/。 点击图标即可查看其类名称。

内边距

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

Ionic CSS 界面组件

ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。

列表：list

列表非常适合于手机屏幕上的信的显示。使用.list定义列表容器， 使用.item定义列表成员： 对列表外观的定制化主要集中在.item元素上，.list元素仅有 少数的几个样式定义：

成员项 : item 列表的样式定制主要发生在.item元素上。 可以插入文本、徽章、图标、图像、按钮元素：

item 嵌入文本 列表成员中经常需要显示不同规格的文本 .item元素可以使用 h1~h6 / p 标签插入不同规格的文本

<li class="item"> <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2> <p>中国青年报</p> </li>

item 嵌入图标

要插入图标，需要满足两个条件： 在.item元素上声明图标位置。图标可以位于列表的左侧或右侧， 分别使用 .item-icon-left 和 .item-icon-right 声明 在.item元素内插入图标。 例如：<i class="icon ion-location"></i>

item 嵌入头像

在ionic中，头像被设置为40x40固定大小： 在.item元素上声明头像位置。头像可以位于列表的左侧或右侧， 分别使用.item-avatar-left和.item-avatar-right声明 在.item元素内使用img标签插入头像。

item 嵌入缩略图

在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片： 在.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧， 分别使用.item-thumbnail-left和.item-thumbnail-right声明 在.item元素内使用img标签插入头像。 注意：将img标签放到.item内容的开头！

item : 嵌入大图

使用方式：在 .item 上加入 .item-image，然后在子集加入<img>

按钮：button

ionic 使用 .button 样式定义按钮元素： 一旦应用了 .button 样式，可以继续选用两类预定义样式来进一步声明元素及其内容的外观： 同级样式 - 同级样式与.button应用在同一元素上，声明元素的位置、配色等。 下级样式 - 下级样式只能应用在.button的子元素上，声明子元素的大小等特征。

button 嵌入图标 使用内置的 ionicons 样式，图标可以很容易地加入到 .button 中：

<a class="button"> <i class="icon ion-home"></i> Home </a>

更简洁的办法是：直接在 .button 上设置样式，这样可以有效减少元素的数目：

<a class="button icon-left ion-home">...</a>

输入组件容器：item-input 在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input样式：

<any class="item-input">...</any>

不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：

<div class="item-input"> <label class="input-label">用户名</label> <input type="text" placeholder="请输入你的用户账号"> </div>

输入组件容器：item-input ionic 预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用输入组件：

堆叠式标签

堆叠式标签意味着将描述性标签占一行：

<any class="item-input item-stacked-label"> <any class="input-label">...</any> <input type="text" placeholder="..."> </any> 开关标签

开关通常用来设置两种状态 - 开启和关闭： 开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：

<any class="toggle"> <input type="checkbox"> <any class="track"> <any class="handle"></any> </any> </any> 复选按钮

复选框通常用来在一组列表中选中部分成员 和开关一样，复选按钮也是基于HTML的checkbox input实现的：

<li class="item item-checkbox"> <label class="checkbox"> <input type="checkbox"> </label> <h2>Do you agree?</h2> </li>

复选按钮的配色方案样式为：.checkbox-{color}。

单选按钮

单选按钮的可视部件包括两部分：选中图标（.radio-icon） 和描述内容（.item-content），你可以在内容随便添加 内容。

<label class="item item-radio"> <input type="radio" name="group"> <div class="item-content">支付宝网页支付</div> <i class="radio-icon ion-checkmark calm"></i> </label>

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

滑动条

滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。

<div class="item range range-positive"> <i class="icon ion-ios-volume-low"></i> <input type="range" name="volume" value="30"> <i class="icon ion-ios-volume-high"></i> </div>

使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。

选择框

在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗

<label class="item item-select"> <span class="input-label">前端技术</span> <select> <option>HTML5</option> <option selected>CSS3</option> <option>ES6</option> </select> </label> 选项卡：tabs

ionic 中使用 .tabs 样式声明选项卡，使用 .tab-item 样式声明选项卡成员

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

选项卡默认地位于屏幕底部。可以使用.tabs-top样式将选项卡置于顶部。

Ionic CSS 栅格系统

和 Bootstrap 一样，ionic 也提供了栅格系统。不过 ionic 的实现是基于 CSS3 的 Flex Box 模型，更为灵活 在ionic中使用栅格系统主要使用两个类： .row - 在容器元素上使用.row类，表示将其设置为弹性容器，即Flexible Box。 .col - 在子元素上使用.col类，其扩展系数和收缩系数都被设置为1。这意味着 所有的子元素将平分容器的宽度。

默认的定宽列

在ionic的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。

.col-{w-p} 指定列宽

我们也可以显式地指定某些列的宽度： .col-10 - 占据容器10%宽度 .col-20 - 占据容器20%宽度 .col-25 - 占据容器25%宽度 .col-33 - 占据容器33%宽度 .col-50 - 占据容器50%宽度 .col-67 - 占据容器67%宽度 .col-75 - 占据容器75%宽度 .col-80 - 占据容器80%宽度

.col-offset-{w-p} 指定列偏移

列可以从默认位置偏移： .col-offset-10 - 偏移默认位置10%容器宽度 .col-offset-20 - 偏移默认位置20%容器宽度 .col-offset-25 - 偏移默认位置25%容器宽度 .col-offset-33 - 偏移默认位置33%容器宽度 .col-offset-50 - 偏移默认位置50%容器宽度 .col-offset-67 - 偏移默认位置67%容器宽度 .col-offset-75 - 偏移默认位置75%容器宽度 .col-offset-80 - 偏移默认位置80%容器宽度

col-{align} 列纵向对齐

如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。 ionic提供了一些预置的CSS类用来 指定这些元素纵向的对齐方式： .col-top - 让元素纵向顶对齐 .col-center - 让元素居中对齐 .col-bottom - 让元素向底对齐 这是通过设置元素的align-self来实现的。

本文标签： 入门Ionic