ionic-CSS:ionic select
ylbtech-ionic-CSS:ionic select |
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.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
ionic-CSS:ionic select的更多相关文章
- Ionic Css样式详解
Header是固定在屏幕顶部的组件.可以包含如标题和左右的功能按钮.Sub Header同样是固定在顶部,只是是在Header的下面,就算没有写Header这个,Sub Header这个样式也会距离顶 ...
- Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...
- 稍复杂的ionic例子:显示一个列表,并且允许点击进入列表项
这个例子,按照MVC的方式进行了分层,下面是代码: demo3.htm <!DOCTYPE html> <html ng-app="app"> <he ...
- Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构
目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...
- ionic-CSS:ionic icon(图标)
ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 ...
- ionic:ionic 教程
ylbtech-ionic:ionic 教程 1.返回顶部 1. ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framew ...
- 杂项:ionic
ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...
- 国内常用的三种框架:ionic/mui/framework7对比
国内常用的三种框架:ionic/mui/framework7对比 原文连接:http://zhihu.com/question/19558750/answer/91179040
- ionic实战系列(一):ionic的开发环境配置和编译、发布
我的ionic实战系列是基于<<Ionic实战>>[美]Jeremy Wilken著-这本书的读书笔记,有诸多借鉴,不详细的地方请参考书籍本身的内容. 1.1技术栈模型 Ion ...
随机推荐
- Java Http POST/GET 情求
POST: //返回体 public static final String RESPONCE_BODY = "responceBody"; //URL public static ...
- redis-config.properties属性资源文件
redis.host=192.168.200.128redis.port=6379redis.pass=redis.database=0redis.maxIdle=300redis.maxWait=3 ...
- 数据结构学习笔记——顺序数组2
接着昨天的数组操作,数组初始化好了,我们要往里面添加元素,可以在尾部追加或者插入,刚开始数组为空,所以先追加 int AppendList(SqList* pArr, ElemType val) { ...
- psql内部命令及对应sql语句
\?: 查看所有帮助 \l: 查看所有数据库 SELECT d.datname as "Name", pg_catalog.pg_get_userbyid(d.da ...
- Ubuntu下安装Samba服务器
闲来无聊尝试自己安装下Samba服务器,使本机和虚拟机可以无障碍传输文件(虽然用VMwaretools可传,但总感觉麻烦,而且速度欠佳) 首先,同安装qemu一样,在安装之前要确定你的系统apt列表已 ...
- hexo next主题深度优化(一),加入pjax功能。
文章目录 背景: 进入正题 pjax初体验--instantclick 真正的pjax 第一步 第二步 第三步 第四步 专门基于hexo next主题的pjax(将丢失的js效果重现) 将下面讲到的提 ...
- 使用Netfilter进行数据包分析
#include <linux/init.h>#include <linux/module.h>#include <linux/skbuff.h>#include ...
- Codeforces 1183A Nearest Interesting Number
题目链接:http://codeforces.com/problemset/problem/1183/A 题意:求不小于 a 且每位数和能被 4 整除的 最小 n 思路:暴力模拟就好. AC代码: # ...
- python接口自动化(post请求)
python接口自动化(post请求) 一.post请求的作用:新增资源 二.data格式的参数请求(data是字典对象) #1.导包 import requests #2.调用post方法 #请求的 ...
- Kettle 中的循环
说道循环,小伙伴们肯定不陌生,就是重复干一件事:而kettle中的循环一般是发生在job中,因为job是串行执行的: kettle的循环有两种,一种是通过js脚本,另外一种是通过遍历前面步骤返回的每一 ...