From 45e1b0a396fc65805fac15e4170b4ac5c8f5f94d Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 7 May 2020 01:07:14 +0800 Subject: [PATCH 1/3] feat(page): add component feat(page): add header and footer feat(page): add dot-backdrop decoration --- components/index.ts | 1 + components/page/index.ts | 10 +++ components/page/page-content.tsx | 36 ++++++++ components/page/page-footer.tsx | 30 +++++++ components/page/page-header.tsx | 41 +++++++++ components/page/page.tsx | 118 ++++++++++++++++++++++++++ components/page/styles.ts | 15 ++++ lib/components/displays/mock-page.tsx | 52 ++++++++++++ lib/data/metadata-en-us.json | 2 +- pages/en-us/components/page.mdx | 90 ++++++++++++++++++++ 10 files changed, 394 insertions(+), 1 deletion(-) create mode 100644 components/page/index.ts create mode 100644 components/page/page-content.tsx create mode 100644 components/page/page-footer.tsx create mode 100644 components/page/page-header.tsx create mode 100644 components/page/page.tsx create mode 100644 components/page/styles.ts create mode 100644 lib/components/displays/mock-page.tsx create mode 100644 pages/en-us/components/page.mdx diff --git a/components/index.ts b/components/index.ts index ed08e20..5e6d841 100644 --- a/components/index.ts +++ b/components/index.ts @@ -51,3 +51,4 @@ export { default as Popover } from './popover' export { default as Slider } from './slider' export { default as Divider } from './divider' export { default as User } from './user' +export { default as Page } from './page' diff --git a/components/page/index.ts b/components/page/index.ts new file mode 100644 index 0000000..21b2f26 --- /dev/null +++ b/components/page/index.ts @@ -0,0 +1,10 @@ +import Page from './page' +import PageHeader from './page-header' +import PageContent from './page-content' +import PageFooter from './page-footer' + +Page.Header = PageHeader +Page.Content = PageContent +Page.Footer = PageFooter + +export default Page diff --git a/components/page/page-content.tsx b/components/page/page-content.tsx new file mode 100644 index 0000000..95f4fdd --- /dev/null +++ b/components/page/page-content.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import useTheme from '../styles/use-theme' +import withDefaults from '../utils/with-defaults' + +interface Props { + className?: string +} + +const defaultProps = { + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type PageContentProps = Props & typeof defaultProps & NativeAttrs + +const PageContent: React.FC> = ({ + className, + children, + ...props +}) => { + const theme = useTheme() + + return ( +
+ {children} + +
+ ) +} + +export default withDefaults(PageContent, defaultProps) diff --git a/components/page/page-footer.tsx b/components/page/page-footer.tsx new file mode 100644 index 0000000..b431fc1 --- /dev/null +++ b/components/page/page-footer.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import withDefaults from '../utils/with-defaults' + +interface Props { + className?: string +} + +const defaultProps = { + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs + +const PageFooter: React.FC> = ({ children, ...props }) => { + return ( +
+ {children} + +
+ ) +} + +export default withDefaults(PageFooter, defaultProps) diff --git a/components/page/page-header.tsx b/components/page/page-header.tsx new file mode 100644 index 0000000..1efc3e8 --- /dev/null +++ b/components/page/page-header.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import withDefaults from '../utils/with-defaults' + +interface Props { + center?: boolean + className?: string +} + +const defaultProps = { + center: false, + className: '', +} + +type NativeAttrs = Omit, keyof Props> +export type PageHeaderProps = Props & typeof defaultProps & NativeAttrs + +const PageHeader: React.FC> = ({ + children, + center, + className, + ...props +}) => { + return ( +
+ {children} + +
+ ) +} + +export default withDefaults(PageHeader, defaultProps) diff --git a/components/page/page.tsx b/components/page/page.tsx new file mode 100644 index 0000000..7310722 --- /dev/null +++ b/components/page/page.tsx @@ -0,0 +1,118 @@ +import React, { useEffect, useMemo, useState } from 'react' +import { NormalSizes, tuple } from '../utils/prop-types' +import { getPageSize } from './styles' +import useTheme from '../styles/use-theme' +import PageHeader from './page-header' +import PageContent from './page-content' +import { hasChild } from '../utils/collections' +import PageFooter from './page-footer' + +const renderMode = tuple('default', 'effect', 'effect-seo') + +export type PageSize = NormalSizes | string +export type PageRenderMode = typeof renderMode[number] + +interface Props { + size?: PageSize + render?: PageRenderMode + dotBackdrop: boolean +} + +const defaultProps = { + size: 'medium' as PageSize, + render: 'default' as PageRenderMode, + dotBackdrop: false, +} + +const DotStyles: React.FC<{}> = () => ( + + + +) + +type NativeAttrs = Omit, keyof Props> +export type NoteProps = Props & typeof defaultProps & NativeAttrs + +const Page: React.FC> = ({ + children, + size, + render, + dotBackdrop, + className, + ...props +}) => { + const theme = useTheme() + const width = useMemo(() => getPageSize(size, theme.layout), [size, theme.layout]) + const showDot = useMemo(() => { + if (theme.type === 'dark') return false + return dotBackdrop + }, [dotBackdrop, theme.type]) + const [preventRender, setPreventRender] = useState(render !== 'default') + + useEffect(() => { + setPreventRender(false) + }, []) + + if (preventRender) { + const renderSEO = render === 'effect-seo' + if (!renderSEO) return null + return ( + + ) + } + + const hasContent = hasChild(children, PageContent) + + return ( +
+ {hasContent ? children : {children}} + {showDot && } + +
+ ) +} + +type MemoPageComponent

= React.NamedExoticComponent

& { + Header: typeof PageHeader + Content: typeof PageContent + Footer: typeof PageFooter +} +type ComponentProps = Partial & + Omit & + NativeAttrs + +Page.defaultProps = defaultProps + +export default React.memo(Page) as MemoPageComponent diff --git a/components/page/styles.ts b/components/page/styles.ts new file mode 100644 index 0000000..4e57a17 --- /dev/null +++ b/components/page/styles.ts @@ -0,0 +1,15 @@ +import { PageSize } from './page' +import { NormalSizes } from '../utils/prop-types' +import { ZeitUIThemesLayout } from '../styles/themes' + +export const getPageSize = (size: PageSize, layout: ZeitUIThemesLayout): string => { + const presets: { [key in NormalSizes]: string } = { + medium: layout.pageWidth, + small: `calc(${layout.pageWidth} - 100pt)`, + mini: `calc(${layout.pageWidth} - 180pt)`, + large: `calc(${layout.pageWidth} + 100pt)`, + } + const presetValue = presets[size as NormalSizes] + if (!presetValue) return size as string + return presetValue +} diff --git a/lib/components/displays/mock-page.tsx b/lib/components/displays/mock-page.tsx new file mode 100644 index 0000000..584d4d2 --- /dev/null +++ b/lib/components/displays/mock-page.tsx @@ -0,0 +1,52 @@ +import React, { useEffect, useState } from 'react' +import { useTheme } from 'components' + +interface Props { + visible: boolean + onClose?: () => void +} + +const MockPage: React.FC> = ({ + visible: customVisible, + onClose, + children, +}) => { + const theme = useTheme() + const [visible, setVisible] = useState(false) + + useEffect(() => { + if (customVisible !== undefined) { + setVisible(customVisible) + } + }, [customVisible]) + + const clickHandler = () => { + setVisible(false) + onClose && onClose() + } + return ( +

+ {children} + +
+ ) +} + +export default MockPage diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json index 802fd82..f602a72 100644 --- a/lib/data/metadata-en-us.json +++ b/lib/data/metadata-en-us.json @@ -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":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","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":"User","url":"/en-us/components/user","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":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"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":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","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":"User","url":"/en-us/components/user","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":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] diff --git a/pages/en-us/components/page.mdx b/pages/en-us/components/page.mdx new file mode 100644 index 0000000..f68a620 --- /dev/null +++ b/pages/en-us/components/page.mdx @@ -0,0 +1,90 @@ +import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components' +import { Page, Button } from 'components' +import MockPage from 'lib/components/displays/mock-page' + +export const meta = { + title: 'page', + group: 'layout', +} + +## Page + +Container of general for display page content. + + { + const Child = () => ( + <> +

Hello, Everyone.

+

This is a simulated page, you can click anywhere to close it.

+ + ) + const [visible, setVisible] = React.useState(false) + return ( + <> + + setVisible(false)}> + + + + ) +} +`} /> + + { + const [visible, setVisible] = React.useState(false) + return ( + <> + + setVisible(false)}> + + +

Header

+ + +

Hello, Everyone.

+

This is a simulated page, you can click anywhere to close it.

+ + +

Footer

+ + + + + ) +} +`} /> + + +Page.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| **size** | size of page | [PageSize](#pagesize) | - | `medium` | +| **render** | render mode | [PageRenderMode](#pagerendermode) | - | `default` | + +PageSize + +```ts +type PageSize = string | 'mini' | 'small' | 'medium' | 'large' +``` + +PageRenderMode + +```ts +type PageRenderMode = 'default' // Normal rendering + | 'effect' // Render after the first effect trigger + | 'effect-seo' // like "effect", but prerender strings for SEO +``` + + + +export default ({ children }) => {children} From 4d6e95be8eb7aaf2307d817ee017570f6d15a13c Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 7 May 2020 15:34:55 +0800 Subject: [PATCH 2/3] test(page): add testcase docs: add zh-cn docs for page component --- .../__snapshots__/child.test.tsx.snap | 42 +++++++ .../__snapshots__/index.test.tsx.snap | 114 ++++++++++++++++++ components/page/__tests__/child.test.tsx | 34 ++++++ components/page/__tests__/index.test.tsx | 57 +++++++++ lib/data/metadata-zh-cn.json | 2 +- pages/zh-cn/components/page.mdx | 111 +++++++++++++++++ 6 files changed, 359 insertions(+), 1 deletion(-) create mode 100644 components/page/__tests__/__snapshots__/child.test.tsx.snap create mode 100644 components/page/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/page/__tests__/child.test.tsx create mode 100644 components/page/__tests__/index.test.tsx create mode 100644 pages/zh-cn/components/page.mdx diff --git a/components/page/__tests__/__snapshots__/child.test.tsx.snap b/components/page/__tests__/__snapshots__/child.test.tsx.snap new file mode 100644 index 0000000..f5a40ce --- /dev/null +++ b/components/page/__tests__/__snapshots__/child.test.tsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageChild should work with child component 1`] = ` +"
outside string
header
content
Footer
outside string
" +`; diff --git a/components/page/__tests__/__snapshots__/index.test.tsx.snap b/components/page/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000..5631de8 --- /dev/null +++ b/components/page/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,114 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Page should render correctly 1`] = ` +"
test-value
" +`; + +exports[`Page should work with different size 1`] = ` +"
" +`; diff --git a/components/page/__tests__/child.test.tsx b/components/page/__tests__/child.test.tsx new file mode 100644 index 0000000..7cab874 --- /dev/null +++ b/components/page/__tests__/child.test.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import { mount } from 'enzyme' +import { Page } from 'components' + +describe('PageChild', () => { + it('the component Page.Content should be injected automatically', () => { + const wrapper = mount(test-value) + const content = mount( + + test-value + , + ) + expect(wrapper.html()).toEqual(content.html()) + }) + + it('should work with child component', () => { + const wrapper = mount( + + outside string + header + content + Footer + outside string + , + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('the header should be centered', () => { + const wrapper = mount(header) + expect(wrapper.find('.center').length).not.toBe(0) + }) +}) diff --git a/components/page/__tests__/index.test.tsx b/components/page/__tests__/index.test.tsx new file mode 100644 index 0000000..d48eafa --- /dev/null +++ b/components/page/__tests__/index.test.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import ReactDom from 'react-dom/server' +import { mount } from 'enzyme' +import { Page, ZEITUIProvider } from 'components' + +describe('Page', () => { + it('should render correctly', () => { + const wrapper = mount(test-value) + expect(wrapper.text()).toContain('test-value') + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('the first page should not contain content', () => { + const html = ReactDom.renderToString(test-value) + expect(html).not.toContain('test-value') + + const wrapper = mount(test-value) + expect(wrapper.html()).toContain('test-value') + }) + + it('the first page should contain seo string', () => { + const html = ReactDom.renderToString(test-value) + expect(html).toContain('test-value') + expect(html).toContain('hidden') + + const wrapper = mount(test-value) + expect(wrapper.html()).toContain('test-value') + }) + + it('should work with different size', () => { + const wrapper = mount( +
+ + + + +
, + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + + it('the global styles should be added to body element', () => { + const wrapper = mount() + expect(wrapper.html()).toContain('global(body)') + }) + + it('should disable dot style when in dark mode', () => { + const wrapper = mount( + + + , + ) + expect(wrapper.html()).not.toContain('global(body)') + }) +}) diff --git a/lib/data/metadata-zh-cn.json b/lib/data/metadata-zh-cn.json index 94c0242..e765dc6 100644 --- a/lib/data/metadata-zh-cn.json +++ b/lib/data/metadata-zh-cn.json @@ -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":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","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":"用户 User","url":"/zh-cn/components/user","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":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","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":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","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":"用户 User","url":"/zh-cn/components/user","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":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}] diff --git a/pages/zh-cn/components/page.mdx b/pages/zh-cn/components/page.mdx new file mode 100644 index 0000000..a83775f --- /dev/null +++ b/pages/zh-cn/components/page.mdx @@ -0,0 +1,111 @@ +import { Layout, Playground, ExampleBlock, Attributes } from 'lib/components' +import { Page, Button } from 'components' +import MockPage from 'lib/components/displays/mock-page' + +export const meta = { + title: '页面 Page', + group: '布局', +} + +## Page / 页面 + +展示页面内容的通用容器。 + + { + const Child = () => ( + <> +

你好，世界。

+

这是一个模拟页面，点击任意处即可关闭。

+ + ) + const [visible, setVisible] = React.useState(false) + return ( + <> + + setVisible(false)}> + + + + ) +} +`} /> + + { + const [visible, setVisible] = React.useState(false) + return ( + <> + + setVisible(false)}> + + +

头部

+ + +

你好，世界。

+

这是一个模拟页面，点击任意处即可关闭。

+ + +

尾部

+ + + + + ) +} +`} /> + + +Page.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **size** | 页面大小 | [PageSize](#pagesize) | - | `medium` | +| **render** | 渲染方式 | [PageRenderMode](#pagerendermode) | - | `default` | +| **dotBackdrop** | 在背景中显示装饰样式 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +Page.Header.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **center** | 居中对齐内容 | `boolean` | - | `false` | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +Page.Content.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +Page.Footer.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | 原生属性 | `HTMLAttributes` | `'autoFocus', 'name', 'className', ...` | - | + +PageSize + +```ts +type PageSize = string | 'mini' | 'small' | 'medium' | 'large' +``` + +PageRenderMode + +```ts +type PageRenderMode = 'default' // 正常渲染 + | 'effect' // 在 effect 第一次触发后渲染 + | 'effect-seo' // 类似于 "effect"，但首屏为 SEO 额外返回字符串 +``` + + + +export default ({ children }) => {children} From 634618f935c00e4f449509b819726089ad3a8c9f Mon Sep 17 00:00:00 2001 From: unix Date: Thu, 7 May 2020 15:48:38 +0800 Subject: [PATCH 3/3] docs(page): update page attributes feat(page): add an alias to page component --- components/page/index.ts | 1 + components/page/page.tsx | 1 + lib/data/metadata-en-us.json | 2 +- pages/en-us/components/page.mdx | 23 ++++++++++++++++++++++- 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/components/page/index.ts b/components/page/index.ts index 21b2f26..7cb553f 100644 --- a/components/page/index.ts +++ b/components/page/index.ts @@ -6,5 +6,6 @@ import PageFooter from './page-footer' Page.Header = PageHeader Page.Content = PageContent Page.Footer = PageFooter +Page.Body = PageContent export default Page diff --git a/components/page/page.tsx b/components/page/page.tsx index 7310722..4263c2c 100644 --- a/components/page/page.tsx +++ b/components/page/page.tsx @@ -107,6 +107,7 @@ const Page: React.FC> = ({ type MemoPageComponent

= React.NamedExoticComponent

& { Header: typeof PageHeader Content: typeof PageContent + Body: typeof PageContent Footer: typeof PageFooter } type ComponentProps = Partial & diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json index f602a72..8017a2a 100644 --- a/lib/data/metadata-en-us.json +++ b/lib/data/metadata-en-us.json @@ -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":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","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":"User","url":"/en-us/components/user","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":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"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":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","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":"User","url":"/en-us/components/user","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":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}] diff --git a/pages/en-us/components/page.mdx b/pages/en-us/components/page.mdx index f68a620..5653b90 100644 --- a/pages/en-us/components/page.mdx +++ b/pages/en-us/components/page.mdx @@ -3,7 +3,7 @@ import { Page, Button } from 'components' import MockPage from 'lib/components/displays/mock-page' export const meta = { - title: 'page', + title: 'Page', group: 'layout', } @@ -70,6 +70,27 @@ Container of general for display page content. | ---------- | ---------- | ---- | -------------- | ------ | | **size** | size of page | [PageSize](#pagesize) | - | `medium` | | **render** | render mode | [PageRenderMode](#pagerendermode) | - | `default` | +| **dotBackdrop** | show decorations in the background | `boolean` | - | `false` | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Page.Header.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| **center** | align center | `boolean` | - | `false` | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Page.Content.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | + +Page.Footer.Props + +| Attribute | Description | Type | Accepted values | Default +| ---------- | ---------- | ---- | -------------- | ------ | +| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - | PageSize