ionic Range(滑块块件)+select+tab(选项卡

作者: hx永恒之恋 | 来源:发表于2016-12-16 18:16 被阅读496次

ionic Range(滑块块件)+select+tab(选项卡
ionic——彩色range
ionic-CSS：Tabs(选项卡)
ionic 学习笔记之选项卡、网格
Ionic3常见问题
【Appetite】ionic3实录（四）微调Segment，并
ionic 左滑删除组件
iOS解决嵌套在ScrollView中的TableView滑动手
Cordova 拍照、上传图片到服务器
ionic 加载动画+选项卡栏操作

ionic Range

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

<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" style="margin-top: 13px"> 
  <div class="item item-divider"> 
    Ranges In A List 
  </div> 
  <div class="item range range-positive"> 
    <i class="icon ion-ios-sunny-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="12"> 
    <i class="icon ion-ios-sunny"></i> 
  </div> 
  <div class="item range range-calm"> 
    <i class="icon ion-ios-lightbulb-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="25"> 
    <i class="icon ion-ios-lightbulb"></i> 
  </div> 
  <div class="item range range-balanced"> 
    <i class="icon ion-ios-bolt-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="38"> 
    <i class="icon ion-ios-bolt"></i> 
  </div> 
  <div class="item range range-energized"> 
    <i class="icon ion-ios-moon-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="50"> 
    <i class="icon ion-ios-moon"></i> 
  </div> 
  <div class="item range range-assertive"> 
    <i class="icon ion-ios-partlysunny-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="63"> 
    <i class="icon ion-ios-partlysunny"></i> 
  </div> 
  <div class="item range range-royal"> 
    <i class="icon ion-ios-rainy-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="75"> 
    <i class="icon ion-ios-rainy"></i> 
  </div> 
  <div class="item range range-dark"> 
    <i class="icon ion-ios-lightbulb-outline"></i> 
    <input type="range" name="volume" min="0" max="100" value="88"> 
    <i class="icon ion-ios-lightbulb"></i> 
  </div>
</div>

尝试一下 »

运行效果如下：

[点击查看效果 » ](http://www.runoob.com/try/tryit.php?filename=ionic_item-range)

ionic select

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。
每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。
实例

<div class="list"> 

  <div class="item item-input item-select"> 
    <div class="input-label"> 
      Lightsaber 
    </div> 
    <select> 
      <option>Blue</option> 
      <option selected="">Green</option> 
      <option>Red</option> 
    </select> 
  </div> 

  <div class="item item-input item-select"> 
    <div class="input-label"> 
      Fighter 
    </div> 
    <select> 
      <option>ARC-170</option> 
      <option>A-wing</option> 
      <option>Delta-7</option> 
      <option>Naboo N-1</option> 
      <option>TIE</option> 
      <option selected="">X-wing</option> 
      <option>Y-wing</option> 
    </select> 
  </div> 

  <div class="item item-input item-select"> 
    <div class="input-label"> 
      Droid 
    </div> 
    <select> 
      <option>2-1B</option> 
      <option>B1</option> 
      <option>C-3PO</option> 
      <option>IG-88</option> 
      <option>IT-O</option> 
      <option selected="">R2-D2</option> 
    </select> 
  </div> 

  <div class="item item-input item-select"> 
    <div class="input-label"> 
      Planet 
    </div> 
    <select> 
      <option>Alderaan</option> 
      <option selected="">Dagobah</option> 
      <option>Felucia</option> 
      <option>Geonosis </option> 
      <option>Hoth</option> 
      <option>Kamino</option> 
      <option>Mygeeto</option> 
      <option>Naboo</option> 
      <option>Tataouine</option> 
      <option>Utapau</option> 
      <option>Yavin</option> 
    </select> 
  </div>

</div>

尝试一下 »

运行效果如下：

[点击实验效果 » ](http://www.runoob.com/try/tryit.php?filename=ionic_item-select)

ionic tab(选项卡)

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。
以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。
实例

<div class="tabs"> 
  <a class="tab-item"> 
    主页 
  </a> 
  <a class="tab-item"> 
    收藏 
  </a> 
  <a class="tab-item"> 
    设置 
  </a>
</div>

尝试一下 »

默认情况，选项卡颜色为默认，你可以设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-stable ，tabs-positive ，tabs-calm ，tabs-balanced ，tabs-energized ，tabs-assertive ，tabs-royal ，tabs-dark。
要隐藏选项卡栏，可使用 tabs-item-hide 类。

图标选项卡

在 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" href="#"> 
    <i class="icon ion-home"></i> 
    主页 
  </a> 
  <a class="tab-item" href="#"> 
    <i class="icon ion-star"></i> 
    收藏 
  </a> 
  <a class="tab-item" href="#"> 
    <i class="icon ion-gear-a"></i> 
    设置 
  </a>
</div>

尝试一下 »

左侧图标+文字选项卡

在 tabs 类后添加 tabs-icon-left 类可设置左侧图标+文字选项卡。

<div class="tabs tabs-icon-left"> 
  <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-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 类。

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

尝试一下 »

运行效果如下：

[点击实验效果 » ](http://www.runoob.com/try/tryit.php?filename=ionic_tabs-striped)

ionic 网格(Grid)

ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。

同等大小网格

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

<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

尝试一下 »

指定列宽

你可以设定一行中各个列的大小不一样。默认情况下，列都会被划分为同等大小。但你也可以按百分比来设置列的宽度（一行为 12 个网格）。

<div class="row"> 
  <div class="col col-50">.col.col-50</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>
<div class="row"> 
  <div class="col col-75">.col.col-75</div> 
  <div class="col">.col</div>
</div>
<div class="row"> 
  <div class="col">.col</div> 
  <div class="col col-75">.col.col-75</div>
</div>
<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

尝试一下 »

注意：实例中，每个 col 样式会自动添加上边框和灰色背景。
下面列出了指定列宽的一些百分比的样式名:

Paste_Image.png

有偏移量的网格

列可以设置左侧偏移量，实例如下：

<div class="row"> 
  <div class="col col-33 col-offset-33">.col</div> 
  <div class="col">.col</div>
</div>
<div class="row"> 
  <div class="col col-33">.col</div> 
  <div class="col col-33 col-offset-33">.col</div>
</div>
<div class="row"> 
  <div class="col col-33 col-offset-67">.col</div>
</div>

尝试一下 »

下面是一些百分比的偏移量样式名：

纵向对齐网格

弹性盒子模型可以很容易设置列纵向对齐。纵向对齐包含顶部，中间部分，底部，可以应用到每一行的列，或者指定的某列。
实例中，最后一列设置了最高的内容用于更好的演示纵向对齐网格。

<div class="row"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row"> 
  <div class="col col-top">.col</div> 
  <div class="col col-center">.col</div> 
  <div class="col col-bottom">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-top"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-center"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>     
  <div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-bottom"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">1<br>2<br>3<br>4</div>
</div>

尝试一下 »

响应式网格

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

响应式类	描述
.responsive-sm	小于手机横屏
.responsive-md	小于平板竖屏
.responsive-lg	小于平板横屏

<div class="row responsive-sm"> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div> 
  <div class="col">.col</div>
</div>

尝试一下 »

ionic 颜色

ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。

<ul class="list color-list-demo"> 
      <li class="item dark"> 
        light 
        <span class="color-demo light-bg light-border"></span> 
      </li> 
      <li class="item stable-dark"> 
        stable 
        <span class="color-demo stable-bg stable-border"></span> 
      </li> 
      <li class="item positive"> 
        positive 
        <span class="color-demo positive-bg positive-border"></span> 
      </li> 
      <li class="item calm"> 
        calm 
        <span class="color-demo calm-bg calm-border"></span> 
      </li> 
      <li class="item balanced"> 
        balanced 
        <span class="color-demo balanced-bg balanced-border"></span> 
      </li> 
      <li class="item energized"> 
        energized 
        <span class="color-demo energized-bg energized-border"></span> 
      </li> 
      <li class="item assertive"> 
        assertive 
        <span class="color-demo assertive-bg assertive-border"></span> 
      </li> 
      <li class="item royal"> 
        royal 
        <span class="color-demo royal-bg royal-border"></span> 
      </li> 
      <li class="item dark"> 
        dark 
        <span class="color-demo dark-bg dark-border"></span> 
      </li>
</ul>

尝试一下 »

实例运行结果：

Paste_Image.png

ionic icon(图标)

ionic 也默认提供了许多的图标，大概有500多个。用法也非常的简单：

<i class="icon ion-star"></i>

图标列表如下：(点击进入查看详细图标)
以下是部分图示：

ionic Range(滑块块件)+select+tab(选项卡
ionic Range ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式...
ionic——彩色range
.range input{background:-webkit-gradient(linear,50%0%,50%...
ionic-CSS：Tabs(选项卡)
Tabs(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和...
ionic 学习笔记之选项卡、网格
简介 ionic tab(选项卡、切换标签) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标...
Ionic3常见问题
1. ionic3中隐藏子页面tabs选项卡第一种: 隐藏全部子页面的tabs选项界面. 找到app.modu...
【Appetite】ionic3实录（四）微调Segment，并
再次观察UI设计效果图，里面用的比较多的是这种样式的选项卡：用ionic3来实现就是采用segment组件。其中...
ionic 左滑删除组件
html代码： {{item.title}} ...
iOS解决嵌套在ScrollView中的TableView滑动手
在项目开发中用到了这种需求，顶部两个选项卡，底部列表有侧滑手势，布局是就不说了，遇到的问题是左滑的时候添加滑动手势...
Cordova 拍照、上传图片到服务器
1 、Ionic 调用 cordova 件插件 cordova-plugin-file-transfer 实...
ionic 加载动画+选项卡栏操作
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载...