时间戳

首页 > 解决方案 > 是否有任何用于反应材料-ui 芯片的滑块？

reactjs - 是否有任何用于反应材料-ui 芯片的滑块？

问题描述

我在导航栏中使用了 react material-ui 芯片；但是，material-ui 似乎没有设计任何功能来将芯片滑入阵列中。我想问如何为芯片数组列表制作一个滑块，以便我可以在芯片上水平滚动？

material-ui芯片组件

标签： reactjsmaterial-ui

解决方案

您可以通过自定义选项卡组件来实现此目的，例如：

    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/

推荐阅读