diff --git a/src/packages/cell/demo.taro.tsx b/src/packages/cell/demo.taro.tsx index 00d09ac26b..4c53633429 100644 --- a/src/packages/cell/demo.taro.tsx +++ b/src/packages/cell/demo.taro.tsx @@ -1,10 +1,14 @@ import React from 'react' -import { User, ArrowRight } from '@nutui/icons-react-taro' -import Taro, { redirectTo, navigateTo } from '@tarojs/taro' +import Taro from '@tarojs/taro' import { useTranslate } from '@/sites/assets/locale/taro' -import { Switch, Cell, Button } from '@/packages/nutui.react.taro' import Header from '@/sites/components/header' -import '@/packages/cell/demo.scss' +import Demo1 from './demos/taro/demo1' +import Demo2 from './demos/taro/demo2' +import Demo3 from './demos/taro/demo3' +import Demo4 from './demos/taro/demo4' +import Demo5 from './demos/taro/demo5' +import Demo6 from './demos/taro/demo6' +import Demo7 from './demos/taro/demo7' interface T { basic: string @@ -87,198 +91,24 @@ const CellDemo = () => { }, }) - const testClick = ( - event: React.MouseEvent - ) => { - Taro.showToast({ title: translated.clickEventToast }) - } - - const onJumpclick = ( - event: React.MouseEvent, - link: string - ) => { - const replace = false - if (link) { - replace ? redirectTo({ url: link }) : navigateTo({ url: link }) - } - } - return ( <>

{translated.basic}

- - - - ) => testClick(event)} - /> - +

{translated.content}

- -
{translated.content}
- +

{translated.title6}

- - - - {translated.title} - -
- } - description={ - - {translated.title1} 1 - - } - extra={translated.extra} - /> - - } /> - + +

{translated.customRight}

+

{translated.title5}

- - - } - /> - - /pages/index/index - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => onJumpclick(event, '/pages/index/index')} - /> - - - - - {translated.title} - - {translated.title1} - - - } - extra={ -
- More - -
- } - /> - -
{translated.content}
- - - {translated.title1} - - } - extra={} - /> - - - - - - - {translated.title} - - - } - extra={} - /> - -
{translated.content}
- - Action} /> - - - - - {translated.title} - - } - /> - -
{translated.content}
- - - - - - - + +

{translated.title4}

+ +

{translated.title7}

+ ) diff --git a/src/packages/cell/demo.tsx b/src/packages/cell/demo.tsx index 8479a9fc8d..8fd05dde7d 100644 --- a/src/packages/cell/demo.tsx +++ b/src/packages/cell/demo.tsx @@ -1,11 +1,12 @@ import React from 'react' -import { User, ArrowRight } from '@nutui/icons-react' import { useTranslate } from '../../sites/assets/locale' -import Cell from './index' -import { Switch } from '../switch/switch' -import { Button } from '../button/button' -import Toast from '../toast' -import './demo.scss' +import Demo1 from './demos/h5/demo1' +import Demo2 from './demos/h5/demo2' +import Demo3 from './demos/h5/demo3' +import Demo4 from './demos/h5/demo4' +import Demo5 from './demos/h5/demo5' +import Demo6 from './demos/h5/demo6' +import Demo7 from './demos/h5/demo7' interface T { basic: string @@ -88,200 +89,23 @@ const CellDemo = () => { }, }) - const testClick = ( - event: React.MouseEvent - ) => { - Toast.show(translated.clickEventToast) - } - - const onJumpclick = ( - event: React.MouseEvent, - url: string - ) => { - const replace = false - if (url) { - replace ? window.location.replace(url) : (window.location.href = url) - } - } - return ( <>

{translated.basic}

- - - - ) => testClick(event)} - /> - +

{translated.content}

- -
{translated.content}
- +

{translated.title6}

- - - - {translated.title} - -
- } - description={ - - {translated.title1} 1 - - } - extra={translated.extra} - /> - - } /> - + +

{translated.customRight}

+

{translated.title5}

- - - } - /> - - https://jd.com - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => { - onJumpclick(event, 'https://jd.com') - }} - /> - - - - - {translated.title} - - {translated.title1} - - - } - extra={ -
- More - -
- } - /> - -
{translated.content}
- - - {translated.title1} - - } - extra={} - /> - - - - - - - {translated.title} - - - } - extra={} - /> - -
{translated.content}
- - Action} /> - - - - - {translated.title} - - } - /> - -
{translated.content}
- - - - - - - + +

{translated.title4}

+ +

{translated.title7}

+ ) diff --git a/src/packages/cell/demos/h5/demo1.tsx b/src/packages/cell/demos/h5/demo1.tsx new file mode 100644 index 0000000000..2fffd178e6 --- /dev/null +++ b/src/packages/cell/demos/h5/demo1.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { Cell, Toast } from '@nutui/nutui-react' + +const Demo1 = () => { + const testClick = ( + event: React.MouseEvent + ) => { + Toast.show('点击事件') + } + return ( + <> + + + + ) => testClick(event)} + /> + + + ) +} +export default Demo1 diff --git a/src/packages/cell/demos/h5/demo2.tsx b/src/packages/cell/demos/h5/demo2.tsx new file mode 100644 index 0000000000..1e36cc3eba --- /dev/null +++ b/src/packages/cell/demos/h5/demo2.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react' + +const Demo2 = () => { + return ( + +
自定义内容
+ + ) +} +export default Demo2 diff --git a/src/packages/cell/demos/h5/demo3.tsx b/src/packages/cell/demos/h5/demo3.tsx new file mode 100644 index 0000000000..bdba513f72 --- /dev/null +++ b/src/packages/cell/demos/h5/demo3.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react' +import { User } from '@nutui/icons-react' + +const Demo3 = () => { + return ( + + + 我是标题 + + } + description={ + + 我是描述1 + + } + extra="描述文字" + /> + ) +} +export default Demo3 diff --git a/src/packages/cell/demos/h5/demo4.tsx b/src/packages/cell/demos/h5/demo4.tsx new file mode 100644 index 0000000000..6ecce22100 --- /dev/null +++ b/src/packages/cell/demos/h5/demo4.tsx @@ -0,0 +1,7 @@ +import React from 'react' +import { Cell, Switch } from '@nutui/nutui-react' + +const App = () => { + return } /> +} +export default App diff --git a/src/packages/cell/demos/h5/demo5.tsx b/src/packages/cell/demos/h5/demo5.tsx new file mode 100644 index 0000000000..3adb5b48f9 --- /dev/null +++ b/src/packages/cell/demos/h5/demo5.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react' + +const Demo5 = () => { + return ( + + ) +} +export default Demo5 diff --git a/src/packages/cell/demos/h5/demo6.tsx b/src/packages/cell/demos/h5/demo6.tsx new file mode 100644 index 0000000000..d9771e64e3 --- /dev/null +++ b/src/packages/cell/demos/h5/demo6.tsx @@ -0,0 +1,119 @@ +import React from 'react' +import { Cell, Button } from '@nutui/nutui-react' +import { ArrowRight, User } from '@nutui/icons-react' + +const Demo6 = () => { + const onJumpclick = ( + event: React.MouseEvent, + url: string + ) => { + const replace = false + if (url) { + replace ? window.location.replace(url) : (window.location.href = url) + } + } + return ( + <> + + } + /> + + https://jd.com + + + } + align="center" + onClick={( + event: React.MouseEvent + ) => onJumpclick(event, 'https://jd.com')} + /> + + + + + 我是标题 + + 我是描述 + + + } + extra={ +
+ More + +
+ } + /> + +
自定义内容
+ + + 我是描述 + + } + extra={} + /> + + + + + 我是标题 + + } + extra={} + /> + +
自定义内容
+ + Action} /> + + + + + 我是标题 + + } + /> + +
自定义内容
+ + + + ) +} +export default Demo6 diff --git a/src/packages/cell/demos/h5/demo7.tsx b/src/packages/cell/demos/h5/demo7.tsx new file mode 100644 index 0000000000..7aeab1f108 --- /dev/null +++ b/src/packages/cell/demos/h5/demo7.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react' + +const Demo7 = () => { + return ( + + + + + ) +} +export default Demo7 diff --git a/src/packages/cell/demos/taro/demo1.tsx b/src/packages/cell/demos/taro/demo1.tsx new file mode 100644 index 0000000000..1531b94e31 --- /dev/null +++ b/src/packages/cell/demos/taro/demo1.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react-taro' + +const Demo1 = () => { + const testClick = ( + event: React.MouseEvent + ) => { + console.log('点击事件') + } + return ( + <> + + + + ) => testClick(event)} + /> + + + ) +} +export default Demo1 diff --git a/src/packages/cell/demos/taro/demo2.tsx b/src/packages/cell/demos/taro/demo2.tsx new file mode 100644 index 0000000000..e5b468b3ab --- /dev/null +++ b/src/packages/cell/demos/taro/demo2.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react-taro' + +const Demo2 = () => { + return ( + +
自定义内容
+ + ) +} +export default Demo2 diff --git a/src/packages/cell/demos/taro/demo3.tsx b/src/packages/cell/demos/taro/demo3.tsx new file mode 100644 index 0000000000..c7a3a1a3d5 --- /dev/null +++ b/src/packages/cell/demos/taro/demo3.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react-taro' +import { User } from '@nutui/icons-react-taro' + +const Demo3 = () => { + return ( + + + 我是标题 + + } + description={ + + 我是描述1 + + } + extra="描述文字" + /> + ) +} +export default Demo3 diff --git a/src/packages/cell/demos/taro/demo4.tsx b/src/packages/cell/demos/taro/demo4.tsx new file mode 100644 index 0000000000..cb4016b621 --- /dev/null +++ b/src/packages/cell/demos/taro/demo4.tsx @@ -0,0 +1,11 @@ +import React from 'react' +import { Cell, Switch } from '@nutui/nutui-react-taro' + +const App = () => { + return ( + + } /> + + ) +} +export default App diff --git a/src/packages/cell/demos/taro/demo5.tsx b/src/packages/cell/demos/taro/demo5.tsx new file mode 100644 index 0000000000..5b5089de61 --- /dev/null +++ b/src/packages/cell/demos/taro/demo5.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react-taro' + +const Demo5 = () => { + return ( + + ) +} +export default Demo5 diff --git a/src/packages/cell/demos/taro/demo6.tsx b/src/packages/cell/demos/taro/demo6.tsx new file mode 100644 index 0000000000..a50a7977a8 --- /dev/null +++ b/src/packages/cell/demos/taro/demo6.tsx @@ -0,0 +1,118 @@ +import React from 'react' +import { Cell, Button } from '@nutui/nutui-react-taro' +import { ArrowRight, User } from '@nutui/icons-react-taro' +import { redirectTo, navigateTo } from '@tarojs/taro' + +const Demo6 = () => { + const onJumpclick = ( + event: React.MouseEvent, + link: string + ) => { + const replace = false + if (link) { + replace ? redirectTo({ url: link }) : navigateTo({ url: link }) + } + } + return ( + <> + + } + /> + + /pages/index/index + + + } + align="center" + onClick={( + event: React.MouseEvent + ) => { + onJumpclick(event, '/pages/index/index') + }} + /> + + + + + 我是标题 + + 我是描述 + + + } + extra={ +
+ More + +
+ } + /> + +
自定义内容
+ + + 我是描述 + + } + extra={} + /> + + + + + 我是标题 + + } + extra={} + /> + +
自定义内容
+ + Action} /> + + + + + 我是标题 + + } + /> + +
自定义内容
+ + + + ) +} +export default Demo6 diff --git a/src/packages/cell/demos/taro/demo7.tsx b/src/packages/cell/demos/taro/demo7.tsx new file mode 100644 index 0000000000..4e2bf5f93c --- /dev/null +++ b/src/packages/cell/demos/taro/demo7.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { Cell } from '@nutui/nutui-react-taro' + +const Demo7 = () => { + return ( + + + + + ) +} +export default Demo7 diff --git a/src/packages/cell/doc.en-US.md b/src/packages/cell/doc.en-US.md index 1f05ad3f31..3d0225ec77 100644 --- a/src/packages/cell/doc.en-US.md +++ b/src/packages/cell/doc.en-US.md @@ -16,32 +16,7 @@ import { Cell } from '@nutui/nutui-react' :::demo -```tsx -import React from 'react' -import { Cell, Toast } from '@nutui/nutui-react' - -const App = () => { - const testClick = ( - event: React.MouseEvent - ) => { - Toast.show('Click Test') - } - return ( - <> - - - - ) => testClick(event)} - /> - - - ) -} -export default App -``` + ::: @@ -49,19 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - -
Customize Content
- - ) -} -export default App -``` + ::: @@ -69,31 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' -import { User } from '@nutui/icons-react' - -const App = () => { - return ( - - - TitleDescription - - } - description={ - - Description1 - - } - extra="extra" - /> - ) -} -export default App -``` + ::: @@ -101,19 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell, Switch } from '@nutui/nutui-react' - -const App = () => { - return ( - - } /> - - ) -} -export default App -``` + ::: @@ -123,17 +50,7 @@ You can align the left and right contents of the cell vertically through the 'ce :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - - ) -} -export default App -``` + ::: @@ -141,126 +58,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell, Button } from '@nutui/nutui-react' -import { ArrowRight, User } from '@nutui/icons-react' - -const App = () => { - const onJumpclick = ( - event: React.MouseEvent, - url: string - ) => { - const replace = false - if (url) { - replace ? window.location.replace(url) : (window.location.href = url) - } - } - return ( - <> - - } - /> - - https://jd.com - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => onJumpclick(event, 'https://jd.com')} - /> - - - - - Title - - Description - - - } - extra={ -
- More - -
- } - /> - -
Content
- - - Description - - } - extra={} - /> - - - - - Title - - } - extra={} - /> - -
Content
- - Action} /> - - - - - Title - - } - /> - -
Content
- - - - ) -} -export default App -``` + ::: @@ -270,24 +68,7 @@ The 'divider' property allows you to keep the lower edge from being displayed be :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/cell/doc.md b/src/packages/cell/doc.md index 7a18ea1c2a..dd04b6c56f 100644 --- a/src/packages/cell/doc.md +++ b/src/packages/cell/doc.md @@ -16,32 +16,7 @@ import { Cell } from '@nutui/nutui-react' :::demo -```tsx -import React from 'react' -import { Cell, Toast } from '@nutui/nutui-react' - -const App = () => { - const testClick = ( - event: React.MouseEvent - ) => { - Toast.show('点击事件') - } - return ( - <> - - - - ) => testClick(event)} - /> - - - ) -} -export default App -``` + ::: @@ -49,19 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - -
自定义内容
- - ) -} -export default App -``` + ::: @@ -69,31 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' -import { User } from '@nutui/icons-react' - -const App = () => { - return ( - - - 我是标题 - - } - description={ - - 我是描述1 - - } - extra="描述文字" - /> - ) -} -export default App -``` + ::: @@ -101,19 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell, Switch } from '@nutui/nutui-react' - -const App = () => { - return ( - - } /> - - ) -} -export default App -``` + ::: @@ -123,149 +50,17 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - - ) -} -export default App -``` + ::: ### 链接 | 分组用法 +使用 `nut-cell-group` 支持 `title` 和 `description` + :::demo -```tsx -import React from 'react' -import { Cell, Button } from '@nutui/nutui-react' -import { ArrowRight, User } from '@nutui/icons-react' - -const App = () => { - const onJumpclick = ( - event: React.MouseEvent, - url: string - ) => { - const replace = false - if (url) { - replace ? window.location.replace(url) : (window.location.href = url) - } - } - return ( - <> - - } - /> - - https://jd.com - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => onJumpclick(event, 'https://jd.com')} - /> - - - - - 我是标题 - - 我是描述 - - - } - extra={ -
- More - -
- } - /> - -
自定义内容
- - - 我是描述 - - } - extra={} - /> - - - - - 我是标题 - - } - extra={} - /> - -
自定义内容
- - Action} /> - - - - - 我是标题 - - } - /> - -
自定义内容
- - - - ) -} -export default App -``` + ::: @@ -275,24 +70,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/cell/doc.taro.md b/src/packages/cell/doc.taro.md index 31cddb0982..5fbe2fda83 100644 --- a/src/packages/cell/doc.taro.md +++ b/src/packages/cell/doc.taro.md @@ -16,32 +16,7 @@ import { Cell } from '@nutui/nutui-react-taro' :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react-taro' - -const App = () => { - const testClick = ( - event: React.MouseEvent - ) => { - console.log('点击事件') - } - return ( - <> - - - - ) => testClick(event)} - /> - - - ) -} -export default App -``` + ::: @@ -49,19 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react-taro' - -const App = () => { - return ( - -
自定义内容
- - ) -} -export default App -``` + ::: @@ -69,31 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react-taro' -import { User } from '@nutui/icons-react-taro' - -const App = () => { - return ( - - - 我是标题 - - } - description={ - - 我是描述1 - - } - extra="描述文字" - /> - ) -} -export default App -``` + ::: @@ -101,19 +40,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell, Switch } from '@nutui/nutui-react-taro' - -const App = () => { - return ( - - } /> - - ) -} -export default App -``` + ::: @@ -123,149 +50,16 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react-taro' - -const App = () => { - return ( - - ) -} -export default App -``` + ::: ### 链接 | 分组用法 +使用 `nut-cell-group` 支持 `title`和`extra` :::demo -```tsx -import React from 'react' -import { Cell, Button } from '@nutui/nutui-react-taro' -import { ArrowRight, User } from '@nutui/icons-react-taro' - -const App = () => { - const onJumpclick = ( - event: React.MouseEvent, - link: string - ) => { - const replace = false - if (link) { - replace ? redirectTo({ url: link }) : navigateTo({ url: link }) - } - } - return ( - <> - - } - /> - - /pages/index/index - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => { onJumpclick(event, '/pages/index/index') }} - /> - - - - - 我是标题 - - 我是描述 - - - } - extra={ -
- More - -
- } - /> - -
自定义内容
- - - 我是描述 - - } - extra={} - /> - - - - - 我是标题 - - } - extra={} - /> - -
自定义内容
- - Action} /> - - - - - 我是标题 - - } - /> - -
自定义内容
- - - - ) -} -export default App -``` + ::: @@ -275,24 +69,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react-taro' - -const App = () => { - return ( - - - - - ) -} -export default App -``` + ::: diff --git a/src/packages/cell/doc.zh-TW.md b/src/packages/cell/doc.zh-TW.md index fb13e4822f..2ced0173c9 100644 --- a/src/packages/cell/doc.zh-TW.md +++ b/src/packages/cell/doc.zh-TW.md @@ -12,36 +12,11 @@ import { Cell } from '@nutui/nutui-react' ## 代碼演示 -### 基础用法 +### 基礎用法 :::demo -```tsx -import React from 'react' -import { Cell, Toast } from '@nutui/nutui-react' - -const App = () => { - const testClick = ( - event: React.MouseEvent - ) => { - Toast.show('點擊事件') - } - return ( - <> - - - - ) => testClick(event)} - /> - - - ) -} -export default App -``` + ::: @@ -49,19 +24,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' - -const App = () => { - return ( - -
自定義內容
- - ) -} -export default App -``` + ::: @@ -69,31 +32,7 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' -import { User } from '@nutui/icons-react' - -const App = () => { - return ( - - - 我是標題 - - } - description={ - - 我是描述1 - - } - extra="描述文字" - /> - ) -} -export default App -``` + ::: @@ -101,171 +40,37 @@ export default App :::demo -```tsx -import React from 'react' -import { Cell, Switch } from '@nutui/nutui-react' - -const App = () => { - return ( - - } /> - - ) -} -export default App -``` + ::: -### 鏈接 | 分組用法 +### 垂直居中 + +通過 `align` 屬性可以讓 Cell 的左右內容都垂直居中。 :::demo -```tsx -import React from 'react' -import { Cell, Button } from '@nutui/nutui-react' -import { ArrowRight, User } from '@nutui/icons-react' - -const App = () => { - const onJumpclick = ( - event: React.MouseEvent, - url: string - ) => { - const replace = false - if (url) { - replace ? window.location.replace(url) : (window.location.href = url) - } - } - return ( - <> - - } - /> - - https://jd.com - - - } - align="center" - onClick={( - event: React.MouseEvent - ) => onJumpclick(event, 'https://jd.com')} - /> - - - - - 我是標題 - - 我是描述 - - - } - extra={ -
- More - -
- } - /> - -
自定義內容
- - - 我是描述 - - } - extra={} - /> - - - - - 我是標題 - - } - extra={} - /> - -
自定義內容
- - Action} /> - - - - - 我是標題 - - } - /> - -
自定義內容
- - - - ) -} -export default App -``` + ::: -### 垂直居中 +### 鏈接 | 分組用法 -通過 `align` 屬性可以讓 Cell 的左右內容都垂直居中。 +使用 `nut-cell-group` 支持 `title` 和 `description` :::demo -```tsx -import React from 'react' -import { Cell } from '@nutui/nutui-react' + -const App = () => { - return ( - - ) -} -export default App -``` +::: + +### 分組用法 + +通過 `divider` 屬性可以讓單元格之間不顯示下邊線。 + +:::demo + + ::: @@ -273,7 +78,7 @@ export default App ### Props -| 属性 | 說明 | 類型 | 默認值 | +| 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | title | 分組標題 | `ReactNode` | `-` | | description | 分組描述 | `ReactNode` | `-` | @@ -283,7 +88,7 @@ export default App ### Props -| 属性 | 說明 | 類型 | 默認值 | +| 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | title | 標題 | `ReactNode` | `-` | | description | 描述 | `ReactNode` | `-` |