[英]Add dynamic value beside label in Material UI React Tabs Component
I am creating tabs using material ui and i want to add value beside label (ex: 05 written beside Recommendation label)<\/code> which will be dynamic in the tabs component just like shown in below image:
我正在使用材料 ui 创建选项卡,我想在标签旁边添加值
(ex: 05 written beside Recommendation label)<\/code> ,这将在选项卡组件中是动态的,如下图所示:
Here is my code snippet of Tabs component:这是我的 Tabs 组件的代码片段:
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Recommendation" />
<Tab label="Ongoing" />
<Tab label="Completed" />
</Tabs>
</Box>
One option is to create your own component, pass that in as a the Tab label<\/code> , and then style it as needed.
一种选择是创建自己的组件,将其作为 Tab
label<\/code>传入,然后根据需要设置样式。
For example:
例如:
const TabWithCount = ({ children, count }) => {
return (
<Box sx={{ display: "inline-flex", alignItems: "center" }}>
<Typography component="div">{children}</Typography>
{count ? (
<Typography
component="div"
variant="body2"
sx={{ marginLeft: "0.5rem" }}
>
{count}
</Typography>
) : null}
</Box>
);
};
...
<Tab
label={<TabWithCount count="05">Recommendation</TabWithCount>}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.