Ionic学习笔记1_基本布局

<body>

bar里嵌入子元素：title,button,button-bar和 input

<h1 class="title">Header</h1> 布局？ item-input-inset, item-input-wrapper

<input class="light-bg" type="text" placeholder="qingshuru">

</label>

</div>

<a class="button button-balanced">button1</a>

<a class="button button-clear">button2</a>

</div>

<h1 class="title">Content</h1>

</div>

<i class="icon ion-home" style="font-size:50px;"></i> 声明图标大小及位置

<a class="button button-balanced icon icon-right ion-document-text">button3</a>

<a class="button button-clear">button4</a>

</div>

</body>

1.1. .bar

标题文字 -.title样式，通常使用h1元素

按钮 -.button样式，通常使用button 或a元素作为按钮

工具栏: -.button-bar样式,使用div元素作为工具栏

1.1.1. 在.bar元素中嵌入input元素

在标题栏中嵌入搜索栏

v 在条块元素上应用.item-input-inset样式

v 将input包裹在应用.item-input-wrapper样式的元素内

</label>

</div>

</label>

1.1.2. button

按钮应用.button样式，常使button 或a元素作为按钮

嵌入图标

<button class="button button-calm button-block">Home</button> button显示成块元素

² button-block

button显示成块元素 <button class="button button-calm button-block">button-light</button>

1.2. Ionic色彩、图标和边距

前景，背景，边框及内边距偏移

内边距统一为10px

1.3. .content和.scroll-content

</div>

内容容器样式：

 .content – 相对定位

 .scroll-content - 绝对定位，内容元素占满整个屏幕

1.3.1. .hasheader

1.3.2. .ion 图标

.icon - 将元素声明为图标

.ion-{icon-name} - 声明要使用的具体图标，图标及具体名称，需要访问ionics.com

<any style="font-size:100px;"> 图标的大小：

</any>

1.3.3. .list .item

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

v 容器外观定制 .list元素

边框，缩进，阴影

v 列表外观定制 .item元素

分组，配色，边框

插入文本、徽章、图标、图像（头像、缩略图或大图）、按钮等各种样式的元素

设置图文位置排版

v 简单应用

1) .item : 嵌入文本

h1~h6/p标签插入不同规格的文本

嵌入文本、徽章

文本可扩展多行，徽章可设置背景及字

2) .item :嵌入图标

.item元素上声明图标位置。使用.item-icon-left和.item-icon-right声明

.item元素内插入图标 list-inset

3) .item : 嵌入头像

头像被设置为40x40固定大小

.item元素上声明头像位置。使用.item-avatar-left和.item-avatar-right声明

.item元素内使用img标签插入头像

4) .item : 嵌入缩略图

缩略图被定义为80px大小，比头像大，适合新闻图片。

.item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧，分别使用.item-thumbnail-left和.item-thumbnail-right声明

.item元素内使用img标签插入头像。

img标签放到.item内容的开头！

5) .item : 嵌入大图 item-image

6) .item :中使用按钮button

.item上声明按钮位置。可以位于列表的左侧或右侧，分别使用.item-button-left和.item-button-right声明

.item元素内插入按钮

v 例1文本列表(单列)。

<li class="item"> h1~h6/p标签插入不同规格的文本

<h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>

<p>中国青年报</p>

</li>

Mega Man <i class="badge positive-bg light">15</i>

</li>

Enter home address

</li>

<button class="button button-calm button-block">button-light</button>

</li>

</li>

<h2>大黄鸭在北京两个月创收超两亿元今日离京</h2>

<p>中国经营报</p>

</li>

<h2>Thomasguy</h2>

<p>真的好好吃啊...</p>

</li>

</li>

</ul>

v 例2使用 div 和 a 显示 item

<h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>

<p>中国青年报</p>

</a>

Mega Man <i class="badge positive-bg aght">15</i>

</a>

<i class="icon ion-person-stalker"></i> 图标

Friends

<span class="badge badge-assertive">0</span> 徽章

</a>

Record album

<span class="item-note"> Grammy</span> 说明

</a>

Call Ma

<button class="button button-positive"> 按钮带图标

</button>

</div>

<a class="item item-avatar" href="#"> 索罗图

<h2>Venkman</h2>

<p>Back off, man. I'm a scientist.</p>

</a>

<h2>Pretty Hate Machine</h2>

<p>Nine Inch Nails</p>

</a>

</div>

v 列表分隔符 item-divider

使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分

v 内嵌列表 list list-inset

与常规列表区别是，它设置了外边距（marign）,类似于选项卡。

内嵌列表是没有阴影效果的，滚动时效果会更好

v 例3使用分组

1.3.4. 卡片 card

针对移动端的应用，卡片会根据屏幕大小自适应大小。可以很灵活的控制卡片的显示效果，甚至实现动画效果。卡片一般放在页面顶部，当然也可以实现左右切换的功能. 卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。

. card 可以让list和左右有一些边距

. item-divider元素定义list的头和尾

I'm a Header in a Card!

</div>

This is a basic Card with some text.

Enter home address

</a>

Enter phone number

</a>

Enter wireless password

</a>

</div>

I'm a Footer in a Card!

</div>

卡片展现

开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。

<h2>Marty McFly</h2>

<p>November 05, 1955</p>

</div>

<p>

菜鸟教程 -- 学的不仅是技术，更新梦想！<br>

菜鸟教程 -- 学的不仅是技术，更新梦想！

</p>

<p>

</p>

</div>

<i class="icon ion-thumbsup"></i>喜欢

</a>

<i class="icon ion-chatbox"></i> Comment

</a>

<i class="icon ion-share"></i> 分享

</a>

</div>

1.3.5. 表单输入

list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签

1) item item-input

<input type="text" placeholder="请输入您的用户名"> placeholder 属性设置输入字段预期值的提示信息

</label>

<label class="item item-input item-stacked-label"> item-stacked-label堆叠标签通常位于输入框的头部

<span class="input-label">Email</span> 输入框属性：input-label

</label>

<label class="item item-input item-floating-label"> item-floating-label浮动标签类似于堆叠标签，有一个动画的效果

<span class="input-label">First Name</span>

</label>

</label>

内嵌表单

默认情况下每个输入域宽度都是100%，使用 list list-inset 或 card 类设置表单的内边距(padding)， card 类带有阴影。

<i class="icon ion-search placeholder-icon"></i> 带图标的输入框

</label>

</div>

内嵌输入域

使用 list-inset 设置内嵌实体列表。使用 item-input-inset 样式可以内嵌一个按钮。

</label>

<button class="button button-small"> Submit </button>

</div>

头部输入框

输入框可放置在头部，并可添加提交或取消按钮。

</label>

取消

</button>

</div>

2) ionic Toggle(切换开关)

切换开关类似与 HTML 的 checkbox 标签，切换开关可以使用 toggle-assertive 来指定颜色。

</div>

</label>

该实例有是多个切换开关列表。注意，每个选项的 item 类后需要添加 item-toggle 类。

字符计数

</div>

</label>

</li>

</ul>

3) ionic checkbox（复选框）

和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。

每个选项的 item 类后需要添加 item-checkbox 类。可以使用 checkbox-assertive 来指定颜色。

</label>

记住密码

</li>

</label>

<h2>Shopping</h2>

</li>

</ul>

4) ionic 单选框

ionic 当选按钮与标准 type="radio" 的 input元素类似。

每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。

ionic 在单选项中使用了 <label> 元素，使其更易点击。

<div class="item item-divider"><b>请选择支付方式</b></div>

<div class="item-content">支付宝客户端支付</div>

</label>

<div class="item-content">支付宝网页支付</div>

</label>

</div>

5) ionic Range

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。可以在许多种元素里使用它比如列表或者 Card 。

</div>

<div class="item item-divider">铃声和提醒</div>

</div>

6) ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。

在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。

<option>JavaScript</option>

</select>

</label>

<div class="input-label"> Lightsaber </div>

<option selected="">Green</option>

</select>

</div>

1.3.6. 选项卡 : .tabs

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可包含文字和图标的组合

选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。默认情况，选项卡颜色为默认，可设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。要隐藏选项卡栏，可使用 tabs-item-hide 类。

<ul class="tabs tabs-positive"> tabs-top

<li class="tab-item active">Chinese</li>

<li class="tab-item">English</li>

<li class="tab-item">Japanese</li>

<li class="tab-item">Russian</li>

</ul>

tabs-icon-top顶部图标+文字选项卡。tabs-icon-only可设置只显示图标选项卡,ttabs-icon-left 类可设置左侧图标+文字选项卡。

<i class="icon ion-ios-home-outline"></i>首页

</a>

<i class="icon ion-ios-email-outline"></i>信息

</a>

<i class="icon ion-ios-eye-outline"></i>发现

</a>

</div>

条纹样式选项卡

在带有 tabs 的样式名的元素上添加 tabs-striped 来实现像 Android 风格的 tabs。也可以添加 tabs-top 来实现选项卡在页面顶部。

条纹选项卡颜色可通过 tabs-background-{color} 和 tabs-color-{color} 来控制， {color} 值可以是：default, light, stable, positive, calm, balanced, energized, assertive, royal, 或 dark。

注意：如果要再选项卡上设置头部标题，需要使用 has-tabs-top 类。

<i class="icon ion-ios-telephone"></i> Test

</a>

<i class="icon ion-ios-clock"></i> Favorites

</a>

</div>

1.3.7. Grid布局

它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。

同等大小网格

带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。如 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。

</div>

<div class="col col-33 positive-bg">.col</div>指定列宽

<div class="col col-33 col-offset-33 dark-bg">.col</div> 列可以设置左侧偏移量

</div>

纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。

<div class="row row-top "> row-center row-bottom

</div>

<br>你好

</div>

</div>

</div>

响应式网格

手持设备屏幕在切换时，例如横屏，竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。

.responsive-sm 小于手机横屏

.responsive-md 小于平板竖屏

.responsive-lg 小于平板横屏

</div>