ReactJS 蓝图分隔线组件

分割线是提高UI界面自然性及可读性的重要元素之一， ReactJS蓝图分隔线组件让你能够更轻松的为你的React应用添加分割线。

特点

• 便捷：ReactJS蓝图分割线组件是一款易于使用的组件，可以简单地集成到你现有的React应用中。
• 可定制性：该组件允许你根据你的需求，定制线条颜色、粗细以及长度。
• 响应式设计：ReactJS蓝图分割线组件能够自动调整它们的宽度和高度，以适应任何容器尺寸和视口大小。
• 跨浏览器兼容性：该组件在现代浏览器中稳定运行，并且可以与React 16.0及以上版本一起使用。

安装

使用npm安装：

npm install @blueprintjs/core --save

使用

import { Divider } from '@blueprintjs/core';
 
<Divider />

默认情况下，将呈现一条水平线。你可以特别设置该组件垂直线、间隔、粗细、颜色等。

垂直分割线

<Divider vertical />

间隔

<Divider margin="10px" />
<Divider margin="10px 0" />  //等效方法

线条颜色

<Divider style={{ borderColor: "#5C7080" }} />

线条粗细

<Divider style={{ borderWidth: "3px" }} />

长线

<Divider style={{ width: "100%" }} />

示例

import { Divider } from '@blueprintjs/core';
 
function App() {
  return (
    <div className="App">
      <h1>ReactJS 蓝图分隔线组件</h1>
      <p>
        这是一个水平线分割线
      </p>
      <Divider />
      <p>
        这是一条垂直线分割线。
      </p>
      <Divider vertical />
      <p>
        这是一条间隔为10px的分割线。
      </p>
      <Divider margin="10px" />
      <p>
        这是一条蓝色的分割线。
      </p>
      <Divider style={{ borderColor: "#5C7080" }} />
      <p>
        这是一条粗细为3px的分割线。
      </p>
      <Divider style={{ borderWidth: "3px" }} />
      <p>
        这是一条占满整个宽度的分割线。
      </p>
      <Divider style={{ width: "100%" }} />
    </div>
  );
}
 
export default App;

Markdown代码片段

# ReactJS 蓝图分隔线组件

分割线是提高UI界面自然性及可读性的重要元素之一， ReactJS蓝图分隔线组件让你能够更轻松的为你的React应用添加分割线。

## 特点

- 便捷：ReactJS蓝图分割线组件是一款易于使用的组件，可以简单地集成到你现有的React应用中。
- 可定制性：该组件允许你根据你的需求，定制线条颜色、粗细以及长度。
- 响应式设计：ReactJS蓝图分割线组件能够自动调整它们的宽度和高度，以适应任何容器尺寸和视口大小。
- 跨浏览器兼容性：该组件在现代浏览器中稳定运行，并且可以与React 16.0及以上版本一起使用。

## 安装

使用npm安装：

```bash
npm install @blueprintjs/core --save
```

## 使用

```jsx
import { Divider } from '@blueprintjs/core';
 
<Divider />
```

默认情况下，将呈现一条水平线。你可以特别设置该组件垂直线、间隔、粗细、颜色等。

### 垂直分割线

```jsx
<Divider vertical />
```

### 间隔

```jsx
<Divider margin="10px" />
<Divider margin="10px 0" />  //等效方法
```

### 线条颜色

```jsx
<Divider style={{ borderColor: "#5C7080" }} />
```

### 线条粗细

```jsx
<Divider style={{ borderWidth: "3px" }} />
```

### 长线

```jsx
<Divider style={{ width: "100%" }} />
```

## 示例

```jsx
import { Divider } from '@blueprintjs/core';
 
function App() {
  return (
    <div>
      <h1>ReactJS 蓝图分隔线组件</h1>
      <p>
        这是一个水平线分割线
      </p>
      <Divider />
      <p>
        这是一条垂直线分割线。
      </p>
      <Divider vertical />
      <p>
        这是一条间隔为10px的分割线。
      </p>
      <Divider margin="10px" />
      <p>
        这是一条蓝色的分割线。
      </p>
      <Divider style={{ borderColor: "#5C7080" }} />
      <p>
        这是一条粗细为3px的分割线。
      </p>
      <Divider style={{ borderWidth: "3px" }} />
      <p>
        这是一条占满整个宽度的分割线。
      </p>
      <Divider style={{ width: "100%" }} />
    </div>
  );
}
 
export default App;
```

![ReactJS 蓝图分隔线组件 示例](https://i.imgur.com/Om6ZGHF.png)