首頁(yè)技術(shù)文章正文

Ionic開發(fā)中怎樣自定義元素顏色?

更新時(shí)間:2021-11-23 來源:黑馬程序員 瀏覽量:


在ionic提供的配色方案中,每個(gè)配色方案的類名代表一種風(fēng)格,而不是代表具體的顏色值;例如.positive中的positive可以翻譯為“積的”,該配色方案對(duì)應(yīng)的顏色就是代表“積極向上”的顏色(類似深藍(lán)色)。

ionic中提供了9種配色方案,用于設(shè)置元素的前景色,如表9-5所示。

表9-5 ionic配色方案
1637646898163_ionic配色方案.png

ionic開發(fā)中的任何元素都可以使用這些配色方案,使用時(shí)的基本格式如下:

<any class="positive">...</any>

以.positive為例,在ionic源碼中,關(guān)于顏色的設(shè)置如下。

.positive, a.positive {
    color: #387ef5;
}
.positive-bg { 
    background-color:#387ef5;
}
.positive-border {
    border-color: #0c60ee;
}

在上述源碼中,為配色方案positive添加后綴-bg來設(shè)置元素的背景色,添加后綴-border來設(shè)置元素的邊框顏色。需要注意的是,背景色的顏色值與配色方案一致,都是#387ef5,而邊框的顏色值與配色方案不同。

在ionic配色方案中前景色與背景色的顏色值相同,但是邊框的顏色值與二者不同,因此接下來通過一個(gè)案例來演示前景色和邊框的顏色效果,如demo9-6.html所示。

demo9-6.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta content="initial-scale=1, maximum-scale=1,
user-scalable=no, width=device-width" name="viewport">
                <title>
                    ionic顏色
                </title>
                <link href="lib/ionic/css/ionic.css" rel="stylesheet">
                </link>
            </meta>
        </meta>
    </head>
    <body>
        <ul>
            <li class="item light light-border dark-bg">
                light
            </li>
            <li class="item stable stable-border dark-bg">
                stable
            </li>
            <li class="item positive positive-border">
                positive
            </li>
            <li class="item calm calm-border">
                calm
            </li>
            <li class="item balanced balanced-border">
                balanced
            </li>
            <li class="item energized energized-border">
                energized
            </li>
            <li class="item assertive assertive-border">
                assertive
            </li>
            <li class="item royal royal-border">
                royal
            </li>
            <li class="item dark dark-border">
                dark
            </li>
        </ul>
    </body>
</html>

在上述代碼中,由于.light和.stable類樣式都為白色,為了能看到文字的顏色效果,我們?yōu)榱斜淼那皟蓚€(gè)li元素添加了.dark-bg類,設(shè)置背景色為黑色,而其他li元素沒有設(shè)置背景色。使用Chrome瀏覽器訪問demo9-6.html,頁(yè)面效果如圖9-10所示。

1637646949150_自行設(shè)置顏色.jpg

猜你喜歡:

CSS3顏色不透明度的設(shè)置方法【web前端】

通過client獲取元素的上邊框和左邊框

JavaScript中修改元素內(nèi)容怎樣操作?

H5中article元素的作用是什么?

黑馬程序員HTML前端與開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!