mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-23 11:57:40 +08:00
witt
104
components/divider/divider.tsx
Normal file
104
components/divider/divider.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import useTheme from '../styles/use-theme'
|
||||
import withDefaults from '../utils/with-defaults'
|
||||
import { DividerAlign, SnippetTypes } from '../utils/prop-types'
|
||||
import { getMargin } from '../spacer/spacer'
|
||||
import { ZeitUIThemesPalette } from 'components/styles/themes'
|
||||
|
||||
export type DividerTypes = SnippetTypes
|
||||
|
||||
interface Props {
|
||||
x?: number
|
||||
y?: number
|
||||
volume?: number
|
||||
type?: DividerTypes
|
||||
align?: DividerAlign
|
||||
className?: string
|
||||
}
|
||||
|
||||
const defaultProps = {
|
||||
x: 0,
|
||||
y: 2,
|
||||
volume: 1,
|
||||
align: 'center' as DividerAlign,
|
||||
type: 'default' as DividerTypes,
|
||||
className: '',
|
||||
}
|
||||
|
||||
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
|
||||
export type DividerProps = Props & typeof defaultProps & NativeAttrs
|
||||
|
||||
const getColor = (type: DividerTypes, palette: ZeitUIThemesPalette) => {
|
||||
const colors: { [key in DividerTypes]: string } = {
|
||||
default: palette.border,
|
||||
lite: palette.accents_1,
|
||||
success: palette.successLight,
|
||||
warning: palette.warningLight,
|
||||
error: palette.errorLight,
|
||||
secondary: palette.secondary,
|
||||
dark: palette.foreground,
|
||||
}
|
||||
return colors[type]
|
||||
}
|
||||
|
||||
const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
|
||||
volume, type, x, y, align, children, className, ...props
|
||||
}) => {
|
||||
const theme = useTheme()
|
||||
const color = useMemo(() => getColor(type, theme.palette), [type, theme.palette])
|
||||
const alignClassName = useMemo(() => {
|
||||
if (!align || align === 'center') return ''
|
||||
if (align === 'left' || align === 'start') return 'start'
|
||||
return 'end'
|
||||
}, [align])
|
||||
const textColor = type === 'default' ? theme.palette.foreground : color
|
||||
const top = y ? getMargin(y / 2) : 0
|
||||
const left = x ? getMargin(x / 2) : 0
|
||||
|
||||
return (
|
||||
<div role="separator" className={`divider ${className}`} {...props}>
|
||||
{children && <span className={`text ${alignClassName}`}>{children}</span>}
|
||||
<style jsx>{`
|
||||
.divider {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: calc(${volume} * 1px);
|
||||
background-color: ${color};
|
||||
margin: ${top} ${left};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
min-height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0 ${theme.layout.gap};
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
background-color: ${theme.palette.background};
|
||||
color: ${textColor};
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.text.start {
|
||||
transform: translateY(-50%);
|
||||
left: 7%;
|
||||
}
|
||||
|
||||
.text.end {
|
||||
transform: translateY(-50%);
|
||||
left: auto;
|
||||
right: 7%;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default withDefaults(Divider, defaultProps)
|
||||
3
components/divider/index.ts
Normal file
3
components/divider/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import Divider from './divider'
|
||||
|
||||
export default Divider
|
||||
@@ -48,3 +48,4 @@ export { default as Snippet } from './snippet'
|
||||
export { default as Tooltip } from './tooltip'
|
||||
export { default as Popover } from './popover'
|
||||
export { default as Slider } from './slider'
|
||||
export { default as Divider } from './divider'
|
||||
|
||||
@@ -19,7 +19,7 @@ const defaultProps = {
|
||||
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
|
||||
export type SpacerProps = Props & typeof defaultProps & NativeAttrs
|
||||
|
||||
const getMargin = (num: number): string => {
|
||||
export const getMargin = (num: number): string => {
|
||||
if (num < 0) {
|
||||
useWarning('Props "x"/"y" must be greater than or equal to 0', 'Spacer')
|
||||
return '0'
|
||||
|
||||
@@ -80,6 +80,14 @@ const placement = tuple(
|
||||
'rightEnd',
|
||||
)
|
||||
|
||||
const dividerAlign = tuple(
|
||||
'start',
|
||||
'center',
|
||||
'end',
|
||||
'left',
|
||||
'right',
|
||||
)
|
||||
|
||||
export type ButtonTypes = typeof buttonTypes[number]
|
||||
|
||||
export type NormalSizes = typeof normalSizes[number]
|
||||
@@ -97,3 +105,5 @@ export type CopyTypes = typeof copyTypes[number]
|
||||
export type TriggerTypes = typeof triggerTypes[number]
|
||||
|
||||
export type Placement = typeof placement[number]
|
||||
|
||||
export type DividerAlign = typeof dividerAlign[number]
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]}]},{"name":"customization","children":[]}]
|
||||
[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"General"},{"name":"text","url":"/en-us/components/text","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]}]},{"name":"customization","children":[]}]
|
||||
|
||||
@@ -1 +1 @@
|
||||
[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"通用"},{"name":"文本 Text","url":"/zh-cn/components/text","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
|
||||
[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"通用"},{"name":"文本 Text","url":"/zh-cn/components/text","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
|
||||
|
||||
163
pages/en-us/components/divider.mdx
Normal file
163
pages/en-us/components/divider.mdx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Divider, Text } from 'components'
|
||||
|
||||
export const meta = {
|
||||
title: 'Divider',
|
||||
group: 'Others',
|
||||
}
|
||||
|
||||
## Divider
|
||||
|
||||
A divider line separates different content.
|
||||
|
||||
<Playground
|
||||
desc="Basic usage."
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
In server-driven content negotiation, or proactive content negotiation,
|
||||
the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
|
||||
These headers describe the preferred choice of the user.
|
||||
</Text>
|
||||
<Divider/>
|
||||
<Text>
|
||||
The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
|
||||
The algorithm is server-specific and not defined in the standard.
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="With Text"
|
||||
desc="Display text or components in diriver."
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
In server-driven content negotiation, or proactive content negotiation,
|
||||
the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
|
||||
These headers describe the preferred choice of the user.
|
||||
</Text>
|
||||
<Divider>HTTP</Divider>
|
||||
<Text>
|
||||
The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
|
||||
The algorithm is server-specific and not defined in the standard.
|
||||
</Text>
|
||||
<Divider align="start">standard headers</Divider>
|
||||
<Text>
|
||||
The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
|
||||
(Accept, Accept-Charset, Accept-Encoding, Accept-Language)
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Space"
|
||||
desc="Custom size of white space around components."
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
In server-driven content negotiation, or proactive content negotiation,
|
||||
the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
|
||||
These headers describe the preferred choice of the user.
|
||||
</Text>
|
||||
<Divider y={5}>HTTP</Divider>
|
||||
<Text>
|
||||
The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
|
||||
The algorithm is server-specific and not defined in the standard.
|
||||
</Text>
|
||||
<Divider x={5} y={5}>standard headers</Divider>
|
||||
<Text>
|
||||
The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
|
||||
(Accept, Accept-Charset, Accept-Encoding, Accept-Language)
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Volume"
|
||||
desc="Specify the volume of the component."
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
In server-driven content negotiation, or proactive content negotiation,
|
||||
the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
|
||||
These headers describe the preferred choice of the user.
|
||||
</Text>
|
||||
<Divider volume={2} y={3} />
|
||||
<Text>
|
||||
The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
|
||||
The algorithm is server-specific and not defined in the standard.
|
||||
</Text>
|
||||
<Divider volume={20} y={3}>standard headers</Divider>
|
||||
<Text>
|
||||
The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
|
||||
(Accept, Accept-Charset, Accept-Encoding, Accept-Language)
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Types"
|
||||
desc="Different state."
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
In server-driven content negotiation, or proactive content negotiation,
|
||||
the browser (or any other kind of user-agent) sends several HTTP headers along with the URL.
|
||||
These headers describe the preferred choice of the user.
|
||||
</Text>
|
||||
<Divider volume={2} y={3} type="success">HTTP</Divider>
|
||||
<Text>
|
||||
The server uses them as hints and an internal algorithm chooses the best content to serve to the client.
|
||||
The algorithm is server-specific and not defined in the standard.
|
||||
</Text>
|
||||
<Divider volume={20} y={3} type="warning">standard headers</Divider>
|
||||
<Text>
|
||||
The HTTP/1.1 standard defines list of the standard headers that start server-driven negotiation
|
||||
(Accept, Accept-Charset, Accept-Encoding, Accept-Language)
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/en-us/components/divider.mdx">
|
||||
<Attributes.Title>Divider.Props</Attributes.Title>
|
||||
|
||||
| Attribute | Description | Type | Accepted values | Default
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **x** | x-axis spacing | `number` / `float` | - | 0 |
|
||||
| **y** | y-axis spacing | `number` / `float` | - | 2 |
|
||||
| **type** | type of divier | [DividerTypes](#dividertypes) | - | `default` |
|
||||
| **align** | alignment of text | [DividerAlign](#divideralign) | - | `center` |
|
||||
| **volume** | size of component | `number` / `float` | - | 1 |
|
||||
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>DividerTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type DividerTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'dark'
|
||||
| 'lite'
|
||||
```
|
||||
|
||||
<Attributes.Title>DividerAlign</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type DividerAlign = 'center'
|
||||
| 'start'
|
||||
| 'left'
|
||||
| 'end'
|
||||
| 'right'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
154
pages/zh-cn/components/divider.mdx
Normal file
154
pages/zh-cn/components/divider.mdx
Normal file
@@ -0,0 +1,154 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Divider, Text } from 'components'
|
||||
|
||||
export const meta = {
|
||||
title: '分割线 Divider',
|
||||
group: '其他',
|
||||
}
|
||||
|
||||
## Divider / 分割线
|
||||
|
||||
用于分割不同内容块的线条。
|
||||
|
||||
<Playground
|
||||
desc="基础示例。"
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。
|
||||
这些消息头描述了用户倾向的选择。
|
||||
</Text>
|
||||
<Divider/>
|
||||
<Text>
|
||||
服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。
|
||||
相关算法与具体的服务器相关，并没有在规范中进行规定。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="分割文字"
|
||||
desc="在分割线上显示文字或组件。"
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。
|
||||
这些消息头描述了用户倾向的选择。
|
||||
</Text>
|
||||
<Divider>内容协商</Divider>
|
||||
<Text>
|
||||
服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。
|
||||
相关算法与具体的服务器相关，并没有在规范中进行规定。
|
||||
</Text>
|
||||
<Divider align="start">标准头信息</Divider>
|
||||
<Text>
|
||||
HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="间隔"
|
||||
desc="自定义组件周围的间隔大小。"
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。
|
||||
这些消息头描述了用户倾向的选择。
|
||||
</Text>
|
||||
<Divider y={5}>内容协商</Divider>
|
||||
<Text>
|
||||
服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。
|
||||
相关算法与具体的服务器相关，并没有在规范中进行规定。
|
||||
</Text>
|
||||
<Divider x={5} y={5}>标准头信息</Divider>
|
||||
<Text>
|
||||
HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="体积"
|
||||
desc="指定组件内部的体积。"
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。
|
||||
这些消息头描述了用户倾向的选择。
|
||||
</Text>
|
||||
<Divider volume={2} y={3} />
|
||||
<Text>
|
||||
服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。
|
||||
相关算法与具体的服务器相关，并没有在规范中进行规定。
|
||||
</Text>
|
||||
<Divider volume={20} y={3}>标准头信息</Divider>
|
||||
<Text>
|
||||
HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="类型"
|
||||
desc="以不同的色彩表达类型。"
|
||||
scope={{ Divider, Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text>
|
||||
在服务端驱动型协商机制或者主动协商机制中，浏览器（或者其他任何类型的用户代理）会随同 URL 发送一系列的消息头。
|
||||
这些消息头描述了用户倾向的选择。
|
||||
</Text>
|
||||
<Divider volume={2} y={3} type="success">内容协商</Divider>
|
||||
<Text>
|
||||
服务器则以此为线索，通过内部算法来选择最佳方案提供给客户端。
|
||||
相关算法与具体的服务器相关，并没有在规范中进行规定。
|
||||
</Text>
|
||||
<Divider volume={20} y={3} type="warning">标准头信息</Divider>
|
||||
<Text>
|
||||
HTTP/1.1 规范指定了一系列的标准消息头用于启动服务端驱动型内容协商 （Accept、Accept-Charset、 Accept-Encoding、Accept-Language）。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/zh-cn/components/divider.mdx">
|
||||
<Attributes.Title>Divider.Props</Attributes.Title>
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **x** | x 轴间距 | `number` / `float` | - | 0 |
|
||||
| **y** | y 轴间距 | `number` / `float` | - | 2 |
|
||||
| **type** | 分割线的类型 | [DividerTypes](#dividertypes) | - | `default` |
|
||||
| **align** | 子组件的对齐方式 | [DividerAlign](#divideralign) | - | `center` |
|
||||
| **volume** | 组件的大小 | `number` / `float` | - | 1 |
|
||||
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>DividerTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type DividerTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'dark'
|
||||
| 'lite'
|
||||
```
|
||||
|
||||
<Attributes.Title>DividerAlign</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type DividerAlign = 'center'
|
||||
| 'start'
|
||||
| 'left'
|
||||
| 'end'
|
||||
| 'right'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
@@ -1,10 +1,10 @@
|
||||
const token = process.env.GIT_ORG_READONLY
|
||||
if (!token) require('dotenv').config()
|
||||
if (!process.env.GIT_ORG_READONLY) require('dotenv').config()
|
||||
const fs = require('fs-extra')
|
||||
const path = require('path')
|
||||
const { GraphQLClient } = require('graphql-request')
|
||||
const target = path.join(__dirname, '../lib/data/', 'contributors.json')
|
||||
|
||||
const token = process.env.GIT_ORG_READONLY
|
||||
if (!token) {
|
||||
console.error('> Not found "GIT_ORG_READONLY" in "process.env".\n')
|
||||
console.log(' Env variables are automatically injected at production.')
|
||||
|
||||
Reference in New Issue
Block a user