Skip to content

Commit

Permalink
Merge 80e3975 into 0d1719d
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaiQiangReal
DaiQiangReal committed Jun 12, 2024
2 parents 0d1719d + 80e3975 commit be08bfb
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 85 deletions.
110 changes: 88 additions & 22 deletions content/navigation/tabs/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,68 @@ class App extends React.Component {
}
```
**Modify the scrolling rendering overflow item indicator**
`renderOverflowItem` modifies the overflow item indicator, with the input parameters being the overflowed items and position
```jsx live=true dir="column"
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

()=>{
const [activeKey,setActiveKey] = useState("item-1")
return <Tabs style={{ width: '50%', margin: '20px' }} activeKey={activeKey} type="card" collapsible renderOverflowItem={(items,pos)=>{
return <Dropdown render={
<Dropdown.Menu>
{items.map(item=>{
return <Dropdown.Item onClick={()=>setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>
})}
</Dropdown.Menu>
}>
<Button>
{pos}
</Button>
</Dropdown>
}}>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
<TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
Content of card tab {i}
</TabPane>
))}
</Tabs>
}
```
**Modify overflow item indicator rendering position**
Use `overflowItemRenderPosition` to modify the overflow indicator position, optional left both right
```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
render() {
return (
<Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible overflowItemRenderPosition={"end"} >
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
<TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
Content of card tab {i}
</TabPane>
))}
</Tabs>
);
}
}
```
### Disable
Disable one tab.
Expand Down Expand Up @@ -584,28 +646,32 @@ class App extends React.Component {
### Tab
Property | Description | Type | Default Value |
--- | --- | --- | --- |
activeKey | The itemKey value of the currently active tab page | string | None |
className | class name | string | None |
collapsible | collapsed Tabs, **>=1.1.0** | boolean | false |
contentStyle | The outer style object of the content area | CSSProperties | None |
defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
more | Render a portion of the Tab into a drop-down menu ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | - |
renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean | | |
size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
style | style object | CSSProperties | None |
tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
tabPosition | The position of the tab, support `top` (horizontal), `left` (vertical), **>=1.0.0** | string | `top` |
type | The style of the label bar, optional `line`, `card`, `button` | string | `line` |
onChange | Callback function when switching tab pages | function(activeKey: string) | None |
onTabClick | Click event | function(key: string, e: Event) | None |
onTabClose | executed when tab closed by user, **>=2.1.0** | function(tabKey: string) | None
Property | Description | Type | Default Value |
--- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------|---------------|
activeKey | The itemKey value of the currently active tab page | string | None |
className | class name | string | None |
collapsible | collapsed Tabs, **>=1.1.0** | boolean | false |
collapsibleWrapperStyle | Overall scrolling area style **>=2.61.0** | style: CSSProperties | None |
contentStyle | The outer style object of the content area | CSSProperties | None |
defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
more | Render a portion of the Tab into a drop-down menu ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | - |
renderTabBar | Used for secondary packaging tab bar | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
renderOverflowItem | Customize how overflow items indicator are rendered externally. By default, the overflow items are expanded when the arrow button is hovered. **>=2.61.0** | (items: OverflowItem[],pos:"start"\|"end")=> ReactNode | None
preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean | | |
size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
style | style object | CSSProperties | None |
tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
tabPosition | The position of the tab, support `top` (horizontal), `left` (vertical), **>=1.0.0** | string | `top` |
type | The style of the label bar, optional `line`, `card`, `button` | string | `line` |
onChange | Callback function when switching tab pages | function(activeKey: string) | None |
onTabClick | Click event | function(key: string, e: Event) | None |
onTabClose | executed when tab closed by user, **>=2.1.0** | function(tabKey: string) | None
overflowItemRenderPosition| Overflow item indicator rendering position **>=2.61.0** | "start" "end" "both" | 无
overflowVisibleStateChange| Overflow item switching change callback **>=2.61.0** | (visibleState:Record\<string,bool\>)=>void | None
### TabPane
Expand Down
Loading

0 comments on commit be08bfb

Please sign in to comment.