Skip to content

Commit

Permalink
docs(sidenavbar): 文档可读性优化 (#1920)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alex-huxiyang
Alex-huxiyang authored Feb 2, 2024
1 parent 80a60be commit b5b7a34
Show file tree
Hide file tree
Showing 6 changed files with 478 additions and 327 deletions.
20 changes: 10 additions & 10 deletions src/packages/sidenavbar/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,16 +57,16 @@ const SideNavBarDemo = () => {
},
'en-US': {
text1: 'Basic Usage',
text2: 'Navigation nesting (recommended up to three levels)',
level1: 'Level One',
level2: 'Level Two',
level3: 'Level Three',
title: 'title',
title1: 'left pop up',
title2: 'right pop up',
title3: 'show',
title4: 'front page',
content: 'content',
text2: 'Navigation Nesting (Up To Three Levels Recommended)',
level1: 'Level One ',
level2: 'Level Two ',
level3: 'Level Three ',
title: 'Title',
title1: 'Left Pop Up',
title2: 'Right Pop Up',
title3: 'Show',
title4: 'Front Page',
content: 'Content',
},
'id-ID': {
text1: 'Penggunaan dasar',
Expand Down
20 changes: 10 additions & 10 deletions src/packages/sidenavbar/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,16 @@ const SideNavBarDemo = () => {
},
'en-US': {
text1: 'Basic Usage',
text2: 'Navigation nesting (recommended up to three levels)',
level1: 'Level One',
level2: 'Level Two',
level3: 'Level Three',
title: 'title',
title1: 'left pop up',
title2: 'right pop up',
title3: 'show',
title4: 'front page',
content: 'content',
text2: 'Navigation Nesting (Up To Three Levels Recommended)',
level1: 'Level One ',
level2: 'Level Two ',
level3: 'Level Three ',
title: 'Title',
title1: 'Left Pop Up',
title2: 'Right Pop Up',
title3: 'Show',
title4: 'Front Page',
content: 'Content',
},
'id-ID': {
text1: 'Penggunaan dasar',
Expand Down
196 changes: 118 additions & 78 deletions src/packages/sidenavbar/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,112 +17,152 @@ import { SideNavBar,SubSideNavBar,SideNavBarItem } from '@nutui/nutui-react';
:::demo

```tsx
import React,{useState} from "react";
import {Cell, SideNavBar,SubSideNavBar,SideNavBarItem } from '@nutui/nutui-react';
import React, { useState } from 'react'
import { Cell, SideNavBar, SubSideNavBar, SideNavBarItem, Toast } from '@nutui/nutui-react'

const App = () => {
const [navBarState, setNavBarState] = useState({
type Position = 'left' | 'right'
type NavBarState = {
visible: boolean
position: Position
}
const [navBarState, setNavBarState] = useState<NavBarState>({
visible: false,
position: 'left',
})
const changeNarBar = (visible, position= navBarState.position) => {
const [showThird, setShowThird] = useState(false)
const changeNarBar = (visible: boolean, position: Position = navBarState.position) => {
setNavBarState({
visible,
position,
})
setShowThird(false)
}

return (
<>
<Cell
title="left"

onClick={() => {
changeNarBar(true, 'left')
}}
/>
<Cell
title="right"

onClick={() => {
changeNarBar(true, 'right')
}}
/>
<SideNavBar
title="首页"
visible={navBarState.visible}
position={navBarState.position}
onClose={() => {
changeNarBar(false)
}}
>
<SubSideNavBar title="Level 1 title" value="1-0" >
<SideNavBarItem title="Level 1 content-1" value="1-01" />
<SideNavBarItem title="Level 1 content-2" value="1-02" />
<SubSideNavBar title="Level 2 title" value="2-0">
<SideNavBarItem title="Level 2 content-1" value="2-01" />
<SideNavBarItem title="Level 2 content-2" value="2-02" />
</SubSideNavBar>
const clickItem = (data: any) => {
const { title, value } = data
showThird && Toast.show(`title=${title},value=${value}`)
}
const clickTitle = (data: any) => {
const { title, value, isShow } = data
showThird && Toast.show(`title=${title},value=${value},isShow=${isShow}`)
}
return (
<>
<Cell
title='Left Pop Up'
onClick={() => {
changeNarBar(true, 'left')
}}
/>
<Cell
title='Right Pop Up'
onClick={() => {
changeNarBar(true, 'right')
}}
/>
<SideNavBar
title='Front Page'
visible={navBarState.visible}
position={navBarState.position}
onClose={() => {
changeNarBar(false)
}}>
<SubSideNavBar title='Level One Title' value='1-0' onClick={clickTitle}>
<SideNavBarItem title='Level One Content1' value='1-01' onClick={clickItem} />
<SideNavBarItem title='Level One Content2' value='1-02' />
<SubSideNavBar title='Level Two Title' value='2-0'>
<SideNavBarItem title='Level Two Content1' value='2-01' />
<SideNavBarItem title='Level Two Content2' value='2-02' />
{showThird ? (
<SubSideNavBar title='Level Three Title' value='3-0'>
<SideNavBarItem title='Level Three Content1' value='3-01' />
<SideNavBarItem title='Level Three Content2' value='3-02' />
</SubSideNavBar>
) : null}
</SubSideNavBar>
</SideNavBar>
</SubSideNavBar>
<SubSideNavBar open={false} title='Level One Title-2' value='1-1'>
<SideNavBarItem title='Level One Content2-1' value='1-11' />
<SideNavBarItem title='Level One Content2-2' value='1-12' />
</SubSideNavBar>
</SideNavBar>
</>
);
};
export default App;
)
}
export default App

```

:::

### Nesting (up to three layers recommended)
### Navigation Nesting (Up To Three Levels Recommended)

:::demo

```tsx
import React,{useState} from "react";
import {Cell,SideNavBar,SubSideNavBar,SideNavBarItem } from '@nutui/nutui-react';
import React, { useState } from 'react'
import { Cell, SideNavBar, SubSideNavBar, SideNavBarItem, Toast } from '@nutui/nutui-react'

const App = () => {
const [visible, setVisible] = useState(false)
const changeNarBar = (visible) => {
setVisible(visible)
type Position = 'left' | 'right'
type NavBarState = {
visible: boolean
position: Position
}
const [navBarState, setNavBarState] = useState<NavBarState>({
visible: false,
position: 'left',
})
const [showThird, setShowThird] = useState(false)
const changeNarBar = (visible: boolean, position: Position = navBarState.position) => {
setNavBarState({
visible,
position,
})
setShowThird(false)
}
const clickItem = ({ title, value }) => {
Toast.show(`title=${title},value=${value}`)
const clickItem = (data: any) => {
const { title, value } = data
showThird && Toast.show(`title=${title},value=${value}`)
}
const clickTitle = ({ title, value, isShow }) => {
Toast.show(`title=${title},value=${value},isShow=${isShow}`)
const clickTitle = (data: any) => {
const { title, value, isShow } = data
showThird && Toast.show(`title=${title},value=${value},isShow=${isShow}`)
}
return (
<>
<Cell
title="show"

onClick={() => {
changeNarBar(true)
}}
/>
<SideNavBar
title="首页"
visible={visible}
position='left'
onClose={() => {
changeNarBar(false)
}}
>
<SubSideNavBar title="Level 1 title" value="1-0" onClick={clickTitle}>
<SideNavBarItem title="Level 1 content-1" value="1-01" onClick={clickItem} />
<SideNavBarItem title="Level 1 content-2" value="1-02" />
<SubSideNavBar title="Level 2 title" value="2-0">
<SideNavBarItem title="Level 2 content-1" value="2-01" />
<SideNavBarItem title="Level 2 content-2" value="2-02" />
<SubSideNavBar title="Level 3 title" value="3-0">
<SideNavBarItem title="Level 3 content-1" value="3-01" />
<SideNavBarItem title="Level 3 content-2" value="3-02" />
</SubSideNavBar>
</SubSideNavBar>
title="Show"
onClick={() => {
changeNarBar(true)
}}
/>
<SideNavBar
title='Front Page'
visible={navBarState.visible}
position={navBarState.position}
onClose={() => {
changeNarBar(false)
}}>
<SubSideNavBar title='Level One Title' value='1-0' onClick={clickTitle}>
<SideNavBarItem title='Level One Content1' value='1-01' onClick={clickItem} />
<SideNavBarItem title='Level One Content2' value='1-02' />
<SubSideNavBar title='Level Two Title' value='2-0'>
<SideNavBarItem title='Level Two Content1' value='2-01' />
<SideNavBarItem title='Level Two Content2' value='2-02' />
{showThird ? (
<SubSideNavBar title='Level Three Title' value='3-0'>
<SideNavBarItem title='Level Three Content1' value='3-01' />
<SideNavBarItem title='Level Three Content2' value='3-02' />
</SubSideNavBar>
) : null}
</SubSideNavBar>
</SideNavBar>
</SubSideNavBar>
<SubSideNavBar open={false} title='Level OneTitle-2' value='1-1'>
<SideNavBarItem title='Level One Content2-1' value='1-11' />
<SideNavBarItem title='Level One Content2-2' value='1-12' />
</SubSideNavBar>
</SideNavBar>
</>
);
};
Expand Down Expand Up @@ -154,7 +194,7 @@ export default App;
| value | unique identifier for navigation | `string` \| `number` | `-` |
| title | overall title | `string` | `-` |
| open | whether the navigation is expanded by default | `boolean` | `true` |
| onClick | Navigation click | `data: {title: string, value: string \| number, isShow: boolean}` | `-` |
| onClick | Navigation click | `({title: string, value: string \| number, isShow: boolean}) => void` | `-` |

## SideNavBarItem

Expand All @@ -164,7 +204,7 @@ export default App;
| --- | --- | --- | --- |
| value | unique identifier for navigation | `string` \| `number` | `-` |
| title | overall title | `string` | `-` |
| onClick | Navigation click | `data: {title: string, value: string \| number}` | `-` |
| onClick | Navigation click | `({title: string, value: string \| number}) => void` | `-` |

## Theming

Expand Down
Loading

0 comments on commit b5b7a34

Please sign in to comment.