设为首页收藏本站

开启辅助访问

PhoneGap中文网 › › 视频教程›ionic 教程

ionic 教程

ionic中选择框 : .item-select select: 选择框 : .item-select select在每个平台上，选择框的表现形式都不一样，例如，在PC上，是一个传统的下拉框，在Android 是一个单选弹出窗，而iOS上是一个覆盖半个窗体的定制滚动器：通常总是将选择框与文字一起放入 ...; 2015-4-12 13:54

ionic中滑动条 : .range input[type="range"]: 滑动条 : .range inputrange是HTML5新引入的元素，常用来进行连续值的调节：从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。图标是可选的，当不用图标时，滑动条将占据整个宽度。在ionic中 ...; 2015-4-12 13:53

ionic中单选按钮 : .item-radio input[type="radio"]: 单选按钮 : .item-radio input单选按钮用来从一组选择中作出仅仅一个选择：正如上图所见，单选按钮的可视部件包括两部分：选中图标（.radio-icon）和描述内容（.item-content），你可以在.item-content随便添加内 ...; 2015-4-12 13:51

ionic中复选按钮: 复选框通常用来在一组列表中选中部分成员：和开关一样，复选按钮也是基于HTML的checkbox input实现的。使用如下的HTML模板声明复选按钮：any class="item-input" any class="checkbox" input type="checkbox" /any/a ...; 2015-4-12 13:49

ionic中开关 .toggle input[type="checkbox"]: 开关通常用来设置两种状态 - 开启和关闭：正如上图中所见，开关的可视部件包括两部分：滑轨（.track）和手柄（.handle）。 ionic使用如下HTML模板创建开关组件：any class="toggle" input type="checkbox" any class ...; 2015-4-12 13:48

ionic中文本输入：堆叠式标签: 文本输入：堆叠式标签堆叠式标签意味着将描述性标签占据单独的一行：使用.item-stacked-label样式声明堆叠式标签：any class="item-input item-stacked-label" any class="input-label".../any input type="text" pl ...; 2015-4-12 13:46

ionic文本输入：使用占位符做标签: 文本输入：使用占位符做标签有时可以将描述标签省略，这样可以获得一种简洁的效果：这是input元素原生的功能，设置其placeholder属性即可实现：label class="item item-input" input type="text" placeholder="labe ...; 2015-4-12 13:45

文本输入 : input[type="text"]: 文本输入 : input文本输入通常包含一个文本input元素和一个描述型标签：在ionic中，使用以下HTML模板建立一个带有文本标签的输入框：any class="item-input" span class="input-label".../span input type="text" pl ...; 2015-4-12 13:43

ionic中的输入组件容器 : .item-input: 输入组件容器 : .item-input在ionic中，各种输入组件被定义成不同的HTML模板，以便将描述标签和输入元素打包在一起。在这个模板的根元素上，需要声明.item-input样式：any class="item-input".../any不同的输入元素 ...; 2015-4-12 13:42

ionic中的buttom使用: 按钮 : .buttonionic使用.button样式定义按钮元素：any class="button".../any一旦元素应用了.button样式，就可以继续选用两类预定义样式来进一步声明元素及其内容的外观：同级样式 - 同级样式与.button应用在同一 ...; 2015-4-8 12:59

ionic .item : 嵌入大图: .item : 嵌入大图大图非常有冲击力，在图片类App中很常见：!DOCTYPE htmlhtmlhead meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height" lin ...; 2015-4-8 12:57

ionic中 .item : 嵌入缩略图: .item : 嵌入缩略图回到今日头条的新闻列表，我们给它加上两张新闻图片：在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。和插入头像类似，向.item中插入缩略图需要满足两个条件：在.item元素上声明缩 ...; 2015-4-8 12:56

ionic .item : 嵌入头像: .item : 嵌入头像很多社交App中，一个相当固定的UI模式是包含用户头像的信息列表：在ionic中，头像被设置为40x40固定大小。和插入图标类似，向.item中插入头像需要满足两个条件：在.item元素上声明头像位置。头像可 ...; 2015-4-8 12:55

ionic list .item 嵌入图标: ionic .item : 嵌入图标列表成员的内容中插入图标，比单纯的文字更加生动：要插入图标，需要满足两个条件：在.item元素上声明图标位置。图标可以位于列表的左侧或右侧，分别使用.item-icon-left和.item-icon-right ...; 2015-4-8 12:54

ionic list 下面的item 内嵌文本: ionic list 下面的item 内嵌文本列表成员中经常需要显示不同规格的文本，比如今日头条的新闻列表：.item元素可以使用h1~h6/p标签插入不同规格的文本。!DOCTYPE htmlhtmlhead meta name="viewport" content="initial- ...; 2015-4-8 12:53

123 4 / 4 页下一页

相关分类

站长推荐 /1

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )

GMT+8, 2024-4-24 00:41 , Processed in 0.034937 second(s), 16 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部