# Block 块 1.0.9

一般用于需设置固定宽高、渐变背景色等场景

# 基本使用

通过 <n-block> 形式调用

<n-block width="500" height="200" background="$theme-3"></n-block>

# 渐变颜色

通过 gradient 参数设置渐变颜色,格式:"渐变方向 渐变颜色 渐变颜色"

渐变方向

  • right:从左向右渐变
  • left:从右向左渐变
  • bottom:从上到下渐变
  • top:从下到上渐变
  • bottom right:从左上角到右下角
  • top left:从右下角到左上角
<n-block width="500" height="200" gradient="top,$theme-2,$theme-6"></n-block>
<!-- 或者 -->
<n-block width="500" height="200" gradient="top,#bae7ff,#1890ff"></n-block>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
layout 布局方式 String column、row-reverse、column-reverse row
justify 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式 String start、center、end、between、around -
items 定义当前行的侧轴(纵轴)方向上的对齐方式 String stretch、start、center、end -
width 宽度 Number, String - -
height 高度 Number, String - -
radius 圆角,空格分割字符串形式简写,默认单位rpx。例如:"12" 、 "12 24" String - -
margin 外边距,空格分割字符串形式简写,默认单位rpx。例如:"12" 、 "12 24"。 String - -
padding 内边距,空格分割字符串形式简写,默认单位rpx。例如:"12" 、 "12 24" String - -
border 边框,空格分割字符串形式简写。例如:1rpx solid red String - -
background 背景颜色 String - -
gradient 渐变颜色,逗号分割字符串形式简写。
格式:"渐变方向,渐变颜色,渐变颜色"。
例如: "top,#a80077,#66ff00"
String - -
unit 单位置换,只有width、height参与置换 String px rpx