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

  1. 在條塊元素上應用.item-input-inset樣式spa

  2. 將input包裹在應用.item-input-wrapper樣式的元素內

這是由於，在ionic的實現中，.bar中的.input樣式定義以下：

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


四、內容：.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的效果

五、色彩


六、圖標

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定義了經常使用的內邊距樣式：

padding

樣式名很直白，邊距默認統一爲10px。能夠在任何元素上應用這些樣式。

八、列表

對列表外觀的定製化主要集中在.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

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

注意兩個寫法：

一、之後能夠用這種寫法產生一行空格間隙。

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

二、分別寫兩個樣式，分別控制兩個左右的圖標

<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>

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


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



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>


相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程