Skip to content

底部通栏

image

介绍

页面底部展示容器,可拖入组件。

API

Props

参数名描述类型默认值
status默认状态'default' | 'hide''default'
heightstring'52'
baseStyle自定义样式string-
customClass类名绑定string-
opacity不透明度, 布局容器背景色透明度string-
display显示, 设置组件的显示布局模式Display-
boxStyle盒模型 , margin,border,padding设置BoxStyle-
background背景样式Background-
borderRadius圆角BorderRadius-
boxShadow阴影BoxShadow-
uniqueKey唯一标识string-

Type

javascript

//显示
type Display = {
  type:"block"|"inline-block"|"inline"|"flex",
  // type选择flex可配置以下属性
  flex:{
    flexDirection:"row"|"column"|"row-reverse"|"column-reverse",
    alignItems:"flex-start"|"center"|"flex-end"|"stretch"|"base-line",
    justifyContent:"flex-start"|"center"|"flex-end"|"space-between"|"space-around"
  }
}

// 盒模型
type BoxStyle = {
  "marigin": [string|string|string|string],
  "border": [string|string|string|string],
  "padding": [string|string|string|string],
  "borderColor": 'color-border-1'|'color-border-2'|'color-border-3'|'color-border-4',
  "borderStyle": 'solid'|'dotted'|'dashed'
}


// 背景样式
type Background = {
  "color": string,
  "size": "cover"|"contain"|"length"
  "width": {
    "unit": "px"|"%",
    "value": number
  }
  "height":{
    "unit": "px"|"%",
    "value": number
  }
}

// 圆角
type BorderRadius = {
  "topLeft":number,
  "topRight":number,
  "bottomLeft":number,
  "bottomRight":number,
}

// 阴影
type BoxShadow = {
  "color":string,
  "hShadow":string,
  "vShadow":string,
  "blur":number,
}