腊月的季节

ionic总结二

发表于 | 分类于 ， | | 阅读次数

ionic css定义头部

Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。

1
2
3
4
<!--bar-lignt-->
<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
</div>

颜色主要有bar-lignt,bar-stable,bar-positive,bar-calm,bar-balanced,bar-energized,bar-assertive,bar-royal,bar-dark.
Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header。

1
2
3
4
5
6
<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

另外,记住添加has-subheader CSS类到你的 ion-content directive.

ionic css定义内容

在app里面,Ionic的内容区域是一个可以滚动的窗口. 当你的头部和底部都各自固定在顶和底的时候, 内容区域就会填充满其他的空白区域.

ionic css底部

Footer 是在屏幕的最下方，可以包含多种内容类型。

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

此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:

1
2
3
<div class="bar bar-footer">
  <button class="button button-clear pull-right">Right</button>
</div>

ionic css按钮

默认情况下，按钮显示样式为：display: inline-block。还有block选项可以让按钮满宽度显示。

1
2
3
<button class="button">
  Default
</button>

按钮的样式有button-light,button-stable,button-positive,button-calm,button-balanced,button-energized,button-assertive,button-royal,button-dark.

BlockButtons
添加button-block到按钮使按钮以display: block方式显示. 一个block的按钮会100%集成他的父元素的宽度. 在下面这个例子当中, 按钮包含的内容同时也应用了padding, 所以在按钮和显示屏边框之间会有一定的空隙.

1
2
3
<button class="button button-block button-positive">
  Block Button
</button>

Full Width Block Buttons(满宽度显示按钮)
添加 button-full 到按钮不仅将应用 display: block到按钮, 同时还将移除按钮的左右边距, 任何边框圆角也可能被应用. 当按钮需要撑满整个屏幕的时候,这种样式将非常有用. 另外, 按钮的父元素不会 有 padding 被应用.

1
2
3
<button class="button button-full button-positive">
  Full Width Block Button
</button>

Different Sizes(不同大小的按钮)
添加 button-large 到按钮会让按钮变大, 添加 button-small 让它变小.

1
2
3
4
5
6
<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>

Outlined Buttons(只有边框的按钮)
添加 button-outline 到按钮以应用空白背景,只有边框按钮的风格.
注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说 button-positive 会使文字和边框变成蓝色,背景却是透明的.

1
2
3
<button class="button button-outline button-positive">
  Outlined Button
</button>

Clear Buttons(干净的按钮)
添加 button-clear 会移除按钮的边框.

注意: 按钮文字和边框颜色会使用按钮的颜色样式,就是说 button-positive 会使文字的颜色变成蓝色,蓝色背景也将会被无边框取代.

Icon Buttons(图标按钮)
图标能够以子元素的形式被放在按钮内部,不过,直接把图标分配给按钮将减少DOM的数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button class="button">
  <i class="icon ion-loading-c"></i> Loading...
</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>

Button in Headers(头部/底部添加按钮)

1
2
3
4
5
<div class="bar bar-header">
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</div>

清除按钮边框

1
2
3
4
5
<div class="bar bar-header">
  <button class="button button-icon icon ion-navicon"></button>
  <div class="h1 title">Header Buttons</div>
  <button class="button button-clear button-positive">Edit</button>
</div>

Button Bar(按钮栏)
我们可以使用 button-bar 类来设置按钮栏。以下实例中，我们在头部和内容中添加了按钮栏。

1
2
3
4
5
<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>

ionic css列表

列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。

列表可以是基本文字、按钮，开关，图标和缩略图等。

列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。

ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。

1
2
3
4
5
<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

List Dividers(列表分隔符)
我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

List Icons(带图标列表)
我们可以在列表项的左侧或右侧指定图标。
使用 item-icon-left图标在左侧，item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。

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
<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-ios-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>

List Buttons(按钮列表)
使用 item-button-right 或 item-button-left 类将按钮放在列表项中。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

Item Avatars(带头像列表)
使用 item-avatar 来创建一个带头像的列表.

1
2
3
4
5
6
7
8
9
10
11
<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(缩略图列表)
item-thumbnail-left 类用于添加左侧对齐的缩略图， item-thumbnail-right 类用于添加右侧对齐的缩略图。

1
2
3
4
5
6
7
8
9
10
11
<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>

Inset Lists(内嵌列表)
我们可以在容器当中内嵌列表，列表不会显示完整的宽度。 内嵌列表的样式为：list list-inset，与常规列表区别是，它设置了外边距（marign）, 类似于选项卡。 内嵌列表是没有阴影效果的，滚动时效果会更好。

1
2
3
4
5
6
7
8
9
<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

Cards(卡片)
卡片会根据屏幕大小自适应大小,甚至还可以有动画效果.卡片通常被放在在另一个之上, 但它们也可以被当做”页”来使用,像左滑,右滑.

1
2
3
4
5
<div class="card">
  <div class="item item-text-wrap">
    This is a basic Card which contains an item that has wrapping text.
  </div>
</div>

卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。 如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表 inset lists 。
Card Headers and Footers(卡片的头部与底部)
我们可以通过添加 item-divider 类为卡片添加头部与底部： 添加带 item-divider 类的 card 的元素在内容区域的上方或者下方.

1
2
3
4
5
6
7
8
9
10
11
<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>

Card Lists(卡片列表)
使用 list card 类来设置卡片列表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

Card Images(带图片卡片)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

Card Showcase(卡片展现)
以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      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 tabs, icons aligned left, within the card-footer.
    </p>
    <p>
      <a href="#" class="subdued">1 Like</a>
      <a href="#" class="subdued">5 Comments</a>
    </p>
  </div>

</div>

ionic css表单和输入框

热评文章