Back to Hippy

外观

docs/api/style/appearance.md

3.4.09.0 KB
Original Source

外观

包含了前景、背景、边框、透明度、字体等外观样式


borderColor

Android 默认值为 transparent,iOS 默认值为 black

类型必需支持平台
colorAndroid、iOS

borderTopColor

Android 默认值为 transparent,iOS 默认值为 black

类型必需支持平台
colorAndroid、iOS

borderBottomColor

Android 默认值为 transparent,iOS 默认值为 black

类型必需支持平台
colorAndroid、iOS

borderLeftColor

Android 默认值为 transparent,iOS 默认值为 black

类型必需支持平台
colorAndroid、iOS

borderRightColor

Android 默认值为 transparent,iOS 默认值为 black

类型必需支持平台
colorAndroid、iOS

borderRadius

类型必需支持平台
numberAndroid、iOS

borderTopLeftRadius

类型必需支持平台
numberAndroid、iOS

borderTopRightRadius

类型必需支持平台
numberAndroid、iOS

borderBottomLeftRadius

类型必需支持平台
numberAndroid、iOS

borderBottomRightRadius

类型必需支持平台
numberAndroid、iOS

borderWidth

类型必需支持平台
numberAndroid、iOS

borderTopWidth

类型必需支持平台
numberiOS

borderBottomWidth

类型必需支持平台
numberiOS

borderLeftWidth

类型必需支持平台
numberiOS

borderRightWidth

类型必需支持平台
numberiOS

backgroundColor

类型必需支持平台
colorAndroid、iOS

borderStyle

默认值为 solid

类型必需支持平台
enum('solid', 'dotted', 'dashed')Android、iOS。dotted、dashed 暂仅支持 iOS

boxShadow

类型必需平台
Hippy-React 参考例子Android、iOS,Android实现有差异(详见例子)
Hippy-Vue 参考例子Android、iOS,Android实现有差异(详见例子)

color

字体颜色

类型必需支持平台
colorAndroid、iOS

fontFamily

字体名,如 PingFangSC-Regular

若需自定义字体,参考 自定义字体说明

类型必需支持平台
stringAndroid、iOS

fontSize

字体大小

默认值为 14

类型必需支持平台
numberAndroid、iOS

fontStyle

字体样式

默认值为 normal

类型必需支持平台
enum('normal', 'italic')Android、iOS

fontWeight

字体粗细

[MDN 文档]

类型必需支持平台
number | stringAndroid、iOS

Android API 28 以下仅支持 normalbold 两种字重,其它字重效果需配合 fontFamily 实现,Android API 28 及以上可以支持设置1 - 1000的字重值。

letterSpacing

文本字符间距

[MDN 文档]

!> hippy-vue 需采用 @hippy/vue-css-loader 2.14.1 以上版本

类型必需支持平台
numberAndroid、iOS

opacity

类型必需支持平台
numberAndroid、iOS

textDecoration

textDecorationLine

类型必需平台
enum('underline', 'line-through', 'none')Android、iOS

textDecorationColor

Hippy-React 范例

Hippy-Vue 范例

文本的修饰线颜色

类型必需平台
coloriOS

textDecorationLine

Hippy-React 范例

Hippy-Vue 范例

文本的修饰线类型

类型必需平台
enum('underline', 'line-through', 'none')Android、iOS

textDecorationStyle

Hippy-React 范例

Hippy-Vue 范例

文本的修饰线样式

类型必需平台
enum('dotted', 'dashed', 'solid')iOS

textShadowColor

最低支持版本 2.10.0

Hippy-React 范例

Hippy-Vue 范例

文字阴影颜色

类型必需平台
colorAndroid、iOS

textShadowOffset

最低支持版本 2.10.0

Hippy-React 范例

Hippy-Vue 范例

文字阴影偏移量

类型必需平台
object: { x: number, y: number }Android、iOS

textShadowOffsetX

  • 最低支持版本 2.10.0
  • 注意 hippy-vue class 样式只支持合并写法 text-shadow-offset: 1px 1px,不支持拆分

Hippy-React 范例

Hippy-Vue 范例

文字阴影X轴偏移量

类型必需平台
numberAndroid、iOS

textShadowOffsetY

  • 最低支持版本 2.10.0
  • 注意 hippy-vue class 样式只支持合并写法 text-shadow-offset: 1px 1px,不支持拆分

Hippy-React 范例

Hippy-Vue 范例

文字阴影Y轴偏移量

类型必需平台
numberAndroid、iOS

textShadowRadius

最低支持版本 2.10.0

Hippy-React 范例

Hippy-Vue 范例

文字阴影半径

类型必需平台
numberAndroid、iOS

tintColor

Hippy-React 范例

Hippy-Vue 范例

对图片进行染色(对非纯色图片进行有透明度的染色时,Android 和 iOS 的 blendMode 默认值有差异)

类型必需支持平台
colorAndroid、iOS

visibility

类型必需支持平台
enum('visible'[default], 'hidden')Android(2.14.5)、iOS(2.9.0)