文档中心 > 千牛开放平台2.0

样式参考手册

更新时间:2016/10/28 访问次数:3213

基础共用样式

  • 颜色值
  • 大小单位: ‘rem’或者百分比, 推荐rem,虽然纯数字不报错,不推荐纯数字,推荐字符串,rem的说明链接

显示控制

opacity

  • 可取值: 0-1的数字
  • 作用: 控制元素的透明度

backgroundColor

  • 可取值: 颜色值 (具体增加颜色参考链接)
  • 作用: 控制元素的背景颜色

border样式

注意: border的样式需要同时设置3个才能生效, borderWidth, borderStyle, borderColor
其他的borderTopWidth, borderBottomWidth

borderStyle

  • 可取值: solid | dotted| dashed
  • 作用: 控制线条的样式

borderWidth

borderColor

  • 可取值: 颜色值
  • 作用: 控制线条的颜色

borderRightWidth

borderTopWidth

borderBottomWidth

布局

alignItems

alignSelf

bottom

flex

  • 可取值: 数字
  • 作用: 控制元素是否为flex占位,和flexDirection配合使用,flexDirection为row时,子元素水平排列,为column的时候,子元素垂直排列,注意View默认会被加上flex: 1,flexDirection为column,效果是View不写任何style的时候,

    如果一个元素的父元素定义了flex为1,那么子元素再定义flex: 1的时候,那么这个flex就是控制自己占的百分比,比如3个都是flex为1,那么3个元素都是占比1/3,如果是1: 2: 1,那么占比就是1/4,2/4,1/4。

  • 详见: https://github.com/facebook/css-layout

flexDirection

flexWrap

height

justifyContent

left

margin

marginBottom

marginHorizontal (支持性待定)

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义水平的边距,左边和右边

marginLeft

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义左边距
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left

marginRight

marginTop

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义顶部边距
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

marginVertical (支持性待定)

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义垂直边距,顶部和底部

maxHeight

maxWidth

minHeight

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’ ,百分比
  • 作用:最低高度
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

minWidth

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’ ,百分比
  • 作用:最低宽度
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/min-width

padding

paddingBottom

paddingHorizontal (支持性待定)

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用:定义水平填充宽度 左边和右边

paddingLeft

paddingRight

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义右边填充宽度
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right

paddingTop

paddingVertical (支持性未定)

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’
  • 作用: 定义垂直填充宽度,顶部和底部

position

right

top

width

  • 可取值:字符串或者数字 推荐字符串 比如 :‘1rem’ ,百分比
  • 作用: 定义宽度
  • 详见:https://developer.mozilla.org/en-US/docs/Web/CSS/width

zIndex

文本

以下属性需要加载<Text>标签才能生效

color

  • 可取值: 颜色值, 类似于 #FFFFFF
  • 作用: 控制文本的颜色

fontSize

  • 可取值: rem字符串
  • 作用,文字的大小,
  • 注意: 每个text标签最好都增加这一属性,否则会出现不同设备字体大小不一样的情况

fontStyle

  • 可取值: normal | italic
  • 作用: 控制文本是否为斜体

fontWeight

  • 可取值: normal | bold
  • 作用: 控制文本是否加粗

textDecoration

  • 可取值: none | underline | line-through
  • 作用: 控制文本是否有装饰划线

textAlign

  • 可取值: left | center | right
  • 作用: 控制文本排列的方式

textOverflow

  • 可取值: clip | ellipsis
  • 作用: 控制文本溢出的时候怎么显示。

lines

  • 可取值: 数字
  • 作用: 这个属性配合textOverflow使用,控制溢出的行数,要把文本设置为一行,并在溢出的时候增加省略号,那么就用 textOverflow: ‘ellipsis’和lines: 1即可。

Flex布局速查样式库 https://g.alicdn.com/nuke/doc-case/0.0.1/flex.html

FAQ

关于此文档暂时还没有FAQ
返回
顶部