generated from react-component/footer
-
Notifications
You must be signed in to change notification settings - Fork 37
Closed
Description
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;
Metadata
Metadata
Assignees
Labels
No labels