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 样式的元素内

1
2
3
4
5
6
<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">&nbsp;&nbsp;&nbsp;bug&nbsp;&nbsp;</button>

内边距

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

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

1
2
3
<any class="padding-top">
.padding-top
</any>

内边距

列表样式

列表

使用.list定义列表容器, 使用.item定义列表成员:

1
2
3
4
5
6
<any class="list">
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
</any>

列表

成员项

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

成员项

按钮

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

按钮

开关

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

1
2
3
4
5
6
7
8
9
<any class="item item-toggle">
iMessage
<label class="toggle toggle-balanced">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</any>

开关

复选

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

1
2
3
4
5
<any class="item item-chexkbox">
<any class="checkbox">
<input type="checkbox">
</any>
</any>

复选

单选

1
2
3
4
5
<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>

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

1
2
3
4
5
<any class="list">
<any class="item item-radio">...</any>
<any class="item item-radio">...</any>
...
</any>

单选

滑动条

1
2
3
4
5
<any class="item range">
<any class="icon icon-volume-low"></any>
<input type="range" name="volume">
<any class="icon icon-volume-high"></any>
</any>

滑动条

选择框

1
2
3
4
5
6
7
8
9
10
<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样式声明选项卡 成员

1
2
3
4
5
<any class="tabs">
<any class="tab-item">...</any>
<any class="tab-item">...</any>
...
</any>

选项卡

徽章

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

1
2
3
4
5
6
<any class="tabs">
<any class="tab-item has-badge">
<any class="badge">...</any>
</any>
...
</any>

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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>

效果图

效果图

感谢您的支持!