ionic[select][tabs]

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
 6     <title>ionic应用</title>
 7     <link rel="stylesheet" href="css/ionic.min.css"/>
 8 </head>
 9 <body>
10
11 <div class="list">
12     <label class="item item-input item-select">
13         <div class="input-label">
14             Lightsaber
15         </div>
16         <select>
17             <option>Blue</option>
18             <option selected>Green</option>
19             <option>Red</option>
20         </select>
21     </label>
22 </div>
23
24 <div class="tabs tabs-positive tabs-icon-left">
25     <a class="tab-item">
26         <i class="icon ion-home"></i>
27         Home
28     </a>
29     <a class="tab-item">
30         <i class="icon ion-star"></i>
31         Favorites
32     </a>
33     <a class="tab-item">
34         <i class="icon ion-gear-a"></i>
35         Settings
36     </a>
37 </div>
38
39 <script src="js/ionic.bundle.min.js"></script>
40 <script>
41
42 </script>
43
44 </body>
45 </html>
时间: 2024-10-11 20:39:14

ionic[select][tabs]的相关文章

在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova的优点就是插件多,ionic的优点是UI漂亮并且性能是目前hybird框架中最好的,本文涉及到的技术为作者所用,简述meteor+cordova+ionic的整合方法. 1,创建项目 meteor create projectName cd [projectName] meteor add urigo:angular meteor add

ionic的tabs

<ion-tabs class="tabs-icon-top/bottom(决定这个tabs是置于上面还是底部)  tabs-color-active-positive(图标与字体色) tabs-balanced(选项卡总的一横栏背景色)" > <ion-tab title="tab1(tab上显示tab文字)"  icon-on="点击时出现的图标"  icon-off="取消点击时出现的图标" href=

ionic隐藏tabs方法

1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}" class="tabs-icon-only"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive: var module = angular.module('app.directives', []); module.directive('hideTabs', funct

Ionic android 底部tabs

ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 1 .config(function($ionicConfigProvider) { 2 $ionicConfigProvider.tabs.position('bottom'); 3 })

Ionic学习笔记1_基本布局

<body> <!-- 头部 -->                               bar里嵌入子元素:title,button,button-bar和 input <div class="bar bar-header bar-dark item-input-inset"> <h1 class="title">Header</h1>                      布局?  item

ionic安装及测试

官方教程: http://ionicframework.com/getting-started/ 官方教程写得比较简单,简单来说就是 1)安装nodejs(安装方法:http://www.cnblogs.com/tujia/p/5993852.html) 2)利用nodejs的npm包管理器安装 cordova 和 ionic,命令如下 npm install -g cordova ionic 附:上面安装可能会失败,因为安装cordova 和 ionic 时要下载的东西大多需要FQ才能下载,如

[转]Ionic系列——CodePen上的优秀Ionic_Demo

本文转自:http://my.oschina.net/u/1416844/blog/514361?fromerr=bbFC5JIl 案例网站 Slidebox with Dynamic Slides Ionic UL search example Ionic Accordian ion-affix performance demo (就是这个栏目下的标题一直显示在最上面) Button Bar as Top Tabs FAB Menu Tab layout - view content gap

4、easyUI-七种布局(layout)

1.为网页创建边框布局 边框布局(border layout)提供五个区域:east.west.north.south.center.以下是一些通常用法: north 区域可以用来显示网站的标语. south 区域可以用来显示版权以及一些说明. west 区域可以用来显示导航菜单. east 区域可以用来显示一些推广的项目. center 区域可以用来显示主要的内容. <html> <head> <meta http-equiv="Content-Type"

使用Visual Studio 2015 编写 MASM 汇编程序!

原文地址:http://kipirvine.com/asm/gettingStartedVS2015/index.htm#CreatingProject Getting Started with MASM and Visual Studio 2015 Updated 10/3/2016 This tutorial assumes that you are using the Seventh Edition of Assembly Language for x86 Processors. We s