Border

简易介绍

Border 组件用于为元素添加边框样式，支持多种边框风格、颜色和方向。 可以使用<MYBorder></MYBorder>或者<MYBorder />可以实现边框的配置。

关于基本边框

borderStyle

使用 borderStyle 定义边框的基本样式。
默认为黑色，此处使用borderColor配了个清晰的颜色。

代码演示

边框为solid

边框为dashed

边框为dotted

<template>
  <MYBorder borderStyle='solid' borderColor='#2c2'>边框为solid</MYBorder>
  <MYBorder borderStyle='dashed' borderColor='#2c2'>边框为dashed</MYBorder>
  <MYBorder borderStyle='dotted' borderColor='#2c2'>边框为dotted</MYBorder>
</template>

展开代码

borderWidth

使用 borderWidth 定义边框的厚度，默认为 1px。此处使用borderColor配了个清晰的颜色。

代码演示

厚度为2px

厚度为4vh

厚度为6rem

厚度为8vw

<template>
  <MYBorder borderWidth='2px' borderColor='#2c2'>厚度为2px</MYBorder>
  <MYBorder borderWidth='4vh' borderColor='#2c2'>厚度为4vh</MYBorder>
  <MYBorder borderWidth='6rem' borderColor='#2c2'>厚度为6rem</MYBorder>
  <MYBorder borderWidth='8vw' borderColor='#2c2'>厚度为8vw</MYBorder>
</template>

展开代码

borderColor

使用 borderColor 定义边框的颜色。默认值为黑色，此处使用borderStyle配了borderStyle="dashed"。

代码演示

红色边框

蓝色边框

红色边框

蓝色边框

<template>
  <MYBorder borderColor='#ff0000' borderStyle='dashed'>红色边框</MYBorder>
  <MYBorder borderColor='#409EFF' borderStyle='dashed'>蓝色边框</MYBorder>
  <MYBorder borderColor='red' borderStyle='dashed'>红色边框</MYBorder>
  <MYBorder borderColor='blue' borderStyle='dashed'>蓝色边框</MYBorder>
</template>

展开代码

边框方向

可以为边框的每个方向单独设置颜色。当然也可以单独设置一个方向的颜色，单独设置后，边框默认的颜色会变成白色。

代码演示

上下左右分别为红色和蓝色绿色黄色

<template>
  <MYBorder 
    topColor='red' 
    bottomColor='blue' 
    leftColor='green' 
    rightColor='yellow'
  >
    这是一个带有不同方向颜色的边框
  </MYBorder>
</template>

展开代码

边框内容居中

使用 center 将边框中的内容居中。此处使用borderColor配了个清晰的颜色。

代码演示

居中的文字

<template>
  <MYBorder center borderColor='#2c2'>居中的文字</MYBorder>
</template>

展开代码

边框圆角

使用 rounded 属性为边框添加圆角。此处使用borderColor配了个清晰的颜色。为了效果更直观这里使用了paddingText移动了文本的位置。

代码演示

这是一个圆角边框

<template>
  <MYBorder rounded borderColor='#2c2' paddingText='10px'>这是一个圆角边框</MYBorder>
</template>

展开代码

边框圆形

使用 circular 属性将边框变为圆形。此处使用borderColor配了个清晰的颜色。为了效果更直观这里使用了paddingText移动了文本的位置。

代码演示

这是一个圆形边框

<template>
  <MYBorder circular borderColor='#2c2' paddingText='10px'>这是一个圆形边框</MYBorder>
</template>

展开代码

边框内部背景颜色

使用 colorBackground 设置边框内部的背景色。

代码演示

这是一个带有背景色的边框

<template>
  <MYBorder colorBackground='#2c2'>这是一个带有背景色的边框</MYBorder>
</template>

展开代码

边框内部文本颜色

使用 textColor 设置边框内文本的颜色。

代码演示

这是一个红色文本的边框

<template>
  <MYBorder textColor='red'>这是一个红色文本的边框</MYBorder>
</template>

展开代码

阴影

使用 boxShadow 为边框添加阴影效果。他的使用方式和原生css的box-shadow属性用法一致。

代码演示

这是一个带有阴影的边框

<template>
  <MYBorder boxShadow='10px 2px 8px red'>这是一个带有阴影的边框</MYBorder>
</template>

展开代码

自定义宽高

使用width和height属性进行宽高的设置。为了效果更直观这里使用了paddingText和borderColor移动了文本的位置和设置颜色。这个宽和高也可以单独使用。

代码演示

高100px宽300px

<template>
  <MYBorder 
    width='300px' 
    height='100px' 
    borderColor='#2c2' 
    paddingText='20px'
  >
    高100px宽300px
  </MYBorder>
</template>

展开代码

边框内容与边框之间距离

使用paddingText设置边框内容与边框之间的距离，其效果相当于原生css的padding属性。也与css原生的padding使用方法是一致的。

代码演示

paddingText为100px

<template>
  <MYBorder 
    width='300px' 
    height='100px' 
    paddingText='100px' 
    borderColor='#2c2'
  >
    paddingText为100px
  </MYBorder>
</template>

展开代码

最后，下面为多种进行组合使用：

代码演示

组合使用

<template>
  <MYBorder 
    rounded
    topColor='red'
    bottomColor='blue'
    leftColor='green'
    rightColor='yellow'
    width='300px'
    height='100px'
    textColor='#ff00ff'
    paddingText='100px'
    colorBackground='#2c2'
    boxShadow='10px 2px 8px red'
  >
    组合使用
  </MYBorder>
</template>

展开代码

注意:

· 如果使用了边框方向设置了颜色,那么borderStyle和borderWidth会被覆盖，使borderStyle不再生效。
· borderColor和边框方向的颜色值同时设置了，那么边框方向会覆盖borderColor设置的颜色。所以它们指南同时使用一种样式。
· 如果设置了cricle，rounded将不会生效，cricle和rounded只能同时使用一种样式。

API 参考

Props

参数	说明	类型	可选值	默认值
borderStyle	边框样式	string	solid/dashed/dotted/double	solid
borderWidth	边框厚度	string	px/rem/vh/vw	1px
borderColor	边框颜色	string	支持16进制颜色或单词颜色	—
topColor	上边框颜色	string	支持16进制颜色或单词颜色	—
bottomColor	下边框颜色	string	支持16进制颜色或单词颜色	—
leftColor	左边框颜色	string	支持16进制颜色或单词颜色	—
rightColor	右边框颜色	string	支持16进制颜色或单词颜色	—
rounded	是否为圆角	boolean	—	false
circular	是否为圆形	boolean	—	false
colorBackground	背景色	string	支持16进制颜色或单词颜色	—
textColor	文本颜色	string	支持16进制颜色或单词颜色	—
boxShadow	阴影效果	string	支持所有CSS阴影格式	—
width	边框宽度	string	px/rem/vh/vw	—
height	边框高度	string	px/rem/vh/vw	—
paddingText	内容与边框间距	string	px/rem/vh/vw	—
tag	渲染标签	string	支持所有 HTML 标签	div

类型定义

interface BorderProps {
  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
  borderWidth?: string;
  borderColor?: string;
  topColor?: string;
  bottomColor?: string;
  leftColor?: string;
  rightColor?: string;
  rounded?: boolean;
  circular?: boolean;
  colorBackground?: string;
  textColor?: string;
  boxShadow?: string;
  width?: string;
  height?: string;
  paddingText?: string;
  tag?: string;
}