底部通栏
介绍
页面底部展示容器,可拖入组件。
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
status | 默认状态 | 'default' | 'hide' | 'default' |
height | 高 | string | '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,
}