Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。
Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header。 参考Button Bars以获得更多例子。
另外,记住添加has-subheader
CSS类到你的 ion-content
directive.
在app里面,Ionic的内容区域是一个可以滚动的窗口. 当你的头部和底部都各自固定在顶和底的时候, 内容区域就会填充满其他的空白区域.
* 点击这里,查看更多有关 Content 的文档.
按钮是移动app不可或缺的一部分,就像Header一样。不同风格的app,需要的不同按钮的样式。
默认情况下,按钮显示样式为:display: inline-block
。还有block
选项可以让按钮满宽度显示。
添加button-block
到按钮使按钮以display: block
方式显示.
一个block的按钮会100%集成他的父元素的宽度.
在下面这个例子当中, 按钮包含的内容同时也应用了padding
,
所以在按钮和显示屏边框之间会有一定的空隙.
添加 button-full
到按钮不仅将应用 display: block
到按钮,
同时还将移除按钮的左右边距, 任何边框圆角也可能被应用.
当按钮需要撑满整个屏幕的时候,这种样式将非常有用.
另外, 按钮的父元素不会 有 padding
被应用..
添加 button-large
到按钮会让按钮变大, 添加 button-small
让它变小.
添加 button-outline
到按钮以应用空白背景,只有边框按钮的风格.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说
button-positive
会使文字和边框变成蓝色,背景却是透明的.
添加 button-clear
会移除按钮的边框.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说
button-positive
会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.
图标是很容易被添加到按钮什么的,无论使用Ionic图标还是第三方图标. 点击了解更多.
图标能够以子元素的形式被放在按钮内部,不过,直接把图标分配给按钮将减少DOM的数量.
For a more minimal approach to header buttons, simply add the button-clear
classname to remove the background button color and border.
我们可以使用 button-bar
类来设置按钮栏。以下实例中,我们在头部和内容中添加了按钮栏。
列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。
列表可以是基本文字、按钮,开关,图标和缩略图等。
列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。
ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。
为了实现更牛逼的效果你可以是使用Ionic's AngularJS directives. 点击 AngularJS list docs 了解更多.
* 了解更多Lists的扩展功能, 点击 AngularJS List Docs
我们可以使用 item-divider
类来为列表创建分隔符,默认情况下,列表项以不同的背景颜色和字体加粗来区分,但你也可以很容易的定制他。
我们可以在列表项的左侧或右侧指定图标。了解更多Icon相关.
使用 item-icon-left
图标在左侧,item-icon-right
设置图标在右侧。如果你需要在两边都有图标,则两个类都添加上即可。
以下实例中,我们在列表项中使用了 <a>
标签,使得每个列表项可点击。
如果使用 <a>
或者 <button>
标签, 同时又没有没有图标被添加在右侧,那么一个小小的右箭头将会被自动添加.
实例中,第一项只有左侧图标,第二项左右均有图标,第三项有右侧图标(还有注释 item-note
),第四项有 badge
(标记)元素。
使用 item-button-right
或 item-button-left
类将按钮放在列表项中。
使用 item-avatar
来创建一个带头像的列表.
item-thumbnail-left
类用于添加左侧对齐的缩略图, item-thumbnail-right
类用于添加右侧对齐的缩略图。
我们可以在容器当中内嵌列表,列表不会显示完整的宽度。
内嵌列表的样式为:list list-inset
,与常规列表区别是,它设置了外边距(marign), 类似于选项卡。
内嵌列表是没有阴影效果的,滚动时效果会更好。Inset forms 有更多例子.
近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 像 Google, Twitter, 和 Spotify..
针对移动端的应用,卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做"页"来使用,像左滑,右滑.
卡片(card)默认样式带有box-shadow(阴影),由于性能的原因,和他类似的元素像 list list-inset
并没有阴影。
如果你有很多的卡片,每个卡片都有很多子元素,建议使用内嵌列表 inset lists 。
使用 list card
类来设置卡片列表:
卡片中使用图片,效果会更好,实例如下:
以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card
元素,并使用了 item-avatar
, item-body
元素用于展示图片和文本信息,底部使用 item-divider
类。
November 05, 1955
This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of a tabs, icons aligned left, within the card-footer.
list
类同样可以用于 input 元素。item-input
和 item
类指定了文本框及其标签。
Ionic 更倾向于在元素<label>
外创建 item-input
,
这样无论任何某一行的任何部位被点击的时候都可以进入输入状态.
另外, 开发者们需要知道不同的 HTML5 Input 类型,这样就可以重现给用户不同的键盘.
以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder
属性设置输入字段预期值的提示信息。
当用户开始输入的时候Placeholder 标签就会隐藏掉, 注意正确使用 <textarea>
的多行输入.
使用 input-label
将标签放置于输入框 input 的左侧。同时你还可以使用placeholder
。
堆叠标签通常位于输入框的头部。每个选项使用 item-stacked-label
类指定。 每个输入框需要指定 input-label
。以下实例也使用了 placeholder
属性来设置信息输入提示。
浮动标签类似于 堆叠标签,但浮动标签有一个动画的效果,每个选项需要指定 item-floating-label
类,输入标签需要指定 input-label
。
默认情况下每个输入域宽度都是100%,但我们可以使用 list list-inset
或 card
类设置表单的内边距(padding), card
类带有阴影。
另外, 如果列表的父元素有 padding
那么当前元素同样会有一个内嵌的表现.
使用 list-inset
设置内嵌实体列表。 使用 item-input-inset
样式可以内嵌一个按钮。
item-input
输入框可以很简单的添加图标。 图标可以在 <input>
前添加。
默认的图标会使用label文字的颜色, 但你也可以添加placeholder-icon
来改变placeholder的颜色
输入框可放置在头部,并可添加提交或取消按钮。
切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。
切换开关可以使用 toggle-assertive
来指定颜色。
该实例有是多个切换开关列表。注意,每个选项的 item
类后需要添加 item-toggle
类。
ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大,只是样式上有所不同。 以下实例颜色了多个复选框的列表。
注意,每个选项的 item 类后需要添加 item-checkbox 类。
复选框可以使用 checkbox-assertive
来指定颜色。
ionic 当选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。
每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。
ionic 在单选项中使用了 <label>
元素,使其更易点击。
ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。
ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的,在PC电脑的浏览器上,你会看到传统的下拉界面,Android 上会弹出单选按钮选项,iOS 有个滚轮操作界面。
ionic tab(选项卡) 是水平排列的按钮或者链接,用以页面间导航的切换。它可以包含文字和图标的组合,是一种移动设备上流行的导航方法。
* 要想知道怎样创建Tab页面请看 Tabs 文档.
以下选项卡容器使用了 tabs
类,每个选项卡使用 tab-item
类。默认情况下,选项卡是文本的,并没有图标。
默认情况,选项卡颜色为default
,你可以设置以下不同颜色样式:
tabs-default
tabs-light
tabs-stable
tabs-positive
tabs-calm
tabs-balanced
tabs-energized
tabs-assertive
tabs-royal
tabs-dark
要隐藏选项卡栏,可使用 tabs-item-hide
类。 无论什么时候只要你使用tabs, 记住添加has-tabs
CSS 类到你的ion-content
.
在 tabs
类后添加 tabs-icon-only
类可设置只显示图标选项卡。
在 tabs
类后添加 tabs-icon-top
类可设置顶部图标+文字选项卡。
在 tabs
类后添加 tabs-icon-left
类可设置左侧图标+文字选项卡。
可以在带有 tabs
的样式名的元素上添加 tabs-striped
来实现像 Android 风格的 tabs。
也可以添加 tabs-top
来实现选项卡在页面顶部。
条纹选项卡颜色可通过 tabs-background-{color}
和
tabs-color-{color}
来控制, {color}
值可以是:
default
,
light
,
stable
,
positive
,
calm
,
balanced
,
energized
,
assertive
,
royal
, or
dark
注意:如果要再选项卡上设置头部标题,需要使用 has-tabs-top
类。
ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) 。 而且在移动端,基本上的手机都支持flexbox。row 样式指定行,col 样式指定列。
在row简单添加columns,columns会被平分row的空间. 如果有三列,就添加三列, 有五列就添加五列. 不像 bootstrap, ionic没有12列的限制,也没有列大小的限制. 你还可以在每个列中设置垂直居中.
row
类是用来定义行, col
是用来定义列.
在右边的demo里面,我们有4列和2列.但我们也可以用3, 6, 7, 23 等等, 不重要.
关键在于创建你想要的列,不用担心他们的占位百分比, 因为都是自动的.
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
在带有 row
的样式的元素里如果包含了 col
的样式,col
就会设置为同等大小。
以下实例中 row
的样式包含了 5 个 col
样式,每个 col
的宽度为 20%。
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
你 可以 设定一行中各个列的大小不一样。默认情况下,列都会被划分为同等大小。但你也可以按百分比来设置列的宽度(一行为 12 个网格)。
使用栅格系统的好处在于你只需要指明你需要的列占位百分比即可,其他的列就会被平均分配使用剩下的空间.
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
下面列出了指定列宽的一些百分比的样式名: | |
---|---|
.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% |
列可以设置左侧偏移量,实例如下:
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
下面列出了指定列宽的一些百分比的样式名: | |
---|---|
.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% |
弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部,中间部分,底部,可以应用到每一行的列,或者指定的某列。
实例中,最后一列设置了最高的内容用于更好的演示纵向对齐网格。
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
手持设备屏幕在切换时,例如横屏,竖屏等。就需要设置每行的网格可以实现根据不同宽度自适应大小。
不同设备响应式类的样式如下:
注意: 例子中添加了边框和灰色背景以便于能够被清晰的看到行列结构.
响应式类 | 描述 |
---|---|
.responsive-sm | 小于手机横屏 |
.responsive-md | 小于平板竖屏 |
.responsive-lg | 小于平板横屏 |
以后配置中, 每一个使用Sass变量的类都可以替换为你喜欢的样式. 你还可以使用responsive-grid-break
来创建你自己的类.
Ionic 提供了非常有用的工具类来实现快速设计
ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色。通常来说 颜色意味着重写. 我们更推崇让ionic提供一种推荐的命名约束来命名你的颜色, 样式, 主题等.
工具类颜色被用来设置命名规约. 你可能会注意到ionic有意地不使用red或者blue这些词语. 取而代之的是通过使用描述情绪或通用主题的词语.
回到现实, 设置颜色是最简单的一件事情, 不同的app对颜色有不同的要求. ionic的目标就是提供一套干净的系统用于建立在维护之上,又保持远离怎样使不同的app通过选择颜色的方式去自定义它的设计.
要自定义颜色,你只需要简单的重写 ionic.css
CSS 文件即可.
另外, 由于ionic使用了Sass, 为了达到更好的效果,你还可以找到_variables.scss
修改或扩展颜色变量.
* 为了更好的灵活性, 你还可以通过Sass自定义样式
ionic 也默认提供了许多的 图标,大概有500多个。用法也非常的简单:
只需添加 icon
和Ionicon的类名即可, Ionicon可在Ionicons此查阅.
要在按钮上面设置图标你可以给按钮添加子节点 <i>
你还可以就只是把按钮的图标设置于按钮的class上面, 点击 按钮图标 了解更多.
注意: Ionic对图标库的使用并没有过多限制,so尽情的用吧.
在Ionic当中, 许多组件的内边距,外边距都有意的被重置为了0. 许多例子告诉我们, app都需要将其组件无缝的靠近屏幕边缘. 这样开发人员也可以非常容易的控制组件的内外边距.
你可以重用padding
类来给任何元素的内容设置一定的空隙.
也就说会有一个默认的 10px
出现在控件的内容相对控件的边缘.
以下的类不需要任何元素, 但也许可以帮助你理解布局.
padding
在四周添加内边距e.
padding-vertical
添加内边距到顶和底.
padding-horizontal
添加内边距到左和右.
padding-top
添加内边距到顶.
padding-right
添加内边距到右.
padding-bottom
添加内边距到底.
padding-left
添加内边距到左.
灰色方框代表元素, 当padding
被应用时, 蓝色即代表元素的内容.