react material-ui芯片有没有滑块？

Question

我在我的导航栏中使用react material-ui芯片；然而，看起来像是material-ui没有设计任何功能来在数组中滑动芯片。我想问的是，我怎样才能为芯片数组列表制作一个滑块，以便在芯片上水平滚动？

​

​

Answer 1

您可以通过自定义选项卡组件来实现这一点，例如：

    const ChipTabs = withStyles({
    root: {
        alignItems: 'center',
        minHeight: '0px'
    }
})(Tabs);

const ChipTab = withStyles((theme) => ({
    root: {
        textTransform: 'none',
        backgroundColor: '#e0e0e0',
        borderRadius: '16px',
        minWidth: 0,
        minHeight: 0,
        height: '24px',
        fontSize: '0.8125rem',
        whiteSpace: 'nowrap',
        marginRight: '4px',
        fontFamily: "Roboto"
    }
}))((props) => <Tab disableRipple {...props} />);

然后：

                    <ChipTabs
                                variant="scrollable"
                                scrollButtons="auto"
                            >
                                <ChipTab label="some text"/>
                            </ChipTabs>

在这里查看其他示例：https://mui-treasury.com/styles/tabs/