diff --git a/lib/components/attributes/attributes-title.tsx b/lib/components/attributes/attributes-title.tsx index f162f02..15d6572 100644 --- a/lib/components/attributes/attributes-title.tsx +++ b/lib/components/attributes/attributes-title.tsx @@ -1,15 +1,16 @@ import React from 'react' import { Spacer, Code, useTheme } from 'components' import VirtualAnchor from 'lib/components/anchor' +import { useConfigs } from 'lib/config-context' export interface AttributesTitleProps { alias?: string } -const getAlias = (alias?: string) => { +const getAlias = (isChinese: boolean, alias?: string, ) => { if (!alias) return null return ( - [alias: {alias}] + [{isChinese ? '别名' : 'alias'}: {alias}] ) } @@ -17,12 +18,13 @@ const AttributesTitle: React.FC> = children, alias, }) => { const theme = useTheme() + const { isChinese } = useConfigs() return ( <>

{children} - {getAlias(alias)} + {getAlias(!!isChinese, alias)}

diff --git a/lib/components/attributes/attributes.tsx b/lib/components/attributes/attributes.tsx index cfc8f1a..f7c4ce8 100644 --- a/lib/components/attributes/attributes.tsx +++ b/lib/components/attributes/attributes.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react' import { Card, Link, Spacer, useTheme } from 'components' import AttributesTitle from './attributes-title' import VirtualAnchor from 'lib/components/anchor' +import { useConfigs } from '../../config-context' export interface AttributesProps { edit: string @@ -11,6 +12,7 @@ const Attributes: React.FC> = React.mem edit, children, }) => { const theme = useTheme() + const { isChinese } = useConfigs() const link = useMemo(() => { return `https://github.com/zeit-ui/react/blob/master${edit || '/pages'}` }, []) @@ -18,12 +20,14 @@ const Attributes: React.FC> = React.mem return ( <> -

Attributes

+

APIs{isChinese && ' / 接口文档'}

{children} - Edit this page on GitHub + + {isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'} + - - ) - }) +const ActiveCatalog: React.FC = React.memo(({ + name, localeName, ...props +}) => { + const theme = useTheme() + const { pathname } = useRouter() + const isActive = pathname.includes(`/${name}/`) + + return ( + + {localeName || name} + + + ) +}) export default ActiveCatalog diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx index e8f5cb7..bee74be 100644 --- a/lib/components/sidebar/index.tsx +++ b/lib/components/sidebar/index.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren, useEffect, useRef } from 'react' import Router from 'next/router' import { useTheme, Spacer } from 'components' import SideItem, { SideItemProps, Sides } from './side-item' -import { useConfigs } from '../config-context' +import { useConfigs } from 'lib/config-context' export interface Props { } diff --git a/lib/components/sidebar/side-item.tsx b/lib/components/sidebar/side-item.tsx index 1046fd4..aeb352e 100644 --- a/lib/components/sidebar/side-item.tsx +++ b/lib/components/sidebar/side-item.tsx @@ -6,6 +6,7 @@ import { useTheme } from 'components' export type Sides = { name: string url?: string + localeName?: string children?: Sides | Array } @@ -23,7 +24,7 @@ const SideItem: React.FC> = React.memo(({ {sides.map((side, index) => { return (
- {!side.url && } + {!side.url && } {side.url && (
{side.name} diff --git a/lib/components/config-context.ts b/lib/config-context.ts similarity index 82% rename from lib/components/config-context.ts rename to lib/config-context.ts index 02dbc16..74e2225 100644 --- a/lib/components/config-context.ts +++ b/lib/config-context.ts @@ -2,6 +2,8 @@ import React from 'react' export interface Configs { onChange?: Function + isChinese?: boolean + updateChineseState: Function sidebarScrollHeight: number updateSidebarScrollHeight: Function } @@ -9,6 +11,7 @@ export interface Configs { export const defaultConfigs: Configs = { sidebarScrollHeight: 0, updateSidebarScrollHeight: () => {}, + updateChineseState: () => {}, } export const ConfigContext = React.createContext(defaultConfigs) diff --git a/lib/components/config-provider.tsx b/lib/config-provider.tsx similarity index 64% rename from lib/components/config-provider.tsx rename to lib/config-provider.tsx index 191f433..31d8acf 100644 --- a/lib/components/config-provider.tsx +++ b/lib/config-provider.tsx @@ -1,6 +1,7 @@ import React, { useMemo, useState } from 'react' import withDefaults from 'components/utils/with-defaults' -import { ConfigContext, Configs } from './config-context' +import { ConfigContext, Configs } from 'lib/config-context' +import { useRouter } from 'next/router' interface Props { onChange?: Function @@ -14,12 +15,16 @@ export type ConfigProviderProps = Props & typeof defaultProps const ConfigProvider: React.FC> = React.memo(({ onChange, children, }) => { + const { pathname } = useRouter() + const [isChinese, setIsChinese] = useState(() => pathname.includes('zh-cn')) const [scrollHeight, setScrollHeight] = useState(0) - const updateSidebarScrollHeight = (height: number) => { - setScrollHeight(height) - } + const updateSidebarScrollHeight = (height: number) => setScrollHeight(height) + const updateChineseState = (state: boolean) => setIsChinese(state) + const initialValue = useMemo(() => ({ onChange, + isChinese, + updateChineseState, sidebarScrollHeight: scrollHeight, updateSidebarScrollHeight, }), [onChange, scrollHeight]) diff --git a/next.config.js b/next.config.js index 87df920..9820534 100644 --- a/next.config.js +++ b/next.config.js @@ -25,6 +25,28 @@ const nextConfig = { config.resolve.modules.push(__dirname) return config }, + + experimental: { + redirects() { + return [ + { + source: '/docs/:path*', + permanent: true, + destination: '/en-us/:path*' + }, + { + source: '/zh-cn/', + permanent: true, + destination: '/zh-cn', + }, + { + source: '/en-us/', + permanent: true, + destination: '/en-us', + }, + ] + }, + }, } module.exports = withMDX(nextConfig) diff --git a/pages/_app.tsx b/pages/_app.tsx index f5a7ed6..151c4fb 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -3,7 +3,7 @@ import { NextPage } from 'next' import { AppProps } from 'next/app' import { useCallback, useState } from 'react' import { CSSBaseline, ZEITUIProvider, useTheme } from 'components' -import ConfigContext from 'lib/components/config-provider' +import ConfigContext from 'lib/config-provider' const Application: NextPage = ({ Component, pageProps }) => { const theme = useTheme() diff --git a/pages/docs/index.js b/pages/docs/index.js deleted file mode 100644 index 7cfb645..0000000 --- a/pages/docs/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import redirect from 'lib/redirect' - -export default redirect('/docs/getting-started/introduction') diff --git a/pages/docs/components/auto-complete.mdx b/pages/en-us/components/auto-complete.mdx similarity index 100% rename from pages/docs/components/auto-complete.mdx rename to pages/en-us/components/auto-complete.mdx diff --git a/pages/docs/components/avatar.mdx b/pages/en-us/components/avatar.mdx similarity index 100% rename from pages/docs/components/avatar.mdx rename to pages/en-us/components/avatar.mdx diff --git a/pages/docs/components/badge.mdx b/pages/en-us/components/badge.mdx similarity index 100% rename from pages/docs/components/badge.mdx rename to pages/en-us/components/badge.mdx diff --git a/pages/docs/components/button-dropdown.mdx b/pages/en-us/components/button-dropdown.mdx similarity index 100% rename from pages/docs/components/button-dropdown.mdx rename to pages/en-us/components/button-dropdown.mdx diff --git a/pages/docs/components/button.mdx b/pages/en-us/components/button.mdx similarity index 100% rename from pages/docs/components/button.mdx rename to pages/en-us/components/button.mdx diff --git a/pages/docs/components/capacity.mdx b/pages/en-us/components/capacity.mdx similarity index 100% rename from pages/docs/components/capacity.mdx rename to pages/en-us/components/capacity.mdx diff --git a/pages/docs/components/card.mdx b/pages/en-us/components/card.mdx similarity index 100% rename from pages/docs/components/card.mdx rename to pages/en-us/components/card.mdx diff --git a/pages/docs/components/checkbox.mdx b/pages/en-us/components/checkbox.mdx similarity index 100% rename from pages/docs/components/checkbox.mdx rename to pages/en-us/components/checkbox.mdx diff --git a/pages/docs/components/code.mdx b/pages/en-us/components/code.mdx similarity index 95% rename from pages/docs/components/code.mdx rename to pages/en-us/components/code.mdx index d491815..37bc95f 100644 --- a/pages/docs/components/code.mdx +++ b/pages/en-us/components/code.mdx @@ -10,7 +10,7 @@ export const meta = { Show source code in a standardized way. -Want to display shell code snippets? Try Snippet. +Want to display shell code snippets? Try Snippet. + Docs of Button `} /> diff --git a/pages/docs/components/loading.mdx b/pages/en-us/components/loading.mdx similarity index 100% rename from pages/docs/components/loading.mdx rename to pages/en-us/components/loading.mdx diff --git a/pages/docs/components/modal.mdx b/pages/en-us/components/modal.mdx similarity index 99% rename from pages/docs/components/modal.mdx rename to pages/en-us/components/modal.mdx index 3e95e12..37022f9 100644 --- a/pages/docs/components/modal.mdx +++ b/pages/en-us/components/modal.mdx @@ -10,7 +10,7 @@ export const meta = { Display popup content that requires attention or provides additional information. -Just want a text notification? Try Toast component. +Just want a text notification? Try Toast component. Looking for Loading? Use the Loading Component. +Looking for Loading? Use the Loading Component. here. +want to customize some colors? please read here. Get palette from useTheme.}> diff --git a/pages/docs/customization/themes.mdx b/pages/en-us/customization/themes.mdx similarity index 100% rename from pages/docs/customization/themes.mdx rename to pages/en-us/customization/themes.mdx diff --git a/pages/docs/getting-started/installation.mdx b/pages/en-us/getting-started/installation.mdx similarity index 100% rename from pages/docs/getting-started/installation.mdx rename to pages/en-us/getting-started/installation.mdx diff --git a/pages/docs/getting-started/introduction.mdx b/pages/en-us/getting-started/introduction.mdx similarity index 97% rename from pages/docs/getting-started/introduction.mdx rename to pages/en-us/getting-started/introduction.mdx index 304f2fa..bfdd5b1 100644 --- a/pages/docs/getting-started/introduction.mdx +++ b/pages/en-us/getting-started/introduction.mdx @@ -3,11 +3,9 @@ import { Code, Link, Text, Spacer, Note } from 'components' export const meta = { title: 'introduction', - description: 'description', index: 5, } - ## Introduction ### Why @zeit-ui/react diff --git a/pages/docs/getting-started/server-render.mdx b/pages/en-us/getting-started/server-render.mdx similarity index 100% rename from pages/docs/getting-started/server-render.mdx rename to pages/en-us/getting-started/server-render.mdx diff --git a/pages/en-us/index.js b/pages/en-us/index.js new file mode 100644 index 0000000..5c9a483 --- /dev/null +++ b/pages/en-us/index.js @@ -0,0 +1,3 @@ +import redirect from 'lib/redirect' + +export default redirect('/en-us/getting-started/introduction') diff --git a/pages/index.ts b/pages/index.ts index 48a596b..afdb28b 100644 --- a/pages/index.ts +++ b/pages/index.ts @@ -1,3 +1,3 @@ import redirect from 'lib/redirect' -export default redirect('/docs') +export default redirect('/en-us') diff --git a/pages/zh-cn/components/auto-complete.mdx b/pages/zh-cn/components/auto-complete.mdx new file mode 100644 index 0000000..ab1ebd5 --- /dev/null +++ b/pages/zh-cn/components/auto-complete.mdx @@ -0,0 +1,267 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { AutoComplete, Spacer, Badge, Row } from 'components' +import { useState, useRef, useEffect } from 'react' + +export const meta = { + title: 'Auto-Complete / 自动完成', + index: 104, +} + +## Auto Complete / 自动完成 + +输入框的自动完成控制。 + + { + const options = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + return +} +`} /> + + { + const options = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + return +} +`} /> + + { + const allOptions = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + const [options, setOptions] = useState() + const searchHandler = (currentValue) => { + if (!currentValue) return setOptions([]) + const relatedOptions = allOptions.filter(item => item.value.includes(currentValue)) + setOptions(relatedOptions) + } + return +} +`} /> + + { + const allOptions = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + const [options, setOptions] = useState() + const [searching, setSearching] = useState(false) + const timer = useRef() + // triggered every time input + const searchHandler = (currentValue) => { + if (!currentValue) return setOptions([]) + setSearching(true) + const relatedOptions = allOptions.filter(item => item.value.includes(currentValue)) + // this is mock async request + // you can get data in any way + timer.current && clearTimeout(timer.current) + timer.current = setTimeout(() => { + setOptions(relatedOptions) + setSearching(false) + clearTimeout(timer.current) + }, 1000) + } + return ( + + ) +} +`} /> + + + + 等待中... + + +`} /> + + { + const allOptions = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + const [options, setOptions] = useState() + const searchHandler = (currentValue) => { + if (!currentValue) return setOptions([]) + const relatedOptions = allOptions.filter(item => item.value.includes(currentValue)) + setOptions(relatedOptions) + } + return ( + + + 没有结果 + + + ) +} +`} /> + + { + const makeOption = (label, value) => ( + +
+
+

最近的搜索结果

+ 推荐的 +
+ + {label} +
+ + ) + const allOptions = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + const [options, setOptions] = useState() + const searchHandler = (currentValue) => { + if (!currentValue) return setOptions([]) + const relatedOptions = allOptions.filter(item => item.value.includes(currentValue)) + const customOptions = relatedOptions.map(({ label, value }) => makeOption(label, value)) + setOptions(customOptions) + } + return ( + + ) +} +`} /> + + { + const options = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + return ( + <> + + + + + + + + + ) +} +`} /> + + { + const options = [ + { label: 'London', value: 'london' }, + { label: 'Sydney', value: 'sydney' }, + { label: 'Shanghai', value: 'shanghai' }, + ] + return +} +`} /> + + +AutoComplete.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **options** | 输入框的可选项 | [AutoCompleteOptions](#type-autocompleteoptions) | - | - | +| **status** | 输入框类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **size** | 输入框大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **initialValue** | 初始值 | `string` | - | - | +| **value** | 命令式的输入框的值 | `string` | - | - | +| **width** | 组件容器的宽度 | `string` | - | - | +| **clearable** | 是否显示清除按钮 | `boolean` | - | `false` | +| **searching** | 是否显示正在搜索中 | `boolean` | - | `false` | +| **onChange** | 输入框的值发生变化触发此事件 | `(value: string) => void` | - | - | +| **onSearch** | 搜索事件，当用户手动输入时触发 | `(value: string) => void` | - | - | +| **onSelect** | 当备选框被选中后触发的事件 | `(value: string) => void` | - | - | +| ... | 原生属性 | `InputHTMLAttributes` | `'autoComplete', 'type', 'className', ...` | - | + +AutoComplete.Item + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 用于鉴别多个备选项的唯一值 | `string` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +AutoComplete.Searching + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +AutoComplete.Empty + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +type AutoCompleteOptions + +```ts +Array<{ + label: string + value: string +} | AutoComplete.Item> +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/avatar.mdx b/pages/zh-cn/components/avatar.mdx new file mode 100644 index 0000000..cf9d9fa --- /dev/null +++ b/pages/zh-cn/components/avatar.mdx @@ -0,0 +1,100 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Avatar, Spacer } from 'components' + +export const meta = { + title: 'avatar / 头像', + description: 'avatar', +} + +## Avatar / 头像 + +头像代表一个用户或团队，堆叠的头像表示了一个群体。 + + { + const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160' + return ( + <> + + + + + + + + + + + ) +} +`} /> + + + { + const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160' + return ( + <> + + + + + + ) +} +`} /> + + + + + + + +`} /> + + + { + const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160' + return ( + <> + + + + + + ) +} +`} /> + + +Avatar.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **src** | 图像链接 | `string` | - | - | +| **stacked** | 是否堆叠显示 | `boolean` | - | `false` | +| **text** | 文本，当无图像链接时才会显示 | `string` | - | - | +| **size** | 头像大小 | `string` / `number` | `'mini', 'small', 'medium', 'large', number` | `medium` | +| **isSquare** | 是否为方形头像 | `boolean` | - | `false` | +| ... | 原生属性 | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/badge.mdx b/pages/zh-cn/components/badge.mdx new file mode 100644 index 0000000..9066e59 --- /dev/null +++ b/pages/zh-cn/components/badge.mdx @@ -0,0 +1,62 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Badge, Spacer } from 'components' + +export const meta = { + title: 'Badge / 徽章', +} + +## Badge / 徽章 + +显示一个需要注意的指标。 + + + 1 + 50 + 100 + 2020 + +`} /> + + + 成功 + 警告 + 错误 + 次要的 + +`} /> + + + 极小 + 较小 + 中等 + 最大 + +`} /> + + + +Badge.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 徽章的类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **size** | 徽章的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/button-dropdown.mdx b/pages/zh-cn/components/button-dropdown.mdx new file mode 100644 index 0000000..2e25790 --- /dev/null +++ b/pages/zh-cn/components/button-dropdown.mdx @@ -0,0 +1,147 @@ +import Layout from 'lib/components/layout' +import Attributes from 'lib/components/attributes' +import Playground from 'lib/components/playground' +import { ButtonDropdown, Spacer } from 'components' + +export const meta = { + title: 'Btn-Dropdown / 下拉按钮', + index: 105, +} + +## Button Dropdown / 下拉按钮 + +显示相关的操作。 + + + + 默认按钮 + 次要的按钮 + 第三个按钮 + +`} /> + + + 默认动作 + Secondary Action + Tertiary Action + +`} /> + + + Default Action + Secondary Action + Tertiary Action + +`} /> + + + + 次要的 + + + + 成功 + + + + 警告 + + + + 错误 + + +`} /> + + + + 自动-小 + + + + 自动-较小 + + + + 自动-中等 + + + + 小 + + + + 较小 + + + + 中等 + + + + 最大的 + + +`} /> + + + 访问账户 + 屏蔽账户 + 锁定账户 + 移除账户 + +`} /> + + +ButtonDropdown.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 按钮类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **size** | 按钮的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **loading** | 显示加载中的指示器 | `boolean` | - | `false` | +| **auto** | 自动缩放宽度 | `boolean` | - | `false` | +| **disabled** | 禁用所有按钮 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +ButtonDropdown.Item.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 当前单个按钮类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **main** | 是否为主要按钮 | `boolean` | - | `false` | +| **onClick** | 按钮的点击事件 | `MouseEventHandler` | - | - | +| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'name', 'className', ...` | - | + + + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/button.mdx b/pages/zh-cn/components/button.mdx new file mode 100644 index 0000000..e0920cd --- /dev/null +++ b/pages/zh-cn/components/button.mdx @@ -0,0 +1,105 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Button, Spacer } from 'components' +import Router from 'next/router' + +export const meta = { + title: 'Button / 按钮', +} + +## Button / 按钮 + +用于触发一个操作。 + + +动作 +`} /> + +动作 +`} /> + +点击 +`} /> + +阴影 +`} /> + + + + + + + + +`} /> + + + + + + + +`} /> + + + + + + + + + +`} /> + + +Button.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 按钮的类型 | `ButtonTypes` | `'default', 'secondary', 'success', 'warning', 'error', 'abort'` | `default` | +| **size** | 按钮的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **ghost** | 是否为反色按钮 | `boolean` | - | `false` | +| **loading** | 是否显示加载中的指示器 | `boolean` | - | `false` | +| **shadow** | 是否显示阴影 | `boolean` | - | `false` | +| **auto** | 自动缩放宽度 | `boolean` | - | `false` | +| **effect** | 是否显示动画效果 | `boolean` | - | `true` | +| **disabled** | 是否禁用按钮 | `boolean` | - | `false` | +| **onClick** | 点击事件 | `MouseEventHandler` | - | - | +| ... | 原生属性 | `ButtonHTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/capacity.mdx b/pages/zh-cn/components/capacity.mdx new file mode 100644 index 0000000..6c6889d --- /dev/null +++ b/pages/zh-cn/components/capacity.mdx @@ -0,0 +1,45 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Capacity, Spacer, useTheme } from 'components' + +export const meta = { + title: 'Capacity / 容量', +} + +## Capacity / 容量 + +显示一个容量指示器。 + + + + + + +`} /> + + { + const theme = useTheme() + return +} +`} /> + + +Capacity.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 当前的容量值 | `number` | - | 0 | +| **limit** | 最大的容量值 | `number` | - | 100 | +| **color** | CSS 颜色值 | `string` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/card.mdx b/pages/zh-cn/components/card.mdx new file mode 100644 index 0000000..63db555 --- /dev/null +++ b/pages/zh-cn/components/card.mdx @@ -0,0 +1,52 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Card } from 'components' + +export const meta = { + title: 'Card / 卡片', + description: 'tenotext', +} + +## Card / 卡片 + +基础的组件容器。 + + + +

一个基础的卡片。

+ +`} /> + + +

可悬停的卡片。

+ +`} /> + + +

这是一个 React 组件。

+

阴影卡片组件。

+ +`} /> + + +Card.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **hoverable** | 是否在悬停时增加阴影 | `boolean` | - | `false` | +| **shadow** | 是否总是显示阴影 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/checkbox.mdx b/pages/zh-cn/components/checkbox.mdx new file mode 100644 index 0000000..074039c --- /dev/null +++ b/pages/zh-cn/components/checkbox.mdx @@ -0,0 +1,89 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Checkbox, Spacer } from 'components' + +export const meta = { + title: 'Checkbox / 复选框', +} + +## Checkbox / 复选框 + +用于表示多个可选项。 + + +墨西哥 +`} /> + + + 悉尼 + + 北京 + +`} /> + + { + const handler = value => { + console.log(value) + } + return ( + + 悉尼 + 北京 + 伦敦 + 东京 + + ) +} +`} /> + + +Checkbox.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **checked** | 是否选中 | `boolean` | - | - | +| **initialChecked** | 初始状态是否选中 | `boolean` | - | `false` | +| **onChange** | 复选框的变化事件 | `CheckboxEvent` | - | - | +| **value** | 唯一的鉴别值 (仅在组内可用) | `string` | - | - | +| **disabled** | 禁用复选框 | `boolean` | - | `false` | +| ... | 原生属性 | `LabelHTMLAttributes` | `'form', 'className', ...` | - | + +Checkbox.Group.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 选中的一组值 | `Array` | - | `[]` | +| **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` | +| **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - | + +CheckboxEvent + +```ts +interface CheckboxEventTarget { + checked: boolean +} + +export interface CheckboxEvent { + target: CheckboxEventTarget + stopPropagation: () => void + preventDefault: () => void + nativeEvent: React.ChangeEvent +} +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/code.mdx b/pages/zh-cn/components/code.mdx new file mode 100644 index 0000000..c06cf27 --- /dev/null +++ b/pages/zh-cn/components/code.mdx @@ -0,0 +1,69 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Code, Note, Link } from 'components' + +export const meta = { + title: 'Code / 代码', +} + +## Code / 代码 + +以标准化的方式展示源代码。 + +想要展示 Shell 代码片段或一个命令？可以试试 Snippet / 片段 组件。 + +Run npm i @zeit-ui/react to install.

+`} /> + + + { + const codes = \`npm i @zeit-ui/react +yarn add @zeit-ui/react\` + return {codes} +} +`} /> + + { + const codes = \`npm i @zeit-ui/react +yarn add @zeit-ui/react\` + return {codes} +} +`} /> + + { + const codes = \`npm i @zeit-ui/react npm i @zeit-ui/react npm i @zeit-ui/react +yarn add @zeit-ui/react\` + return {codes} +} +`} /> + + +Code.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **block** | 展示多行的代码块 | `boolean` | - | `false` | +| **width** | 设置 CSS 宽度 | `string` | - | `initial` | +| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/collapse.mdx b/pages/zh-cn/components/collapse.mdx new file mode 100644 index 0000000..99b9e2d --- /dev/null +++ b/pages/zh-cn/components/collapse.mdx @@ -0,0 +1,96 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Collapse, Spacer, Text, Code } from 'components' + +export const meta = { + title: 'Collapse / 折叠框', +} + +## Collapse / 折叠框 + +折叠显示大段的文本或组件内容，通常也被称为手风琴。 + + + + HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。 + 它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 + + + 层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言， + 用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。 + CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 + + +`} /> + + + + HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。 + 它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 + + + 层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言， + 用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。 + CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 + + +`} /> + + + + HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。 + 它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 + + Cascading Style Sheets，缩写为 CSS}> + 层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言， + 用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。 + CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 + + +`} /> + +HyperText Markup Language}> + HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。 + 它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。 + +`} /> + + +Collapse.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **title**(必须的) | 标题值 | `string` | - | - | +| **subtitle** | 子标题内容 | `string` | - | - | +| **initialVisible** | 初始时是否展开 | `boolean` | - | `false` | +| **shadow** | 以阴影模式展示 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | + +Collapse.Group.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **accordion** | 手风琴模式 (一次最多打开一个) | `boolean` | - | `true` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/description.mdx b/pages/zh-cn/components/description.mdx new file mode 100644 index 0000000..649e873 --- /dev/null +++ b/pages/zh-cn/components/description.mdx @@ -0,0 +1,39 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Description, Code } from 'components' + +export const meta = { + title: 'Description / 描述', +} + +## Description / 描述 + +显示简短的信息和描述内容。 + + +`} /> + +在 React 中父子组件 通信 的最佳实践。} /> +`} /> + + +Description.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **title** | 标题文本 | `ReactNode` / `string` | - | - | +| **content** | 内容文本 | `ReactNode` / `string` | - | - | +| ... | 原生属性 | `HTMLAttributes` | - | - | + + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/display.mdx b/pages/zh-cn/components/display.mdx new file mode 100644 index 0000000..2a7de0c --- /dev/null +++ b/pages/zh-cn/components/display.mdx @@ -0,0 +1,76 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Display, Code, Snippet } from 'components' + +export const meta = { + title: 'Display / 陈列框', + description: 'tenotext', +} + +## Display / 陈列框 + +以居中对齐的方式展示重要的信息或图像。 + + + + +`} /> + + + { + const codes = \`{ + "build": { + "env": { + "VARIABLE_NAME": "@secret-name" + } + } +}\` + return ( + + {codes} + + ) +} +`} /> + + + yarn add @zeit-ui/react + +`} /> + +将域名 www.zeit.rocks 重定向至 zeit.rocks。

}> + + +`} /> + + +Display.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **caption** | description for display block | `ReactNode` / `string` | - | - | +| **shadow** | show shadow | `boolean` | - | `false` | +| **width** | set width | `string` | - | `fit-content` | +| ... | 原生属性 | `HTMLAttributes` | - | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/dot.mdx b/pages/zh-cn/components/dot.mdx new file mode 100644 index 0000000..e1a1cc1 --- /dev/null +++ b/pages/zh-cn/components/dot.mdx @@ -0,0 +1,45 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Dot } from 'components' + +export const meta = { + title: 'Dot / 点', + description: 'tenotext', +} + +## Dot / 点 + +点可以表达语句的状态，或是仅用于分类装饰。 + + + + + + + +`} /> + + + 已取消 + 已准备 + 警告 + 错误 + +`} /> + + +Dot.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 点的类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| ... | 原生属性 | `HTMLAttributes` | - | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/fieldset.mdx b/pages/zh-cn/components/fieldset.mdx new file mode 100644 index 0000000..0b6d693 --- /dev/null +++ b/pages/zh-cn/components/fieldset.mdx @@ -0,0 +1,133 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Card, Fieldset, Button, Text } from 'components' + +export const meta = { + title: 'Fieldset / 控件组', + description: 'tenotext', +} + +## Fieldset / 控件组 + +在一个集合内显示相关的信息。 + + + 层叠样式表 (Cascading Style Sheets，缩写为 CSS） + CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。 + + + CSS3 分成多个小模块且正在标准化中。 + + + + + + +`} /> + + + 层叠样式表 (Cascading Style Sheets，缩写为 CSS） + CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。 + + + 视频教程部分暂不可用。 + + + + + + +`} /> + + { + const handler = v => console.log(v) + return ( + +
+ 层叠样式表 (Cascading Style Sheets，缩写为 CSS） + CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。 + + 包含 20 个视频学习资料与 10 篇文章 + + + + +
+
+ HTML（超文本标记语言——HyperText Markup Language） + HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。 + + 包含 2 个视频学习资料与 1 篇文章 + + + + +
+
+ JavaScript ( JS ) 是一种即时编译型的编程语言。 + 虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中。 + + 包含 18 个视频学习资料与 3 篇文章 + + + + +
+ + ) +} +`} /> + + +Fieldset.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 唯一的鉴别值 (仅作用于组中) | `string` | - | - | +| **label** | 选项卡的文本 (仅作用于组中) | `string` |- | - | +| **title** | 控件组的标题 | `ReactNode` / `string` | - | - | +| **subtitle** | 副标题 | `ReactNode` / `string` | - | - | +| ... | 原生属性 | `FieldsetHTMLAttributes` | `'name', 'className', ...` | - | + +Fieldset.Footer.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | - | - | + +Fieldset.Footer.Actions.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | - | - | + +Fieldset.Footer.Status.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | - | - | + +Fieldset.Group.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 当前选中的值 | `string` | - | - | +| **onChange** | 选项卡切换事件 | `(value: string) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | - | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/file-tree.mdx b/pages/zh-cn/components/file-tree.mdx new file mode 100644 index 0000000..435aa84 --- /dev/null +++ b/pages/zh-cn/components/file-tree.mdx @@ -0,0 +1,176 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Tree, useToasts } from 'components' + +export const meta = { + title: 'File-Tree / 文件树', + description: 'File-Tree', +} + +## File-Tree / 文件树 + +使用树结构展示文件与文件夹列表。 + + + + + + + + + + + + + + +`} /> + + + { + const files = [{ + type: 'directory', + name: 'bin', + files: [{ + type: 'file', + name: 'cs.js', + }], + }, { + type: 'directory', + name: 'docs', + files: [{ + type: 'file', + name: 'controllers.md', + }, { + type: 'file', + name: 'es6.md', + }, { + type: 'file', + name: 'production.md', + }, { + type: 'file', + name: 'views.md', + }], + }] + return +} +`} /> + + + { + const files = [{ + type: 'directory', + name: 'controllers', + extra: '1 file', + files: [{ + type: 'file', + name: 'cs.js', + extra: '1kb', + }], + }, { + type: 'directory', + name: 'docs', + extra: '2 files', + files: [{ + type: 'file', + name: 'controllers.md', + extra: '2.5kb', + }, { + type: 'file', + name: 'es6.md', + extra: '2.9kb', + }], + }, { + type: 'file', + name: 'production.md', + extra: '0.8kb', + }, { + type: 'file', + name: 'views.md', + extra: '8.1kb', + }] + return +} +`} /> + + { + const [_, setToast] = useToasts() + const handler = path => setToast({ text: path }) + return ( + + + + + + + + + + + + + + ) +} +`} /> + + + +Tree.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 文件的集合数据 | [Array](#type-filetreevalue) | - | - | +| **initialExpand** | 默认是否展开 | `boolean` | - | `false` | +| **onClick** | 文件点击事件 | `(path: string) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + +Tree.File.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **name**(必须的) | 文件名 | `string` | - | - | +| **extra** | 额外文本信息 | `string` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + +Tree.Folder.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **name**(必须的) | 文件夹名 | `string` | - | - | +| **extra** | 额外的文本信息 | `string` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + +type FileTreeValue + +```ts +type FileTreeValue = { + type: 'directory' || 'file' + name: string + extra?: string + files?: Array +} +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/image.mdx b/pages/zh-cn/components/image.mdx new file mode 100644 index 0000000..e56f201 --- /dev/null +++ b/pages/zh-cn/components/image.mdx @@ -0,0 +1,51 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Image, Display, Code } from 'components' + +export const meta = { + title: 'Image / 图片', + description: 'tenotext', +} + +## Image / 图片 + +展示图片内容。 + + +`} /> + + +`} /> + +设置 height 属性可以尽可能的减少重绘。

}> + + +`} /> + + +Image.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **src** | 图片地址 | `string` | - | - | +| **animation** | 是否在加载时显示骨架动画 | `boolean` | - | `true` | +| **width** | 宽度 | `number` | - | - | +| **height** | 高度 | `number` | - | - | +| **scale** | 缩放比例 | `string` | - | `100%` | +| ... | 原生属性 | `ImgHTMLAttributes` | `'alt', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/input.mdx b/pages/zh-cn/components/input.mdx new file mode 100644 index 0000000..0d2fc06 --- /dev/null +++ b/pages/zh-cn/components/input.mdx @@ -0,0 +1,201 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import GitIcon from 'lib/components/icons/github' +import { Input, Spacer, useInput, Button, Code, Text, Dot } from 'components' +import { useState, useEffect } from 'react' + +export const meta = { + title: 'Input / 输入框', +} + +## Input / 输入框 + +处理用户的输入数据。 + + +`} /> + + + + + + + +`} /> + + +`} /> + + + + + + +`} /> + + + + + + +`} /> + + + + 用户名 + + + + 标题 + + + + + 部署 问题详情 + + + +`} /> + + + + + + + + + + +`} /> + + + } placeholder="输入 Git 地址" /> + +`} /> + + + + +`} /> + + { + const [value, setValue] = useState() + const handler = (e) => { + setValue(e.target.value) + console.log(e.target.value) + } + return ( + + ) +} +`} /> + +useInput} + desc="使用 `hooks` 捕获输入框的文本变化。" + scope={{ Input, useInput, useEffect, Button, Spacer }} + code={` +() => { + const { state, setState, reset, bindings } = useInput('The Evil Rabbit') + useEffect(() => console.log(state), [state]) + return ( + <> + + + + + + + ) +} +`} /> + + + +Input.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 命令式设定输入框的值 | `string` | - | - | +| **initialValue** | 初始值 | `string` | - | - | +| **placeholder** | 占位文本 | `string` | - | - | +| **size** | 输入框大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **status** | 输入框状态 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **readOnly** | 是否设置输入框为只读 | `boolean` | - | `false` | +| **disabled** | 是否禁用输入框 | `boolean` | - | `false` | +| **clearable** | 是否展示清除按钮 | `boolean` | - | `false` | +| **label** | 文本标签 | `string` | - | - | +| **icon** | 输入框图标 | `React.ReactNode` | - | - | +| **labelRight** | 居于右侧的文本标签 | `string` | - | - | +| **iconRight** | 居于右侧的图标 | `React.ReactNode` | - | - | +| **onChange** | 输入框变化事件 | `(e: React.ChangeEvent) => void` | - | - | +| **onClearClick** | 清除按钮的点击事件 | `(e: React.MouseEvent) => void` | - | - | +| ... | 原生属性 | `InputHTMLAttributes` | `'alt', 'type', 'className', ...` | - | + +useInput + +```ts +type useInput = (initialValue: string) => { + state: string + setState: Dispatch> + currentRef: MutableRefObject + reset: () => void + bindings: { + value: string + onChange: (event: React.ChangeEvent) => void + } +} +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/keyboard.mdx b/pages/zh-cn/components/keyboard.mdx new file mode 100644 index 0000000..d9c4b7b --- /dev/null +++ b/pages/zh-cn/components/keyboard.mdx @@ -0,0 +1,63 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Keyboard } from 'components' + +export const meta = { + title: 'keyboard / 键盘', + description: 'tenotext', +} + +## Keyboard / 键盘 + +显示用于键盘输入的按键字符。 + +f +`} /> + + + + + + +
+`} /> + + + f + e + b +
+`} /> + +/ +`} /> + + +Keyboard.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **command** | 显示 Command 按钮 | `boolean` | - | `false` | +| **shift** | 显示 Shift 按钮 | `boolean` | - | `false` | +| **option** | 显示 Option 按钮 | `boolean` | - | `false` | +| **ctrl** | 显示 Control 按钮 | `boolean` | - | `false` | +| **small** | 较小的键盘 | `boolean` | - | `false` | +| ... | 原生属性 | `KeygenHTMLAttributes` | `'keyType', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/layout.mdx b/pages/zh-cn/components/layout.mdx new file mode 100644 index 0000000..1e21c57 --- /dev/null +++ b/pages/zh-cn/components/layout.mdx @@ -0,0 +1,148 @@ +import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components' +import { Row, Col } from 'components' + +export const meta = { + title: 'Layout / 布局', + description: 'tenotext', +} + +## Layout / 布局 + +以简易的方式构建页面布局。 + + + + + +`} /> + + + + + + + + + + + + +`} /> + + + + + + + + + + + + + + +`} /> + + + + + + + + + + + + + + + + + + + + +`} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`} /> + + +Row.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **gap** | 子元素列的间距 | `number` | - | 0 | +| **justify** | 水平对齐方式 | `Justify` | `'start', 'end', 'center', 'space-around', 'space-between'` | `start` | +| **align** | 垂直对齐方式 | `Align` | `'top', 'middle', 'bottom'` | `top` | +| **component** | 生成的组件类型 | `keyof JSX.IntrinsicElements` | - | `div` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +Col.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **span** | 每列占据的网格大小 | `number` | 0 - 24 | 24 | +| **offset** | 当前列的偏移位置 | `number` | - | 0 | +| **component** | 生成的组件类型 | `keyof JSX.IntrinsicElements` | - | `div` | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/link.mdx b/pages/zh-cn/components/link.mdx new file mode 100644 index 0000000..5bf470f --- /dev/null +++ b/pages/zh-cn/components/link.mdx @@ -0,0 +1,74 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Link, Text, Code } from 'components' +import NextLink from 'next/link' + +export const meta = { + title: 'Link / 链接', + description: 'tenotext', +} + +## Link / 链接 + +网页之间的超链接。 + +通过使用指南和教程来学习如何用 React +`} /> + +通过使用指南和教程来学习如何用 React +`} /> + + + 通过使用指南和教程来学习如何用 React + 通过使用指南和教程来学习如何用 React + 通过使用指南和教程来学习如何用 React + 通过使用指南和教程来学习如何用 React + +`} /> + +通过使用指南和教程来学习如何用 React +`} /> + +与 next/link 组合} + desc="使用 `Link` 组件与 NextJS 组合使用不需要任何额外的配置。" + scope={{ Link, NextLink }} + code={` + + Docs of Button + +`} /> + + +Link.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **href** | 链接地址 | `string` | - | - | +| **color** | 是否高亮显示 | `boolean` | - | `false` | +| **pure** | 隐藏图标，仅显示文本 | `boolean` | - | `false` | +| **underline** | 显示下划线 | `boolean` | - | `false` | +| **block** | 是否以块的方式显示链接 | `boolean` | - | `false` | +| ... | 原生属性 | `AnchorHTMLAttributes` | `'rel', 'target', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/loading.mdx b/pages/zh-cn/components/loading.mdx new file mode 100644 index 0000000..e36faa6 --- /dev/null +++ b/pages/zh-cn/components/loading.mdx @@ -0,0 +1,94 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Loading, Spacer, Row } from 'components' + +export const meta = { + title: 'Loading / 加载中', + description: 'Loading', +} + +## Loading / 加载中 + +表示动作正在后台运行。 + + + + +`} /> + + + 加载中 + +`} /> + + + + + + + + + + + + + + + + + + +`} /> + + + + + + + + + + + + + + + + + + + +`} /> + + +Loading.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 指示器的类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **size** | 指示器的大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **color** | 自定义指示器的色彩 | `string` | - | - | +| **width** | 定制 CSS 宽度 | `string` | - | `100%` | +| **height** | 定制 CSS 高度 | `string` | - | `100%` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'title', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/modal.mdx b/pages/zh-cn/components/modal.mdx new file mode 100644 index 0000000..2c131c0 --- /dev/null +++ b/pages/zh-cn/components/modal.mdx @@ -0,0 +1,192 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Modal, Button, Code, useModal, Note, Link } from 'components' +import { useState } from 'react' + +export const meta = { + title: 'Modal / 对话框', +} + +## Modal / 对话框 + +弹出显示需要额外注意或重要的内容。 + +仅仅需要弹出文本信息？试试 Toast / 通知 组件。 + + { + const [state, setState] = useState(false) + const handler = () => setState(true) + const closeHandler = (event) => { + setState(false) + console.log('closed') + } + return ( +
+ + + 箭头函数 + 它不能用作构造函数 + +

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

+ + 放弃使用 + 明白了 + +
+ ) +} +`} /> + + +与 useModal 组合} + desc="使用 `hooks` 可以更简单的控制对话框。" + scope={{ Modal, Button, useModal, Code }} + code={` +() => { + const { visible, setVisible, bindings } = useModal() + return ( + <> + + + 箭头函数 + 它不能用作构造函数 + +

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

+ + 放弃使用 + 明白了 + + + ) +} +`} /> + + { + const [state, setState] = useState(false) + const handler = () => setState(true) + const closeHandler = (event) => { + setState(false) + console.log('closed') + } + return ( +
+ + + 箭头函数 + 它不能用作构造函数 + +

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

+ + +
+ ) +} +`} /> + + { + const [state, setState] = useState(false) + const handler = () => setState(true) + const closeHandler = (event) => { + setState(false) + console.log('closed') + } + return ( + <> + + + 箭头函数 + 它不能用作构造函数 + +

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

+ + 继续学习 + 尝试箭头函数 + + + ) +} +`} /> + + +Modal.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **open** | 打开或关闭对话框 | `boolean` | - | `false` | +| **onOpen** | 对话框打开的事件 | `() => void` | - | - | +| **onClose** | 对话框关闭的事件 | `() => void` | - | - | +| **disableBackdropClick** | 点击背景层时是否关闭对话框 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +Modal.Title.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Modal.Subtitle.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Modal.Content.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +Modal.Actions.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| - | - | - | - | - | + +Modal.Action.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **passive** | 以消极的状态显示按钮 | `boolean` | - | `false` | +| **disabled** | 禁用按钮 | `boolean` | - | `false` | +| **onClick** | 按钮的点击事件 | [(event: ModalActionEvent) => void](#modalactionevent) | - | - | +| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - | + +useModal + +```ts +type useModal = (initialVisible: boolean) => { + visible: boolean + setVisible: Dispatch> + currentRef: MutableRefObject + bindings: { + open: boolean + onClose: () => void + } +} +``` + +ModalActionEvent + +```ts +type ModalActionEvent = MouseEvent & { + close: () => void +} +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/note.mdx b/pages/zh-cn/components/note.mdx new file mode 100644 index 0000000..be27660 --- /dev/null +++ b/pages/zh-cn/components/note.mdx @@ -0,0 +1,92 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Note, Code } from 'components' + +export const meta = { + title: 'Note / 提示', +} + +## Note / 提示 + +显示一段用于提示的额外文本信息。 + +caller 和 arguments 属性已经废弃，因为它们会泄漏调用函数的对象。 +`} /> + +表达式闭包已被废弃。请用普通函数或箭头函数代替它。 +`} /> + + + 表达式闭包已被废弃。请用普通函数或箭头函数代替它。 +
+ 表达式闭包已被废弃。请用普通函数或箭头函数代替它。 +
+ 表达式闭包已被废弃。请用普通函数或箭头函数代替它。 + +`} /> + +这些过时的特性已经完全被删除。 +`} /> + +let 区块和 let 表达式已被废弃。 +`} /> + +详见 JavaScript 中的变量引用语法。 +`} /> + + + 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎。 +
+ 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎 +
+ 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎 +
+ 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎 +
+ 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎 +
+ 这些废弃的特性仍然可以使用，但是使用时一定要保持谨慎 + +`} /> + + +Note.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 提示类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| **label** | 是否显示标签，或是自定义标签 | `boolean` / `string` | - | - | +| **small** | 较小的提示框 | `boolean` | - | `false` | +| **filled** | 填充色彩的变体提示框 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/progress.mdx b/pages/zh-cn/components/progress.mdx new file mode 100644 index 0000000..bfe5b03 --- /dev/null +++ b/pages/zh-cn/components/progress.mdx @@ -0,0 +1,84 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Progress, Spacer, useTheme, Button } from 'components' +import { useState } from 'react' + +export const meta = { + title: 'Progress / 进度条', +} + +## Progress / 进度条 + +展示事件或与之相关的任务进展。 + + +`} /> + + +`} /> + + { + const theme = useTheme() + const [value, setValue] = useState(20) + const colors = { + 20: theme.palette.error, + 40: theme.palette.warning, + 60: theme.palette.success, + 80: '#000', + } + return ( + <> + + + + + + + ) +} +`} /> + + + + + + + + + + +`} /> + + +Progress.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value** | 进度条当前数值 | `number` | - | 0 | +| **max** | 最大值 | `number` | - | 100 | +| **fixedTop** | 固定进度条在顶部 | `boolean` | - | `false` | +| **fixedBottom** | 固定进度条在底部 | `boolean` | - | `false` | +| **colors** | 在范围内自定义颜色 | `{ [key: number]: string }` | - | - | +| **type** | 预定义的状体类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| ... | 原生属性 | `ProgressHTMLAttributes` | `'aria-busy', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/radio.mdx b/pages/zh-cn/components/radio.mdx new file mode 100644 index 0000000..36bfc3d --- /dev/null +++ b/pages/zh-cn/components/radio.mdx @@ -0,0 +1,118 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Radio, Spacer, Code, Text } from 'components' +import { useState } from 'react' + +export const meta = { + title: 'Radio / 单选框', +} + +## Radio / 单选框 + +提供用户输入的选择项。 + +选项 1 +`} /> + + { + const [state, setState] = useState('1') + const handler = val => { + setState(val) + console.log(val) + } + return ( + <> + + 上海 + 广州 + + + ) +} +`} /> + + console.log(val)}> + + No Store + 缓存中不得存储任何关于客户端请求和服务端响应的内容。 + + + No Cache + 服务器端会验证 请求中所描述的缓存 是否过期 + + +`} /> + + + + 郑州 + 南昌 + +`} /> + + + + MSQRT + 不带根数的平方根 + + + MROOT + 带指定根数的根号 + + +`} /> + + + +Radio.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **checked** | 是否选择 (仅在单独使用时有效) | `boolean` | - | `false` | +| **value** | 唯一的鉴别值 (仅在组内使用时有效) | `string` | - | - | +| **disabled** | 禁用当前选项 | `boolean` | - | `false` | +| **onChange** | 选项变化事件 | `(e: RadioEvent) => void` | - | - | +| ... | 原生属性 | `InputHTMLAttributes` | `'id', 'alt', 'className', ...` | - | + +Radio.Group.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **initialValue** | 初始值 | `string` | - | - | +| **value** | 设置选中的子选项值 | `string` | - | - | +| **useRow** | 水平对齐所有子单选框 | `boolean` | - | `false` | +| **disabled** | 禁用组内所有单选框 | `boolean` | - | `false` | +| **onChange** | 组的值变化事件 | `(value: string) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'id', 'className', ...` | - | + +Radio.Description.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/select.mdx b/pages/zh-cn/components/select.mdx new file mode 100644 index 0000000..c95eb0c --- /dev/null +++ b/pages/zh-cn/components/select.mdx @@ -0,0 +1,95 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Select, Spacer, Code } from 'components' + +export const meta = { + title: 'Select / 选择器', +} + +## Select / 选择器 + +显示下拉列表选框。 + + { + const handler = val => console.log(val) + return ( + + ) +} +`} /> + + + Option 1 + Option 2 + +`} /> + + + 北京 + 上海 + +`} /> + + + 远程办公 + 线下工作 + +`} /> + + + TypeScript + JavaScript + +`} /> + + + +Select.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **initialValue** | 选择器初始值 | `string` | - | - | +| **placeholder** | 占位文本内容 | `string` | - | - | +| **size** | 选择器组件大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| **icon** | 右侧图标组件 | `ReactNode` | - | `SVG Component` | +| **pure** | 隐藏右侧图标组件 | `boolean` | - | `false` | +| **disabled** | 禁用所有的交互 | `boolean` | - | `false` | +| **onChange** | 选项被选中所触发的事件 | `(val: string) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'alt', 'className', ...` | - | + +Select.Option.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **value**(必须的) | 唯一鉴别值 | `string` | - | - | +| **disabled** | 禁用当前选项 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'name', 'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/snippet.mdx b/pages/zh-cn/components/snippet.mdx new file mode 100644 index 0000000..299477b --- /dev/null +++ b/pages/zh-cn/components/snippet.mdx @@ -0,0 +1,103 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Snippet, Spacer, Code } from 'components' + +export const meta = { + title: 'Snippet / 片段', +} + +## Snippet / 片段 + +显示可拷贝的命令行代码片段。 + + +`} /> + + +`} /> + + + + + + + + + + + + + + +`} /> + + +`} /> + + +`} /> + + + + + + + + + + +`} /> + + +Snippet.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **text** | 命令文本 | `string` `Array` | - | - | +| **type** | 组件类型 | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` | +| **fill** | 填充风格的样式 | `boolean` | - | `false` | +| **width** | 设置 CSS 宽度 | `string` | - | `initial` | +| **copy** | 拷贝按钮的工作方式 | `CopyTypes` | `'default', 'slient', 'prevent'` | `default` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - | + +SnippetTypes + +```ts +type SnippetTypes = 'default' + | 'secondary' + | 'success' + | 'warning' + | 'error' + | 'dark' + | 'lite' +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/spacer.mdx b/pages/zh-cn/components/spacer.mdx new file mode 100644 index 0000000..39f21e0 --- /dev/null +++ b/pages/zh-cn/components/spacer.mdx @@ -0,0 +1,55 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Spacer, Container, Col } from 'components' + +export const meta = { + title: 'Spacer / 间距', + description: 'tenotext', +} + +## Spacer / 间距 + +为排版提供标准化的空间。 + + + + + + + + + + + + + + +`} /> + + + + + + +`} /> + + +Spacer.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **x** | X 轴间距 | `number` / `float` | - | 1 | +| **y** | Y 轴间距 | `number` / `float` | - | 1 | +| **inline** | 行内模式 (不会产生换行) | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/spinner.mdx b/pages/zh-cn/components/spinner.mdx new file mode 100644 index 0000000..1d2e8cb --- /dev/null +++ b/pages/zh-cn/components/spinner.mdx @@ -0,0 +1,47 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Spinner, Spacer, Note, Code, Link } from 'components' +import NextLink from 'next/link' + +export const meta = { + title: 'Spinner / 指示器', +} + +## Spinner / 指示器 + +表示一个动作正在进行中。 + +想要表示加载中状态或后台运行任务? 试试 Loading / 加载中 组件。 + + +`} /> + + + + + + + + + + +`} /> + + +Spinner.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **size** | 指示器大小 | `NormalSizes` | `'mini', 'small', 'medium', 'large'` | `medium` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/table.mdx b/pages/zh-cn/components/table.mdx new file mode 100644 index 0000000..352d672 --- /dev/null +++ b/pages/zh-cn/components/table.mdx @@ -0,0 +1,149 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Table, Spacer, Code, Text, Button } from 'components' + +export const meta = { + title: 'Table / 表格', +} + +## Table / 表格 + +以规则的表格显示数据集。 + + { + const data = [ + { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' }, + { property: 'Component', description: 'DOM element to use', type: 'string', default: '-' }, + { property: 'bold', description: 'Bold style', type: 'boolean', default: 'true' }, + ] + return ( + + + + + +
+ ) +} +`} /> + + { + const data = [ + { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' }, + { property: 'Component', description: 'DOM element to use', type: string, default: '-' }, + { property: bold, description: 'Bold style', type: boolean, default: true }, + ] + return ( + + + + + +
+ ) +} +`} /> + + { + const data = [ + { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' }, + { property: 'Component', description: 'DOM element to use', type: string, default: '-' }, + { property: bold, description: 'Bold style', type: boolean, default: true }, + ] + return ( + + + + + +
+ ) +} +`} /> + + { + const operation = (actions, rowData) => { + return + } + const data = [ + { property: 'type', description: 'Content type', operation }, + { property: 'Component', description: 'DOM element to use', operation }, + { property: bold, description: 'Bold style', operation }, + ] + return ( + + + + +
+ ) +} +`} /> + + { + const data = [ + { property: 'type', description: 'Content type', type: 'secondary | warning', default: '-' }, + { property: 'Component', description: 'DOM element to use', type: string, default: '-' }, + { property: bold, description: 'Bold style', type: boolean, default: true }, + ] + return ( + + + + + type + + + default + +
+ ) +} +`} /> + + +Table.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **data** | 数据源 | `Array` | - | - | +| **emptyText** | 当数据为空时显示的文本 | `string` | - | - | +| **hover** | 是否显示 hover 效果 | `boolean` | - | `true` | +| **onRow** | 行的点击事件 | `(row: any, index: number) => void` | - | - | +| **onCell** | 单元格的点击事件 | `(cell: any, index: number, colunm: number) => void` | - | - | +| **onChange** | 数据变化的事件 | `(data: any) => void` | - | - | +| ... | 原生属性 | `TableHTMLAttributes` | `'id', 'name', 'className', ...` | - | + +Table.Column.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **prop**(必须的) | 列对应的数据属性 | `string` | - | - | +| **label** | 每一列的标签文本 | `string` | - | - | +| **width** | 指定宽度 | `number` | - | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/tabs.mdx b/pages/zh-cn/components/tabs.mdx new file mode 100644 index 0000000..068d9de --- /dev/null +++ b/pages/zh-cn/components/tabs.mdx @@ -0,0 +1,129 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Tabs, Spacer, Link, Text, Button, Code, useTabs } from 'components' +import { useState } from 'react' +import GithubIcon from 'lib/components/icons/github' +import ZeitIcon from 'lib/components/icons/zeit' +import ReactIcon from 'lib/components/icons/react' + +export const meta = { + title: 'Tabs / 选项卡', +} + +## Tabs / 选项卡 + +显示选项卡的内容。 + + + 二进制表示为开头是0后接大写或小写的B（0b或者0B）。 + 八进制表示为开头是0后接大写或小写的O（0o或0O）。 + +`} /> + + + 二进制表示为开头是0后接大写或小写的B（0b或者0B）。 + + +`} /> + + + ZEIT UI} value="1"> + 你好，这是非官方的 ZEIT UI 库。 + 点击这里浏览 GitHub 项目 + + React Components } value="2"> + 这个组件看起来还不错。 + + +`} /> + + { + const [value, setValue] = useState('1') + const switchHandler = () => setValue('2') + const changeHandler = val => setValue(val) + return ( + <> + + + + 二进制表示为开头是0后接大写或小写的B（0b或者0B）。 + 八进制表示为开头是0后接大写或小写的O（0o或0O）。 + + + ) +} +`} /> + +与 useTabs 组合} + desc="使用 `hooks` 以更简单的方式控制选项卡。" + scope={{ Tabs, Button, Spacer, useTabs }} + code={` +() => { + const { setState, bindings } = useTabs('1') + return ( + <> + + + + 二进制表示为开头是0后接大写或小写的B（0b或者0B）。 + 八进制表示为开头是0后接大写或小写的O（0o或0O）。 + + + ) +} +`} /> + + + +Tabs.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **initialValue** | 初始值 | `string` | - | - | +| **value** | 设定当前选项 | `string` | - | - | +| **onChange** | 选项卡切换事件 | `(val: string) => void` | - | - | +| ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - | + +Tabs.Item.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **label**(必须的) | 选项卡标签文字 | `string` | - | - | +| **value** | 唯一鉴别值 | `string` | - | - | +| **disabled** | 禁用当前选项卡 | `boolean` | - | `false` | + +useTabs + +```ts +type useTabs = (initialValue: string) => { + state: string + setState: Dispatch> + currentRef: MutableRefObject + bindings: { + value: string + onChange: (val: string) => void + } +} +``` + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/tag.mdx b/pages/zh-cn/components/tag.mdx new file mode 100644 index 0000000..e4a143f --- /dev/null +++ b/pages/zh-cn/components/tag.mdx @@ -0,0 +1,45 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Tag, Spacer } from 'components' + +export const meta = { + title: 'Tag / 标签', +} + +## Tag / 标签 + +标记文档的状态与功能。 + + + 状态: 不稳定的 + + 作者：佚名 + +`} /> + + + 状态: 成功 + + 状态: 警告 + + 状态: 错误 + +`} /> + + +Tag.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **type** | 标签类型 | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/text.mdx b/pages/zh-cn/components/text.mdx new file mode 100644 index 0000000..621e450 --- /dev/null +++ b/pages/zh-cn/components/text.mdx @@ -0,0 +1,110 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Text } from 'components' + +export const meta = { + title: 'Text / 文本', +} + +## Text / 文本 + +使用预定义的排版样式显示文本。 + + { + const text = 'JavaScript 是一门编程语言。' + return ( + <> + {text} + {text} + {text} + {text} + {text} + {text} + + ) +} +`} /> + + + + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + + + 函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + +`} /> + + + + 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + + + 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + +`} /> + + + + 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + + + 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + 函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。 + + +`} /> + + + 事件能为网页添加真实的交互能力。 + 事件能为网页添加真实的交互能力。 + 事件能为网页添加真实的交互能力。 + 事件能为网页添加真实的交互能力。 + +`} /> + + +Text.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **p** | component name | `boolean` | - | `true` | +| **h1 - h6** | component name | `boolean` | - | `false` | +| **small** | component name | `boolean` | - | `false` | +| **span** | component name | `boolean` | - | `false` | +| **del** | component name | `boolean` | - | `false` | +| **i** | component name | `boolean` | - | `false` | +| **em** | component name | `boolean` | - | `false` | +| **b** | component name | `boolean` | - | `false` | +| **type** | text type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + + + +export default ({ children }) => {children} diff --git a/pages/zh-cn/components/textarea.mdx b/pages/zh-cn/components/textarea.mdx new file mode 100644 index 0000000..b9b405d --- /dev/null +++ b/pages/zh-cn/components/textarea.mdx @@ -0,0 +1,124 @@ +import { Layout, Playground, Attributes } from 'lib/components' +import { Textarea, Spacer, useInput, Button, Code } from 'components' +import { useState } from 'react' + +export const meta = { + title: 'Textarea / 文本输入框', +} + +## Textarea / 文本输入框 + +获取用户输入的多行文本。 + + +`} /> + + +`} /> + + +`} /> + + +