Skip to content

N
nutui-react

京东前端 / nutui-react

通知 0
Star 2
Fork 0
N
nutui-react

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 e5d8da49 编写于 作者: V vickyYe 提交者： GitHub
浏览文件
操作

feat: divider组件新增props (#162)

上级 e4516ded
隐藏空白更改
内联 并排
Showing with 427 addition and 102 deletion
src/packages/divider/demo.tsx
浏览文件 @ e5d8da49
import React from 'react'
import { Divider } from './divider'
import { Cell } from '../cell/cell'
const DividerDemo = () => {
return (
<>
<div className="demo">
<h2>基础用法</h2>
<Cell>
<Divider />
</Cell>
<Divider />
<h2>展示文本</h2>
<Cell>
<Divider>文本</Divider>
</Cell>
<Divider>文本</Divider>
<h2>内容位置</h2>
<Cell>
<Divider contentPosition="left">文本</Divider>
</Cell>
<Cell>
<Divider contentPosition="right">文本</Divider>
</Cell>
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
<h2>虚线</h2>
<Cell>
<Divider dashed>文本</Divider>
</Cell>
<Divider dashed>文本</Divider>
<h2>自定义样式</h2>
<Cell>
<Divider
styles={{
color: '#1989fa',
borderColor: '#1989fa',
padding: '0 16px',
}}
>
文本
</Divider>
</Cell>
<Divider
styles={{
color: '#1989fa',
borderColor: '#1989fa',
padding: '0 16px',
}}
>
文本
</Divider>
<h2>垂直分割线</h2>
<div style={{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }}>
文本
<Divider direction="vertical" />
<a href="#/Divider" style={{ color: '#1989fa' }}>
链接
</a>
<Divider direction="vertical" />
<a href="#/Divider" style={{ color: '#1989fa' }}>
链接
</a>
</div>
</div>
</>
)
......
src/packages/divider/divider.scss
浏览文件 @ e5d8da49
.nut-divider {
display: flex;
align-items: center;
font-size: 14px;
color: #909ca4;
margin: 8px 0;
width: 100%;
font-size: $divider-text-font-size;
color: $divider-text-color;
margin: $divider-margin;
// width: 100%;
&::before,
&::after {
content: '';
border: 1px solid currentColor;
border-width: 1px 0 0;
border: $divider-line-height solid currentColor;
border-width: $divider-line-height 0 0;
height: $divider-line-height;
flex: 1;
}
......@@ -18,11 +19,11 @@
&.nut-divider__left,
&.nut-divider__right {
&::before {
margin-right: 8px;
margin-right: $divider-before-margin-right;
}
&::after {
margin-left: 8px;
margin-left: $divider-after-margin-left;
}
}
......@@ -51,4 +52,12 @@
transform: scaleY(0.5);
}
}
&.nut-divider__vertical {
position: relative;
top: $divider-vertical-top;
display: inline-block;
height: $divider-vertical-height;
border-left: 1px solid $divider-vertical-border-left;
margin: $divider-vertical-margin;
}
}
src/packages/divider/divider.tsx
浏览文件 @ e5d8da49
......@@ -2,34 +2,52 @@ import React, { FunctionComponent } from 'react'
import classNames from 'classnames'
import bem from '@/utils/bem'
export type ContentPositionType = 'left' | 'center' | 'right'
export type DirectionType = 'horizontal' | 'vertical'
export interface DividerProps {
contentPosition: string
contentPosition: ContentPositionType
dashed: boolean
hairline: boolean
styles?: React.CSSProperties
className?: string
direction?: DirectionType
}
const defaultProps = {
contentPosition: 'center',
dashed: false,
hairline: true,
direction: 'horizontal',
} as DividerProps
export const Divider: FunctionComponent<
Partial<DividerProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const { children, contentPosition, dashed, hairline, styles, className } = {
const {
children,
contentPosition,
dashed,
hairline,
styles,
className,
direction,
} = {
...defaultProps,
...props,
}
const dividerBem = bem('divider')
const classes = classNames({
[dividerBem()]: true,
[dividerBem('center')]: children,
[dividerBem('left')]: contentPosition === 'left',
[dividerBem('right')]: contentPosition === 'right',
[dividerBem('dashed')]: dashed,
[dividerBem('hairline')]: hairline,
})
const classes =
direction === 'horizontal'
? classNames({
[dividerBem()]: true,
[dividerBem('center')]: children,
[dividerBem('left')]: contentPosition === 'left',
[dividerBem('right')]: contentPosition === 'right',
[dividerBem('dashed')]: dashed,
[dividerBem('hairline')]: hairline,
})
: classNames({
[dividerBem()]: true,
[dividerBem('vertical')]: direction === 'vertical',
})
return (
<div className={`${classes} ${className || ''}`} style={styles}>
{children}
......
src/packages/divider/doc.en-US.md
浏览文件 @ e5d8da49
# Divider 分割线
# Divider
### 介绍
### Intro
用于将内容分隔为多个区域。
Separate content into multiple areas.
### 安装
### Install
```js
import { Divider } from '@nutui/nutui-react';
```
## 代码演示
### Basic Usage
### 基础用法
Default render one horizontal divider line.
默认渲染一条水平分割线。
:::demo
```jsx
<Divider />
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider />
</>
);
};
export default App;
```
:::
### With Text
### 展示文本
Insert text into divider with default slot.
通过插槽在可以分割线中间插入内容。
:::demo
```jsx
<Divider>文本</Divider>
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider>Text</Divider>
</>
);
};
export default App;
```
:::
### 内容位置
### Content Position
通过 contentPosition 指定内容所在位置。
Set Content Position with `contentPosition` attribute.
```jsx
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider contentPosition="left">Text</Divider>
<Divider contentPosition="right">Text</Divider>
</>
);
};
export default App;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
### Dashed
```jsx
<Divider dashed>文本</Divider>
Render dashed divider line with `dashed` attribute.
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider dashed>Text</Divider>
</>
);
};
export default App;
```
:::
### Custom Style
User can custom divider style with `styles` attribute.
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>Text</Divider>
</>
);
};
export default App;
```
:::
### 自定义样式
### Vertical Divider
可以直接通过 styles 属性设置分割线的样式。
:::demo
```jsx
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>文本</Divider>
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<div>
文本
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>Link</a>
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>Link</a>
</div>
</>
);
};
export default App;
```
:::
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
| --------------- | ----------------------------- | ------- | ------ |
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置，可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| dashed | Whether to use dashed border | Boolean | false |
| hairline | Whether to use hairline | Boolean | true |
| contentPosition | Content position, can be set to left or right | String | center |
| styles | Modify custom styles | CSS | - |
| direction | The direction of divider, can be set to horizontal or vertical | String | 'horizontal' |
### Slots
| 名称 | 说明 |
| Name | Description |
| ------- | ---- |
| default | 内容 |
| default | Default slot |
src/packages/divider/doc.md
浏览文件 @ e5d8da49
......@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
```jsx
<Divider />
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider />
</>
);
};
export default App;
```
:::
### 展示文本
通过插槽在可以分割线中间插入内容。
```jsx
<Divider>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider>文本</Divider>
</>
);
};
export default App;
```
:::
### 内容位置
通过 contentPosition 指定内容所在位置。
```jsx
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
</>
);
};
export default App;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
```jsx
<Divider dashed>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider dashed>文本</Divider>
</>
);
};
export default App;
```
:::
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
```jsx
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>文本</Divider>
</>
);
};
export default App;
```
:::
### 垂直分割线
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<div>
文本
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>链接</a>
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>链接</a>
</div>
</>
);
};
export default App;
```
:::
## API
......@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置，可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| styles | 修改自定义样式 | CSS | - |
| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
......
src/packages/divider/doc.zh-TW.md
浏览文件 @ e5d8da49
......@@ -16,42 +16,137 @@ import { Divider } from '@nutui/nutui-react';
默认渲染一条水平分割线。
```jsx
<Divider />
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider />
</>
);
};
export default App;
```
:::
### 展示文本
通过插槽在可以分割线中间插入内容。
```jsx
<Divider>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider>文本</Divider>
</>
);
};
export default App;
```
:::
### 内容位置
通过 contentPosition 指定内容所在位置。
```jsx
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider contentPosition="left">文本</Divider>
<Divider contentPosition="right">文本</Divider>
</>
);
};
export default App;
```
:::
### 虚线
添加 dashed 属性使分割线渲染为虚线。
```jsx
<Divider dashed>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider dashed>文本</Divider>
</>
);
};
export default App;
```
:::
### 自定义样式
可以直接通过 styles 属性设置分割线的样式。
```jsx
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>文本</Divider>
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<Divider styles={{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }}>文本</Divider>
</>
);
};
export default App;
```
:::
### 垂直分割线
:::demo
```tsx
import React from "react";
import { Divider } from '@nutui/nutui-react';
const App = () => {
return (
<>
<div>
文本
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>链接</a>
<Divider direction="vertical" />
<a href="#" style={{ color: '#1989fa' }}>链接</a>
</div>
</>
);
};
export default App;
```
:::
## API
......@@ -62,7 +157,8 @@ import { Divider } from '@nutui/nutui-react';
| dashed | 是否使用虚线 | Boolean | false |
| hairline | 是否使用 0.5px 线 | Boolean | true |
| contentPosition | 内容位置，可选值为 left right | String | center |
| styles | 修改自定义样式 | css | - |
| styles | 修改自定义样式 | CSS | - |
| direction | 水平还是垂直类型,可选值为 horizontal vertical | String | 'horizontal' |
### Slots
......
src/styles/variables.scss
浏览文件 @ e5d8da49
......@@ -453,3 +453,16 @@ $circleprogress-primary-color: $primary-color !default;
$circleprogress-path-color: #e5e9f2 !default;
$circleprogress-text-color: #000000 !default;
$circleprogress-text-size: $font-size-3 !default;
// divider
$divider-margin: 16px 0 !default;
$divider-text-font-size: $font-size-2 !default;
$divider-text-color: #909ca4 !default;
$divider-line-height: 2px !default;
$divider-before-margin-right: 16px !default;
$divider-after-margin-left: 16px !default;
$divider-vertical-height: 12px !default;
$divider-vertical-top: 2px !default;
$divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
$divider-vertical-margin: 0 8px !default;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或