单击时使用省略号触发隐藏页面链接的弹出菜单

我们在面包屑中有这3个道具;如果breadcrumb中的项目数量增加,则使用省略号会有所偏离。

项目后折叠 =>如果超过了最大项目数,则项目数将显示在省略号后面。

项目折叠前 =>如果超过了最大项目数,则项目数将显示在省略号之前。

maxItems =>指定要显示的面包屑的最大数量。当数量超过最大值时,将只显示第一个项目BeforeCollapse和最后一个项目AfterCollapse,中间有一个省略号。

有没有可能将上述功能构建到内置的面包屑组件中,其中每个插槽都是芯片mui?在开发者工具中,我观察到了它。列表的组合包括这个椭圆svg,我们如何使用它来构建下面的功能。

const Breadcrumbs = ({ links }) => {


  const renderBreadcrumbLinks = () => {
    return links.map((link, index) => {
      const { label, href} = link;
       
      return (
        <React.Fragment key={key}>
          <Chip
            component="a"
            href={href}
            label={label}
            onDelete={handleDelete}
            deleteIcon={deleteIcon}
          />
        </React.Fragment>
      );
    });
  };

  return <Breadcrumbs  component={Paper} itemsAfterCollapse={2} itemsBeforeCollapse={1} maxItems={4} elevation={0}>{renderBreadcrumbLinks()}</CMUI>;
};

export default Breadcrumbs;