ylbtech-ionic-CSS:ionic select
1.返回顶部
1、

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>

尝试一下 »

运行效果如下:

 
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

ionic-CSS:ionic select的更多相关文章

  1. Ionic Css样式详解

    Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...

  2. Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...

  3. 稍复杂的ionic例子:显示一个列表,并且允许点击进入列表项

    这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <he ...

  4. Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构

    目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...

  5. ionic-CSS:ionic icon(图标)

    ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 ...

  6. ionic:ionic 教程

    ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...

  7. 杂项:ionic

    ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...

  8. 国内常用的三种框架:ionic/mui/framework7对比

    国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040

  9. ionic实战系列(一):ionic的开发环境配置和编译、发布

    我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ion ...

随机推荐

  1. 每天一个Linux命令:cd(2)

    cd cd命令用来切换工作目录至dirname. 其中dirName表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的home directory(也就是刚login时所在的目录).另外, ...

  2. 思维+贪心——cf1042D

    /* 首先考虑从后往前计算lis,显然0的在很多情况下的贡献要大于1 如果遇上0,那么lis++,如果遇上1,那么cnt1++,并且用cnt1更新lis 这样的贪心保证正确,因为从[i,j]这一段的l ...

  3. IReport实践指南

    IReport实践指南 前言 最近,在做一个电子签章的功能,然后就接触到IReport报表,经过好几天的摸索实践,功能已经完成了,今天来总结一下. 什么是IReport,IReport是JasperR ...

  4. mongo索引(转)

    转自  :https://www.cnblogs.com/efforts-will-be-lucky/p/7324789.html 默认索引 对于每一个集合(除了capped集合),默认会在_id字段 ...

  5. 10、jqueryEasyUI感觉自己还是改行做前端吧

    1.jquery的局部方法开发 //首先引入jquery的相关包组件 <script type="text/javascript" src="../js/jquer ...

  6. 简单介绍Collection框架的结构

    Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection  是单列集合 List   元素是有序的.可重复 有序的 collect ...

  7. URAL 1748 The Most Complex Number

    题目链接:https://vjudge.net/problem/11177 题目大意: 求小于等于 n 的最大反素数. 分析: n <= 10^18,而前20个素数的乘积早超过10^18,因此可 ...

  8. 寻找cookie之旅

    公司接口自动化,需要用到cookie.这个cookie可以从login的响应header中取到. 直接用python调这个接口,返回的响应header是这个: {'Date': 'Thu, 15 Au ...

  9. Java内存通道

    对文件执行I/O的另一种方法是将文件的一个区域映射到物理内存,并将其作为内存数组.可以使用MappedByteBuffer来执行内存映射文件I/O. 要使用内存映射文件I/O,请为文件获取FileCh ...

  10. org.apache.hadoop.hbase.master.HMasterCommandLine: Master exiting java.lang.RuntimeException: HMaster Aborted

    前一篇的问题解决了,是 hbase 下面lib 包的jar问题,之前写MR的时候加错了包,替换掉了原来的包后出现另一问题:@ubuntu:/home/hadoop/hbase-0.94.6-cdh4. ...