|
|
@@ -378,33 +378,34 @@ 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
|
|
|
+`renderArrow` 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>
|
|
|
+ const [activeKey,setActiveKey] = useState("Tab-0")
|
|
|
+ const renderArrow = (items,pos,handleArrowClick)=>{
|
|
|
+ const style = {width:32,height:32,display:"flex",justifyContent:'center',alignItems:'center',borderRadius:"100%",background:"#d7d7d7",color:"black",cursor:"pointer"}
|
|
|
+ return <Dropdown render={
|
|
|
+ <Dropdown.Menu>
|
|
|
+ {items.map(item=>{
|
|
|
+ return <Dropdown.Item onClick={()=>setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>
|
|
|
+ })}
|
|
|
+ </Dropdown.Menu>
|
|
|
+ }>
|
|
|
+ {pos==="start" ? <div style={style} onClick={handleArrowClick}>←</div>:<div style={style} onClick={handleArrowClick}>→</div>}
|
|
|
+ </Dropdown>
|
|
|
+ }
|
|
|
+
|
|
|
+ return <Tabs renderArrow={renderArrow} style={{ width: '50%', margin: '20px' }} activeKey={activeKey} type="card" collapsible onChange={k=>setActiveKey(k)}>
|
|
|
+ {[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>
|
|
|
}
|
|
|
```
|
|
|
|
|
|
@@ -414,24 +415,40 @@ import { Tabs, TabPane } from '@douyinfe/semi-ui';
|
|
|
|
|
|
**Modify overflow item indicator rendering position**
|
|
|
|
|
|
-Use `overflowItemRenderPosition` to modify the overflow indicator position, optional left both right
|
|
|
+Use `arrowRenderPosition` to modify the overflow indicator position, optional start both end
|
|
|
|
|
|
```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"} >
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowRenderPosition={"start"} >
|
|
|
{[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>
|
|
|
+ <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
|
|
|
+ Content of card tab {i}
|
|
|
+ </TabPane>
|
|
|
))}
|
|
|
- </Tabs>
|
|
|
- );
|
|
|
- }
|
|
|
+ </Tabs>
|
|
|
+ <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowRenderPosition={"both"} >
|
|
|
+ {[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>
|
|
|
+ <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowRenderPosition={"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>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
```
|
|
|
|
|
|
@@ -658,7 +675,7 @@ keepDOM | Whether to render the DOM structure of the hidden panel when using Tab
|
|
|
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
|
|
|
+renderArrow | 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 |
|
|
|
@@ -670,7 +687,7 @@ type | The style of the label bar, optional `line`, `card`, `button`
|
|
|
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" | 无
|
|
|
+arrowRenderPosition| 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
|
DaiQiangReal