Closed tchen-l closed 2 years ago
codesandbox
import Overflow from "../src"; import "../assets/index.less"; import "./common.less"; interface ItemType { value: string | number; label: string; } function createData(count: number): ItemType[] { const data: ItemType[] = new Array(count).fill(undefined).map((_, index) => ({ value: index, label: `Label ${index}` })); return data; } function renderItem(item: ItemType) { return ( <div style={{ margin: "0 16px 0 8px", padding: "4px 8px", background: "rgba(255, 0, 0, 0.2)" }} > {item.label} </div> ); } function renderRest(items: ItemType[]) { return ( <div style={{ margin: "0 16px 0 8px", padding: "4px 8px", background: "rgba(255, 0, 0, 0.2)" }} > +{items.length}... </div> ); } const Demo = () => { const [responsive, setResponsive] = React.useState(true); const [data, setData] = React.useState(createData(2)); return ( <div style={{ padding: 32 }}> <div style={{ border: "5px solid green", padding: 8, maxWidth: 100, marginTop: 32 }} > <Overflow<ItemType> data={data} renderItem={renderItem} renderRest={renderRest} maxCount="responsive" /> </div> </div> ); }; export default Demo;
codesandbox