# Column 列布局

用于全端统一列布局的组件,column组件布局简单易用,多端共通(nvue/vue)。

温馨提示

当前组件不建议在支付宝小程序使用,在支付宝小程序会有样式显示延迟现象,支付宝小程序建议使用使用布局样式。

# 基本用法

<unify-column mode="column">
	<!-- 内容区域,默认为column多列布局,更换布局类型使用mode属性 -->
</unify-column>

# 圆角

radius属性为数组方式

  • [0]数组为一位时,表示左上、左下、右上、右下角数值
  • [0,1]数组为两位时,下标0为左上、右上角,下标1为左下、右下角数值
  • [0,1,2,3]数组为四位时,下标0为左上,下标1为右上,下标2为右下,下标3为左下数值。(顺时针方向)
<unify-column bg="bg-black" width="500" height="500" :radius="[30]">

</unify-column>

# 内边距与外边距

margin与padding属性为数组方式

  • [0]数组为一位时,表示四边外边距或者内边距
  • [0,1]数组为两位时,下标0为上下边距,下标1为左右边距
  • [0,1,2]数组为三位时,下标0为上边距,下标1为左右边距,下标2为下边距
  • [0,1,2,3]数组为四位时,下标0为上边距,下标1为右边距,下标2为下边距,下标3为左边距。(顺时针方向)
<unify-column :margin="[24]" :padding="[24,32]">
			
</unify-column>

# styles属性使用方式

自定义组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:backgroundColor:red,如在position属性下使用

<!-- 悬浮在右下角 -->
<unify-column width="100" :radius="[50]" height="100" bg="bg-theme" position="fixed" :styles="{right:0,bottom:0}"></unify-column>

# Attributes

参数 说明 类型 可选值 默认值
show 是否显示隐藏组件 Boolean true/false true
mode 列-布局类型 String 多列:column
多列(反向):reverse
水平靠左:start
水平居中:center
水平靠右:end
垂直靠顶部:top
垂直中间:middle
垂直靠底部:bottom
垂直居中:middle-center
column
bg 背景颜色(class) String - -
height 高度(rpx) String/Number - -
width 宽度(rpx) String/Number - -
radius 圆角(rpx) Arrar [1] / [1,2] / [1,2,3,4] -
margin 外边距(rpx) Arrar [1] / [1,2] / [1,2,3] / [1,2,3,4] -
padding 内边距(rpx) Arrar [1] / [1,2] / [1,2,3] / [1,2,3,4] -
position 定位布局 String 相对定位:relative
绝对定位(第一个父元素进行定位):absolute
绝对定位(相对于手机窗口进行定位):fixed
定位(当满足定位条件时生效):sticky
relative
hover 是否显示隐藏hover-class点击状态 Boolean true/false false
styles 自定义组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:backgroundColor:red Object - -
1.0.8 stop 阻止事件冒泡 Boolean true/false false
1.0.8 border 边框颜色(class) String - -

# Event

事件名 说明 回调参数
@click 点击事件 -
@longclick 1.0.8 长按事件 -