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

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

在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來(lái)設(shè)置元素的背景色，添加后綴-border來(lái)設(shè)置元素的邊框顏色。需要注意的是，背景色的顏色值與配色方案一致，都是#387ef5，而邊框的顏色值與配色方案不同。

在ionic配色方案中前景色與背景色的顏色值相同，但是邊框的顏色值與二者不同，因此接下來(lái)通過一個(gè)案例來(lái)演示前景色和邊框的顏色效果，如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