ionic样式学习(一)
ionic样式学习(一)
龙马行空 发表于2年前
ionic样式学习(一)
  • 发表于 2年前
  • 阅读 1014
  • 收藏 12
  • 点赞 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>







































标签: ionic
共有 人打赏支持
粉丝 367
博文 127
码字总数 94341
×
龙马行空
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: