Material-ui Tabs -如何将它们的滚动

文章/答案/技术大牛

发布

1回答

javascript、reactjs、tabs、material-ui、appbar

我在我的AppBar组件中使用Material-ui Tablist。问题是我有太多的Tabs，我想让它们有响应性-当我有小屏幕时，它们中的一些是看不见的。组件的文档： https://material-ui.com/components/tabs/ 你可以看到，当我有这么多选项卡时，它是如何隐藏最后的： https://code

浏览 41提问于2021-01-04得票数 0

回答已采纳

1回答

我正在使用Material-UI中的Scrollable tabs。如何更改滚动箭头的svg图标？我看到有TabScrollButton组件可以使用。那么我必须为左箭头和右箭头创建一个吗？在Tabs组件中，你可以传递一个正确的ScrollButtonComponent。但是我该如何使用它呢？我在下面试过了，但还不起作用： import Tab from '@material-ui/core/Tab'; impo

浏览 34提问于2021-04-07得票数 2

回答已采纳

6回答

如何删除material-ui的可滚动标签中的多余空间？

css、reactjs、material-ui

看一下这个例子：谢谢。

浏览 4提问于2018-11-27得票数 2

1回答

抽屉内容中的Material UI可滚动标签

javascript、css、reactjs、material-ui

我有一个基于mini variant drawer的material-ui抽屉。在抽屉内容中，我有一组基于prevent scroll buttons tabs的选项卡。我使用material-ui版本4.12.3。不幸的是，抽屉中的选项卡超出了屏幕的宽度，并添加了一个水平滚动条。有关代码和示例，请参阅此codesandbox。我希望选项卡只填充抽屉内容的宽度，并变成可滚动的，就

浏览 15提问于2021-09-29得票数 0

1回答

如何在material UI中为每个选项卡创建多个标签的自定义选项卡？

reactjs、tabs、material-ui

我使用的是这样的材料UI，material-ui/Tabs代码示例... import React from 'react';import AppBar from 'material-ui/AppBar' imp

浏览 13提问于2019-05-15得票数 3

回答已采纳

2回答

使用箭头按钮的可滚动材料ui芯片阵列

javascript、reactjs、material-ui

我试图建立自定义滚动芯片阵列与材料ui版本4，没有版本5。我希望将此组件滚动条更改为左箭头和右箭头按钮(与芯片数组相同的行)。请建议如何通过修改相同的代码或关于另一种方法的建议来做到这一点。

浏览 4提问于2022-05-14得票数 0

1回答

如何将路线链接添加到react typescript中的物料ui选项卡

javascript、reactjs、typescript、react-router、material-ui

如何将路径链接添加到我的代码中的选项卡 import React from 'react';import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui<

浏览 5提问于2020-08-11得票数 0

回答已采纳

2回答

我应该为tabs组件使用react-router吗？

javascript、reactjs、tabs、react-router

什么是更好的方法和/或它会有所不同吗？

浏览 0提问于2017-02-28得票数 15

回答已采纳

6回答

找不到模块:无法解析“@material ui/core/AppBar”

reactjs、material-ui

npm install --save编辑:刚刚发现通过安装的任何一个模块都不能被解析。因此，所有模块似乎都有问题，即使它们位于node_modules文件夹中.在过去的两个小时里，我一直在调试这个错误。请注意，应用程序是使用create-react-app工具创建的。下面是我导入模块的方式：import Button from "@ma

浏览 5提问于2018-08-27得票数 11

回答已采纳

2回答

如何在Materials UI中更改选项卡组件的大小？

javascript、html、css、reactjs、material-ui

为了显示这两个数字，我创建了一个组件，它将显示在屏幕的每一半上。在每个数字下，我将有一组选项卡在组件的视图中进行切换。我尝试使用withStyles(样式)，如下所示，但它不能正常工作。@material-ui/core/Paper'; import

浏览 21提问于2020-05-25得票数 3

回答已采纳

2回答

Material UI选项卡标签字体-大小非常小

reactjs、material-ui

我开始使用，我对标签的字体大小有问题，因为它们真的很小……这是我的代码：import PropTypes from 'prop-types';import AppBar from '@material-ui/core/A

浏览 0提问于2018-06-21得票数 5

回答已采纳

0回答

React material-ui选项卡堆叠内容

reactjs、material-ui

我实现了material-ui react选项卡，如下所示 <Tab label="Tab 1" value={props.candidatesTab}> <div style={props.currentTabArrowForward /

浏览 4提问于2017-06-13得票数 1

2回答

如何调用这种类型的导航选项卡菜单

javascript、css、reactjs、material-ui

其中是否包含任何material-ui组件 ? 

浏览 25提问于2020-05-29得票数 4

回答已采纳

1回答

物料-界面:页签列表中的按钮

reactjs、material-ui

我刚刚在Tabs组件的子组件中添加了一个按钮，它完全按照我想要的方式呈现和工作，但在开发人员控制台中有很多警告。<AppBar position="static"> value={this.props.selectedTab} NEW TAB

浏览 19提问于2019-09-26得票数 6

2回答

反应材料-用户界面样式标签

javascript、reactjs、material-ui

我试着把标签的样式设计成白色：还消除了onClick波纹：我怀疑这与重写类有关:指示器，但我不完全确定它是如何/为什么工作的。import React, {Component} from "react" importTabs from "@mat

浏览 0提问于2018-10-09得票数 4

回答已采纳

1回答

增加操作的选项卡数

react-native

在这里，我试图做一个标签栏，在其中标签的数量增加按下一个按钮。选项卡的内容保持不变。我该怎么办？

浏览 1提问于2019-11-05得票数 0

回答已采纳

1回答

当路由更改为非选项卡路径时如何清除选定的选项卡指示符

reactjs、react-router、material-ui

当我试图从Tabs导航中清除选定的选项卡指示器时，我遇到了一个错误。该元素除了一个按钮组件之外，还包含五个单独的Tab组件，该组件将用户重新路由到我们的登录屏幕。如果单击Login按钮，控制台将显示以下错误：“Material:向Tabs组件提供的值5无效。没有一个Tabs子表具有此值。您可以提供以下值之一: 0、1、2、3、4。”单击按钮重新路由到正确的登录路径("/login")，但将前面的选项卡显示为选定的

浏览 4提问于2020-02-22得票数 1

回答已采纳

1回答

物料Ui选项卡显示Api调用的数据

reactjs、tabs、material-ui

目前，我通过单击一个按钮来显示筛选出的数据。每次我点击一个按钮，就会显示相应的过滤数据。现在，我想使用Material Ui Tabs组件，而不是使用按钮。我对Materia Ui比较陌生。我不明白如何使用Material Ui Tab组件显示过滤后的数据。我的代码如下-const value = useContext(DataContext); const[tabs, setTab

浏览 3提问于2021-04-08得票数 0

1回答

升级Material-ui* 0.10.1至0.17，出现数百个错误*

reactjs、webpack、material-ui

看起来这些版本之间有了巨大的变化，我们实际上必须升级40个库来升级React.js，而material-ui是给我们带来最多问题的一个。我该如何修复以下问题... ERROR in ./

浏览 13提问于2017-03-11得票数 0

回答已采纳

3回答

如何自定义物料-界面中活动页签的字体大小

javascript、reactjs、material-ui

我的要求是，只有活动的标签应该有特定的颜色和字体大小。这是我的代码： <Tabs onChange<Tab label={<span className={classes.customStyleOnTab}> Tab 2</span>}/> &

浏览 25提问于2020-09-24得票数 2

回答已采纳

点击加载更多