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

ionic 卡片

近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。

针对移动端的应用,卡片会根据屏幕大小自适应大小。

我们可以很灵活的控制卡片的显示效果,甚至实现动画效果。

卡片一般放在页面顶部,当然也可以实现左右切换的功能。

<div class="card">
<div class="item item-text-wrap">
基本卡片,包含了文本信息。
</div>
</div>

尝试一下 »

卡片(card)默认样式带有box-shadow(阴影),由于性能的原因,和他类似的元素像 list list-inset 并没有阴影。

如果你有很多的卡片,每个卡片都有很多子元素,建议使用内嵌列表(inset list)。


卡片的头部与底部

我们可以通过添加 item-divider 类为卡片添加头部与底部:

<div class="card">
<div class="item item-divider">
卡片头部!
</div>
<div class="item item-text-wrap">
基本卡片,包含了文本信息。
</div>
<div class="item item-divider">
卡片底部!
</div>
</div>

尝试一下 »


卡片列表

使用 list card 类来设置卡片列表:

<div class="list card">

  <a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a> <a href="#" class="item item-icon-left">
<i class="icon ion-ios-telephone"></i>
Enter phone number
</a> <a href="#" class="item item-icon-left">
<i class="icon ion-wifi"></i>
Enter wireless password
</a> <a href="#" class="item item-icon-left">
<i class="icon ion-card"></i>
Enter card information
</a> </div>

尝试一下 »


带图片卡片

卡片中使用图片,效果会更好,实例如下:

<div class="list card">

  <div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div> <div class="item item-image">
<img src="cover.jpg">
</div> <a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a> </div>

尝试一下 »

运行效果如下:


卡片展现

以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素,并使用了 item-avatar , item-body 元素用于展示图片和文本信息,底部使用 item-divider 类。

<div class="list card">

  <div class="item item-avatar">
<img src="mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div> <div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!<br>
菜鸟教程 -- 学的不仅是技术,更是梦想!
</p>
<p>
<a href="#" class="subdued">1 喜欢</a>
<a href="#" class="subdued">5 评论</a>
</p>
</div> <div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
喜欢
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
评论
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
分享
</a>
</div> </div>

尝试一下 »

运行效果如下:

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

ionic-CSS:ionic 卡片的更多相关文章

  1. Ionic Css样式详解

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

  2. ionic:ionic 教程

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

  3. Ionic -- css

    Header 固定在头部,可以包含标题标签,可以有左右按钮 样式:bar bar-header bar-light 第一个小节 第二个表示的是头部 第三个表示颜色 子头部,需要在ion-content ...

  4. [Ionic] Align and Size Text with Ionic CSS Utilities

    The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when ...

  5. ionic之$ionicGesture手势(大坑)

    鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称 ...

  6. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  7. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  8. [转]Cordova + Ionic in Visual Studio - 101 Tutorial [Part I]

    本文转自:http://binarylies.ghost.io/cordova-ionic-in-visual-studio/ Hi everyone, I thought about lending ...

  9. Mobile first! Wijmo 5 + Ionic Framework之:Hello World!

    本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World. Ionic是什么? Ionic是一个HTML5框架.免费.开源,用于帮助生成hy ...

  10. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

随机推荐

  1. 深入理解Magento - 第六章 - 高级Magento模型

    我们讲过Magento有两种模型,简单模型和EAV(Entity Attribute Value)模型.上一章我们讲过所有的Magento模型都是继承自Mage_Core_Model_Abstract ...

  2. Shell基础(四):字符串截取及切割、字符串初值的处理、基使用Shell数组、expect预期交互、使用正则表达式

    一.字符串截取及切割 目标: 使用Shell完成各种Linux运维任务时,一旦涉及到判断.条件测试等相关操作时,往往需要对相关的命令输出进行过滤,提取出符合要求的字符串. 本案例要求熟悉字符串的常见处 ...

  3. Service3

    RAID阵列概述• 廉价冗余磁盘阵列– 通过硬件/软件技术,将多个较小/低速的磁盘整合成一个大磁盘– 阵列的价值:提升I/O效率.硬件级别的数据冗余– 不同RAID级别的功能.特性各不相同 ##### ...

  4. 跨域解决方法之window.name

    window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window ...

  5. ionic学习使用笔记(一) 版本更新及创建项目时遇到的问题解决

    最近开始用ionic开发项目,虽然去年的时候用ionic 2.0 开发过公司的项目,不过现在的ionic已经升级到了ionic framework 3.0 了.而且还有个 ionic-cli . 使用 ...

  6. P1523 旅行商简化版

    P1523 旅行商简化版 题目背景 欧几里德旅行商(Euclidean Traveling Salesman)问题也就是货郎担问题一直是困扰全世界数学家.计算机学家的著名问题.现有的算法都没有办法在确 ...

  7. vscode 编写Python走过的坑

    1,在使用vscode 中import turtle 这个模块, 再调用t = turtle.Pen(),始终提示无法找到turtle模块 2.可是使用terminal 中调用turtle模块,没有问 ...

  8. [转] Linux下编写脚本实现Daemon

    在Linux(以Redhat Linux Enterprise Edition 5.3为例)下,有时需要编写Service.Service也是程序,一般随系统启动用户不干预就不退出的程序,可以称为Se ...

  9. 2 USB标准请求

    2 USB标准设备请求的结构 2.1 标准请求 bmRequestType 的D6~D5为00的请求,USB协议定义了11个标准请求(bRequest),其名字与相应的bRequest的值如下表: 表 ...

  10. C++变长参数

    如果C++的变长参数经过了多轮的调用,就可能失去作用 间接引址,但是只能引用到第一个变长参数. va_list marker;   va_start(marker, format); s_logger ...