ionic样式学习（一）

时间 2019-12-25

标签 ionic 样式学习繁體版

原文原文链接

一、定高条块：.bar

样式.bar将元素声明为屏幕上绝对定位的块状区域，具备固定的高度（44px）：css

二、.bar : 位置

ionic使用如下样式定义条块的位置：html

.bar-header - 置顶android
.bar-subheader - header之下置顶ios
.bar-footer - 置底app
.bar-subfooter - footer之上置底less

在腾讯新闻App中，你能够看到，使用了三个条块：标题、副标题、页脚：ionic

<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可让文字颜色加深
字体

三、标题栏搜索框.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元素，须要注意两点：this

在条块元素上应用.item-input-inset样式spa
将input包裹在应用.item-input-wrapper样式的元素内

这是由于，在ionic的实现中，.bar中的.input样式定义以下：

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

四、内容：.content和.scroll-content

ionic预约义了两个内容容器样式：

.content - 流式定位，内容元素在文档流中按顺序定位
.scroll-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的效果

五、色彩

六、图标

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>

七、内边距

ionic定义了经常使用的内边距样式：

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

八、列表

对列表外观的定制化主要集中在.item元素上，.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

九、成员容器 : .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>

十、.item : 嵌入文本

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

十一、.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>

注意两个写法：

一、之后能够用这种写法产生一行空格间隙。

二、分别写两个样式，分别控制两个左右的图标

十二、.item : 嵌入头像

在ionic中，头像被设置为40x40固定大小。和插入图标相似，向.item中插入头像须要知足两个条件：

在.item元素上声明头像位置。头像能够位于列表的左侧或右侧，分别使用.item-avatar-left和.item-avatar-right声明
在.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>

1三、.item : 嵌入缩略图

在ionic中，缩略图被定义为80px大小，比头像大，适合新闻图片。和插入头像相似，向.item中插入缩略图须要知足两个条件：

在.item元素上声明缩略图位置。缩略图能够位于列表的左侧或右侧，分别使用.item-thumbnail-left和.item-thumbnail-right声明
在.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>

1四、.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>