99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

快應(yīng)用 通用樣式

2020-08-08 15:32 更新

通用樣式,即所有組件都可以支持的樣式

它們均與 css 的屬性樣式用法保持一致,開發(fā)者可寫在?內(nèi)聯(lián)樣式?或?<style>?標(biāo)簽里,實(shí)現(xiàn)組件樣式的定制化

關(guān)于組件樣式的設(shè)置,可以參考此 文檔 入門

示例代碼

<template>
  <div>
      <div class="box-normal" style="background-color:red"></div>
      <div class="box-normal"></div>
  </div>
</template>
<style>
    .box-normal{
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>

屬性列表

注:通用樣式均為非必填項(xiàng)。

名稱 類型 默認(rèn)值 描述
width <length> | <percentage> - 未設(shè)置時(shí)使用組件自身內(nèi)容需要的寬度
height <length> | <percentage> - 未設(shè)置時(shí)使用組件自身內(nèi)容需要的高度
padding <length> 0 簡寫屬性,在一個(gè)聲明中設(shè)置所有的內(nèi)邊距屬性,該屬性可以有 1 到 4 個(gè)值
padding-[left|top|right|bottom] <length> 0 設(shè)置一個(gè)元素的某個(gè)方向的內(nèi)邊距,padding 區(qū)域指一個(gè)元素的內(nèi)容和其邊界之間的空間,該屬性不能為負(fù)值。
margin <length> 0 簡寫屬性,在一個(gè)聲明中設(shè)置所有的外邊距屬性,該屬性可以有 1 到 4 個(gè)值
margin-[left|top|right|bottom] <length> 0 設(shè)置一個(gè)元素的某個(gè)方向的外邊距,該屬性不能為負(fù)值。
border - 0 簡寫屬性,在一個(gè)聲明中設(shè)置所有的邊框?qū)傩?,可以按順序設(shè)置屬性 width style color,不設(shè)置的值為默認(rèn)值
border-[left|top|right|bottom] 1050+ - 0 簡寫屬性,在一個(gè)聲明中設(shè)置對(duì)應(yīng)位置的所有邊框?qū)傩?,可以按順序設(shè)置屬性 width style color,不設(shè)置的值為默認(rèn)值
border-style dotted | dashed | solid solid 暫時(shí)僅支持 1 個(gè)值,為元素的所有邊框設(shè)置樣式
border-width <length> 0 簡寫屬性,在一個(gè)聲明中設(shè)置元素的所有邊框?qū)挾龋蛘邌为?dú)為各邊邊框設(shè)置寬度
border-[left|top|right|bottom]-width <length> 0 為元素的某個(gè)方向的邊框設(shè)置邊框?qū)挾?/td>
border-color <color> black 簡寫屬性,在一個(gè)聲明中設(shè)置元素的所有邊框顏色,或者單獨(dú)為各邊邊框設(shè)置顏色
border-[left|top|right|bottom]-color <color> black 顏色值的填入
border-radius <length> | <percentage> 1070+ 0 border-radius 屬性允許你設(shè)置元素的外邊框圓角。設(shè)置時(shí)需要同時(shí)設(shè)置 border-width、border-color,單獨(dú)設(shè)置 border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color 時(shí) border-radius 無效
border-[top|bottom]-[left|right]-radius <length> | <percentage> 1070+ 0 設(shè)置四個(gè)角的圓角弧度
background <linear-gradient> - 支持 漸變樣式,暫時(shí)不能與 background-color、background-image 同時(shí)使用
background-color <color> - 顏色值的填入請(qǐng)參考 顏色配置
color <color> - 顏色值的填入請(qǐng)參考 顏色配置
background-image <uri> - 暫時(shí)不支持與 background-color,border-color 同時(shí)使用;支持本地圖片資源;1030+支持網(wǎng)絡(luò)圖片資源;1010+版本支持 9-patch 圖
background-size 1000+ contain | cover | auto | <length> | <percentage> 100% 100% 設(shè)置背景圖片大小,詳情見背景圖樣式
background-repeat 1000+ repeat | repeat-x | repeat-y | no-repeat repeat 設(shè)置是否及如何重復(fù)繪制背景圖像
background-position 1010+ <length> |<percentage>| left | right | top | bottom | center 0px 0px 描述了背景圖片在容器中繪制的位置,支持 1-4 個(gè)參數(shù)
opacity <number> 1 opacity 屬性指定了一個(gè)元素的透明度。
display flex | none flex 快應(yīng)用只支持 flex 布局;將當(dāng)前元素的 display 設(shè)置為 none 快應(yīng)用頁面將不渲染此元素
visibility visible | hidden visible visibility 屬性控制顯示或隱藏元素而不更改文檔的布局
flex <number> - 父容器為<div>、<list-item>、<tabs>時(shí)生效
flex-grow <number> 0 父容器為<div>、<list-item>時(shí)生效
flex-shrink <number> 1 父容器為<div>、<list-item>時(shí)生效
flex-basis <number> -1 父容器為<div>、<list-item>時(shí)生效
flex-direction <string> 'row' 默認(rèn)為橫向’row', 父容器為<div>、<list-item>時(shí)生效
align-items <string> 'flex-start' align-items 定義了伸縮項(xiàng)目可以在伸縮容器的當(dāng)前行的側(cè)軸上對(duì)齊方式。flex-start(默認(rèn)值):伸縮項(xiàng)目在側(cè)軸起點(diǎn)邊的外邊距緊靠住該行在側(cè)軸起始的邊。flex-end:伸縮項(xiàng)目在側(cè)軸終點(diǎn)邊的外邊距靠住該行在側(cè)軸終點(diǎn)的邊 。center:伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。baseline:伸縮項(xiàng)目根據(jù)他們的基線對(duì)齊。stretch:伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。此值會(huì)使項(xiàng)目的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下盡可能接近所在行的尺寸。
justify-content <string> 'flex-start' justify-content 定義了伸縮項(xiàng)目沿著主軸線的對(duì)齊方式。flex-start(默認(rèn)值):伸縮項(xiàng)目向一行的起始位置靠齊。flex-end:伸縮項(xiàng)目向一行的結(jié)束位置靠齊。center:伸縮項(xiàng)目向一行的中間位置靠齊。space-between:伸縮項(xiàng)目會(huì)平均地分布在行里。第一個(gè)伸縮項(xiàng)目一行中的最開始位置,最后一個(gè)伸縮項(xiàng)目在一行中最終點(diǎn)位置。space-around:伸縮項(xiàng)目會(huì)平均地分布在行里,兩端保留一半的空間。
position fixed | absolute1060+ | relative1060+ relative 1060+版本將新增支持 relative 和 absolute 屬性值,且默認(rèn)值為 relative;父容器為<list>、<swiper>時(shí)不生效。
[left|top|right|bottom] <number> - 一般配合fixedabsolute(1060+)布局使用


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)