文档章节

ionic样式学习(一)

龙马行空
 龙马行空
发布于 2015/06/13 10:28
字数 1666
阅读 1075
收藏 13
点赞 0
评论 0

1、定高条块:.bar

样式.bar将元素声明为屏幕上绝对定位块状区域,具有 固定的高度(44px):

2、.bar : 位置

ionic使用以下样式定义条块的位置:

  • .bar-header - 置顶

  • .bar-subheader - header之下置顶

  • .bar-footer - 置底

  • .bar-subfooter - footer之上置底

在腾讯新闻App中,你可以看到,使用了三个条块:标题、副标题、页脚:

<div class="bar bar-subheader bar-stable">
        <div class="button-bar">
            <a class="button button-balanced">要闻</a>
            <a class="button button-clear">财经</a>
            <a class="button button-clear">娱乐</a>
            <a class="button button-clear">体育</a>
            <a class="button button-clear">科技</a>
        </div>
    </div>

bar-stable可以让文字颜色加深

3、标题栏搜索框.bar中加入input

<body class="stable-bg">
    <div class="bar bar-header bar-energized item-input-inset">
          <a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
        <label class="item-input-wrapper">
            <input type="text" placeholder="输入商户名搜索">
        </label>
    </div>
    <div class="bar bar-footer bar-dark">
    </div>
</body>

.bar元素中嵌入input元素,需要注意两点:

  1. 在条块元素上应用.item-input-inset样式

  2. 将input包裹在应用.item-input-wrapper样式的元素内

这是因为,在ionic的实现中,.bar中的.input样式定义如下:

.bar.item-input-inset{    .item-input-wrapper{        .input{            ...        }    }}


4、内容:.content和.scroll-content

ionic预定义了两个内容容器样式:

  • .content - 流式定位,内容元素在文档流中按顺序定位

  • .scroll-content - 绝对定位,内容元素占满整个屏幕

这两种样式都可以使用以下样式进一步确定位置及范围:

.content



<body class="stable-bg">
    <div class="bar bar-header">
        <h1 class="title">.bar .bar-header</h1>
    </div>
    <div class="scroll-content has-header balanced-bg light">
        <p>This is a demo!</p>
        <p>Can you see this line?</p>
    </div>
    <div class="bar bar-footer">
        <h1 class="title">.bar .bar-footer</h1>
    </div>
</body>

去掉scroll-content的效果


去掉has-header的效果

5、色彩


6、图标

ionic使用ionicons图标样式库。ionicons采用了TrueType字体实现图标样式,有超过500个图标可供选择。

使用图标很简单,在元素上声明以下两个CSS类即可:

  • .icon - 将元素声明为图标

  • .ion-{icon-name} - 声明要使用的具体图标

通常使用i元素定义图标,例如下面声明了元素显示ion-home图标:

<i class="icon ion-home"></i>

要了解有哪些图标及具体名称,需要访问ionics.com。 点击某个图标即可查看其CSS类名称。

可以在任何元素中插入图标,使用元素的font-size样式指定图标的大小:

<any style="font-size:100px;">    <i class="icon ion-search"></i></any>

7、内边距

ionic定义了常用的内边距样式:

padding

样式名很直白,边距默认统一为10px。可以在任何元素上应用这些样式。

8、列表

对列表外观的定制化主要集中在.item元素上,.list元素仅有 少数的几个样式定义:

list

    <div class="scroll-content has-header">
        <ul class="list">
            <li class="item">Battletoads</li>
            <li class="item">Contra</li>
            <li class="item">Duck Tales</li>
            <li class="item">Mega Man</li>
            <li class="item">Metroid</li>
            <li class="item">Mike Tyson's Punch-Out</li>
        </ul>
    </div>


在 list 样式上加三种样式的效果

list-borderless

list-inset

card

9、成员容器 : .item

列表的样式定制主要发生在.item元素上。在.item元素内, 可以插入文本、徽章、图标、图像(头像、缩略图或大图)、按钮等各种 样式的元素:

<div class="scroll-content has-header">
        <ul class="list">
            <li class="item">Battletoads<i class="badge badge-positive">123</i></li>
            <li class="item">Contra<i class="badge badge-stable">15</i></li>
            <li class="item">Duck Tales</li>
            <li class="item">Mega Man</li>
            <li class="item">Metroid</li>
            <li class="item">Mike Tyson's Punch-Out<i class="badge badge-positive">20</i></li>
        </ul>
    </div>


10、.item : 嵌入文本

.item元素可以使用h1~h6/p标签插入不同规格的文本。


11、.item : 嵌入图标

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
    <div class="bar bar-header bar-positive">
        <button class="button icon ion-ios-arrow-left">返回</button>
        <h1 class="title">酒店搜索</h1>
        <button class="button">首页</button>
    </div>
    <div class="scroll-content has-header">
        <div class="list list-inset">
            <div class="item item-icon-left item-icon-right">
                <i class="icon ion-location"></i>
                <h2>入住城市:当前位置</h2>
                <i class="icon ion-ios-arrow-right"></i>
            </div>
            <div class="item item-icon-left item-icon-right">
                <i class="icon ion-calendar"></i>
                <h2>入住日期:7月27日 星期五</h2>
                <i class="icon ion-ios-arrow-right"></i>
            </div>
            <div class="item item-icon-left item-icon-right">
                <i class="icon ion-social-yen"></i>
                <h2>价格范围:不限价格</h2>
                <i class="icon ion-ios-arrow-right"></i>
            </div>
        </div>
        <div class="padding">
          <button class="button button-block button-assertive">搜索</button>
        </div>
    </div>
</body>
</html>

注意两个写法

1、以后可以用这种写法产生一行空格间隙。

<div class="padding">
      <button class="button button-block button-assertive">搜索</button>
</div>

2、分别写两个样式,分别控制两个左右的图标

<div class="item item-icon-left item-icon-right">
     <i class="icon ion-location"></i>
      <h2>入住城市:当前位置</h2>
      <i class="icon ion-ios-arrow-right"></i>
</div>

12、.item : 嵌入头像

在ionic中,头像被设置为40x40固定大小。和插入图标类似,向.item中插入头像需要满足两个条件:

  1. .item元素上声明头像位置。头像可以位于列表的左侧或右侧, 分别使用.item-avatar-left.item-avatar-right声明

  2. .item元素内使用img标签插入头像。

    <div class="scroll-content has-header">
        <div class="list">
            <div class="item item-avatar">
                <img src="img/a-1.jpg">
                <h2>Venkman</h2>
                <p>我们周末去爬山吧!</p>
            </div>
            <div class="item item-avatar">
                <img src="img/a-2.jpg">
                <h2>Ray</h2>
                <p>真的好好吃啊...</p>
            </div>
            <div class="item item-avatar">
                <img src="img/a-3.jpg">
                <h2>Egon</h2>
                <p>什么时候去看演唱会啊,...</p>
            </div>
            <div class="item item-avatar">
                <img src="img/a-4.jpg">
                <h2>Winston</h2>
                <p>I love this game!</p>
            </div>
        </div>
    </div>


13、.item : 嵌入缩略图

在ionic中,缩略图被定义为80px大小,比头像大,适合新闻图片。 和插入头像类似,向.item中插入缩略图需要满足两个条件:

  1. .item元素上声明缩略图位置。缩略图可以位于列表的左侧或右侧, 分别使用.item-thumbnail-left.item-thumbnail-right声明

  2. .item元素内使用img标签插入头像。

注意:将img标签放到.item内容的开头!否则就是下图的效果


<div class="scroll-content has-header">
    <ul class="list">
        <li class="item">
            <h2>国务院常务会议部署推进公司注册资本登记制度改革</h2>
            <p>中国青年报</p>
        </li>
        <li class="item item-thumbnail-right">
            <img src="img/g-1.jpg">
            <h2>大黄鸭在北京两个月创收超两亿元 今日离京</h2>
            <p>中国经营报</p>
        </li>
        <li class="item">
            <h2>LinkedIn创始人:在见风投之前,我希望自己当时懂得这七件事...</h2>
            <p>虎嗅网</p>
        </li>
        <li class="item item-thumbnail-right">
            <img src="img/g-12.jpg">
            <h2>美国男子为防妻分家产 将价值50万美元黄金扔垃圾桶</h2>
            <p>新浪新闻</p>
        </li>
    </ul>
    </div>



14、.item : 嵌入大图

    <div class="scroll-content has-header">
        <div class="list">
            <div class="item item-avatar-left">
                <img src="img/a-1.jpg">
                <h2>Thomasguy</h2>
            </div>
            <div class="item item-image">
                <img src="img/road.png">
            </div>
            <div class="item item-icon-left">
                <i class="icon ion-thumbsup"></i>
                <p>44 likes</p>
            </div>
        </div>
    </div>







































© 著作权归作者所有

共有 人打赏支持
龙马行空
粉丝 385
博文 126
码字总数 102118
作品 0
房山
前端工程师
ionic教程之基本布局

目录: 简介 Hybrid vs. Others ionic CSS框架 基本布局 布局模式 定高条块:.bar .bar : 位置 .bar : 嵌入子元素 .bar : 嵌入input 内容:.content和.scroll-content Hybrid vs. Others 要开...

汇智网 ⋅ 2017/09/18 ⋅ 0

ionic入门之AngularJS扩展(一)//HTML5移动开发

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

秦无炎 ⋅ 2016/12/20 ⋅ 0

ionic开发:第一步

1.下载安装node.js 2.输入命令行:npm install -g cordova ionic 3.输入命令行:ionic start myApp blank ok,这样会创建一个ionic的myApp项目。 这样构建的ionic project结构是很清晰的。 cd...

Jack_Q ⋅ 2015/05/27 ⋅ 0

ionic react-native和native开发移动app到底那个好

ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比。欢迎大家补充指正 一、 跨平台特性 ionic : ...

htzhanglong ⋅ 2016/02/27 ⋅ 6

ionic react-native和native开发移动app对比

ionic react-native和native开发移动app对比 移动端开发如何选型?这里介绍一下我眼中的ionic/cordova,react-native,native 三种移动端开发选型对比。欢迎大家补充指正 一、 跨平台特性 ioni...

htzhanglong ⋅ 2016/06/10 ⋅ 0

angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比 ⋅ 2015/11/15 ⋅ 1

ionic上拉菜单 在android中“文字居左”、“取消按钮不显示”问题解决

在自己的css文件中写下此段代码: .platform-android .action-sheet-cancel { display: block !important; margin-top: 4px;}.platform-android .action-sheet .button { border-width: 1px......

我有我 ⋅ 2016/04/13 ⋅ 0

理解ionic2 + angular2开发方案

  看了下ionic2的官方文档,做了简单的分析理解。 1. 安装使用   ionic2的安装运行基本和前版本的ionic基本一致,非常简单。 当然这里需要保证你的开发环境SDK已经安装成功了,例如Andro...

ouven ⋅ 2016/09/20 ⋅ 0

ionic入门之AngularJS扩展

ionic ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生A...

笔阁 ⋅ 2015/05/04 ⋅ 4

ionic框架安装

ionic框架安装 导语 ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox...

90后爱国 ⋅ 2016/07/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 9分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 12分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 16分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 21分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 22分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 52分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 8

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部