固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light
第一个小节 第二个表示的是头部 第三个表示颜色
子头部,需要在ion-content加入bar-subheader 在头部加上has-subheader不然顶部会被遮挡。
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
为主题部分,可以自动超出滚动。
pull-to-refresh 拉动刷新 ionrefresher
不断刷新 ionInfiniteScroll
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
在屏幕的底部,可以包含很多元素。内部的title默认居中。
前后按钮一个左,一个右。分别在title两侧。
如果没有title可使用pull-right按钮右对齐。
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>
////////////////////////////////////////////////
<div class="bar bar-footer">
<button class="button button-clear pull-right">Right</button>
</div>
当按钮应用做Header或者Footer的时候,默认样式为bar,所以需要用额外的样式
,添加希望加上的。
默认为dispay:inline-block;
button-block有Padding。
button-full是全屏的,它父级是没有padding的;
按钮是有不同尺寸的 button-small button-large
button-clear它会移除边框,使得文字脱颖而出。文字的颜色会替换背景色
button-outline 添加一个透明的背景颜色;
button-icon 没有边框
<button class="button button-block button-positive">
Block Button
</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>
///////////////////////////////////////
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
应用很广泛,如:文本,按钮开关,图标,缩略图。。。
它是一个强大的组建,如:编辑,滑动编辑,拖动排序,拉刷新等等。。。
列表分割:使用item-divider可以创建分割,默认会有不同背景颜色以及字体加粗
,这个很容易定制。
列表图标:使用item-icon-left和item-icon-right(父级)
item-note注释 badge徽章 (说默认有右箭头,没看到。。。。)
列表按钮:item-button-right,可以在按钮里放Icon.
项目头像:本质上讲,就是比图标大一点,小于说略图。使用.item-avatar
<ul class="list">
<li class="item">
...
</li>
</ul>
//////////////////////////////////////
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
/////////////////////////////////////////////////
<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>
/////////////////////////////////////////////////
<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>
/////////////////////////////////////////////////////
<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-left item-thumbnails-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>
它可以嵌套在容器内,嵌套有点类似card,除了它没有box-shadow。它并不占有一个全屏宽度,
主要的不同是它有边距margin
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
</div>
在近几年经被广泛的使用,它有非常好的方法包含和组织信息。在小屏幕上可以达到预期的效果,很快
被各大公司使用如google等企业。
移动方面的经验:卡片很容易在不同屏幕上展示相同信息。有很多控制方式,灵活,甚至可以是
动画。虽然放在某些元素之上,但也可以像page一样安排在中间,左或者右边。
卡片默认是有box-shadow与它的堂兄弟list-inset不同,处于性能上的考虑。当有大量的滚动卡片
效果,推荐使用插图列表!
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
卡片可以在正常的屏幕上定制相同的效果,例如:卡片可以很容易的放做header和footer内部,
也可以在content中用item-divider上定义分割线;
<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>
使用list card类名,可以创建一个卡片列表;
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
</div>
图片做卡片里很好用,也能很好的结合列表和其它元素。
<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>
列表也可以跟一组表单元素相关联,item-input item用来指定每个输入字段于相关的标签!
Ionic更推荐使用item-input,这样可以在row上的任意位置上触发焦点。
除此之外,开发者也意识到H5表单类型,因此用户将会看到适当的虚拟键盘;
默认会占用百分百的宽度没有左右边框,使用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>
使用input-lable可以放置做input元素的左侧,当用户键入的时候它并不会消失。它不会
阻止你去使用一个占位符;
<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>
堆叠标签:标签总是被放置做Input之上。每个项目都有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>
浮动标签看起来像堆叠标签,除了它存在动画。或者当用户键入的时候它会漂浮到上面。
每一个项目都有item-floating-lable,表单标签将有一个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>
在列表里,默认的是input会占用其父级的百分百的宽度。然而你可以使用list-inset或者
card去嵌套。card有box-shadow list-inset没有box-shadow。除此之外如果父级有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>
使用list-inset可以嵌套做整个列表里,然后放置item-input-inset将嵌套一个input在一个独立的
list item 里面;放置一个按钮做旁边。
图标可以很容易的加进item-input的Input里,简单的在Input之前加上icon。默认文本颜色跟
label颜色一致;但是你也可以使用placeholder-icon去修改成占位符的颜色!
<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>
表单也可以被安置做头部,跟随这提交按钮或者取消表单!
<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>
跟Html中的复选框切换都一样,除了看起不同。可以很容易的放在触摸设备上。Ionic
更喜欢在input外部放一个Label为了更好的切或者拖动;
Toggle也能设计颜色,可以使用toggle-assertive
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
Checkbox跟Html里面的checkbox有一点不同,除了样式上的不同。
item-checkbox被加在item后面;Ionic喜欢做label里面加如checkbox,那样更有助于选中。
它也是可以设置颜色的,需要使用checkbox-assertive
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
</ul>
单选按钮其实跟原生的并没有什么不同,每一个item-radio下的input里面必须有一个相同的
name
radio-icon可以用来指定标识显示或者隐藏的元素。
<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>
Range是一个范围;range的主题可以是任意的一个ionic颜色。可以使用各种各样的元素,
列表项目或者卡片;
<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的多选相比比浏览器漂亮些,是根据浏览器选择的。默认的行为还是根据浏览器有关。
不同平台展示效果是不同的,例如:桌面浏览器就是一个向下的弹出框。安卓有一组单选的按钮组
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>
Tabs是一组水平的按钮或链接,在各浏览器都有一致的体验。它可以包含文本和图标。使得
在移动端是非常浏览的导航;元素应该包含一个tabs,每一个tab都将包含一个tab-item默认
没有图标只有一个文本;Tabs可以匹配标准的ionic颜色。
如果tabbar隐藏了,还显示内容。可以添加一个tabs-item-hide类。或者当你使用的时候记得加
has-tabs类。
<div class="tabs">
<a class="tab-item">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
在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>
在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>
在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>
在tabs上添加tabs-striped具有安卓风格,tabs-top定位做顶部。获取angular Striped tabs
颜色用tabs-background-{color},tabs-color-{color}这个时候要添加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>
```
##Toggle
和HTML中的复选框切换都一样,除了看起来不一样。做触摸设备上很容易使用。
在label中使用会更好的切换Toggle;
也可以分配颜色给它们,如toggle-assertive;也可以做为多列表,将item-toggle
放在没一个Item里面;
##Checkbox
它和HTML中的并没有什么不同,除了样式看起来不同。可以做一个checkboxes多列~~在
每一个item中放入一个item-checkbox;
ionic提供了<label>,这样使用它更容易。checkboxes也可以分配颜色给他们。如加入checkbox-assertive;
##Radio Button List
单选按钮跟标准的单选按钮并没有什么不同,除了样式上有所不同。
每一个item-radio不得不有一个相同的Name属性;radio-icon也是可以被指派的。去
显示或者隐藏一个图标元素;ionic提供<label>使得用起来更容易,可以做全屏上触摸;
##Range
这是一个值域,颜色可以定义为任何默认的Ionic颜色;可以使用多种元素,如列表或者卡片;
##Select
Ionic的多选相比,比浏览器漂亮些;当选择开始时,默认行为如何选择其中一个选项仍然是由
浏览器。用户选择一个选项,每个平台的用户界面会有所不同。做桌面浏览器显示默认下
拉框,Android会有单选框列表弹出,Ios有自定义照片卷轴窗口遮盖窗口的下半部;
##Tabs
一组水平组合的按钮或者链接,它能包含任何组成部分,做移动端很受欢迎的导航!
包含元素有一个tabs类名,每个tab都有一个tab-item类名。默认没有图标仅仅是文本;
一样是可以有多种颜色可以进行更改;
隐藏tabbar但仍然显示内容,添加tabs-item-hide类;
当然如果你使用tabs也可以加has-tabs类。
##Icon-only
在tabs后加tabs-icon-only
##Top Icon Tabs
添加tabs-icon-top在tabs
##Left Icon Tabs
在tabs后添加tabs-icon-left
##Striped Style
在tabs外有一个tabs-striped,可做出Android风格。加Tabs-top可以定位top,可控制颜色;
tabs-background-{color}控制背景色,tabs-color-{color} 控制字体颜色;
顶部tabs与头部混合,需要使用has-tabs-top类名;
##Grid
Ionic网格系统不大相同,因为它是用 CSS Flexible Box Layout Module标准;优势在于支持
Ionic的设备都支持 flexbox;
简单的添加行与列:它们会均匀的占用可用空间。如果你想建立一个三行就三行,五列就五列;
这里不限制使用那个12网格。或者不需要明确状态。你可以垂直的对齐做每一列的内容;
使用row惊醒指定,去支持一行。使用col去指定一列。想怎么加就怎么加,不用多想,它会自动编译的;
##Grid:Evenly Spaced Columns
默认做col里面添加row将会自动获取等量的间距,在样式内部不指定任何的大小;
##Grid:Explicit Column Sizes
你可以明确一个单元格的大小,如何你想指定某个单元格比其他它的大想同一行里。默认的是
他们都会有相同的指定有效空间。Ionic使用的网格系统是百分比(相比一个锁定12列网格)
这种网格系统的优势是,你仅仅做你需要的地方设置百分百。其它的仍然可以分割剩余的空间;
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%
##Grid: Offset Columns
单元格可以从左侧开始偏;
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%
##Grid: Vertically Align Columns
另一个技巧flexbox的套筒是能够轻易列垂直对齐,对齐包括上、中、下。可以应用的每一行的一列,
或者特定的一列。
```
或许可能出这样的现象,执行一行将不会非常适合到可选的区域;相应类可以在一行里应用;
例如:你想将一行栏做成堆栈的,当试图非常小可以使用.responsive-sm类。
进一步配置,每个类使用sass变量。可根据你的喜欢改变。可以使用responsive-grid-break混入类
来创建自己的类;
Responsive Class Break when roughly
.responsive-sm Smaller than landscape phone
.responsive-md Smaller than portrait tablet
.responsive-lg Smaller than landscape tablet