tabs 相关问题

一种用户界面模式，允许在内容的上方，下方或侧面显示带有导航参考的多个页面或元素。单击导航参考时，一个元素可见，而其他元素则关闭。通常，导航参考以指示其当前可见的方式进行颜色编码。

是否有可能在屏幕的水平中心放置活动选项卡，除了选择第一个或最后一个选项卡的情况？有可能在屏幕的水平中心放置活动选项卡，除了选择第一个或最后一个选项卡的情况外吗？ <Tabs className={classes.tabs} indicatorColor='primary' scrollButtons='auto' textColor='primary' value={activeTab} variant='scrollable' > {tabs.map(({ label, url, icon = '', id, action } => ( <Tab key={id} label={label} icon={icon} onClick={onClick} /> ))} </Tabs> activeTab是根据当前路径计算的。 onClick只需通过单击选项卡ID按下路径变化活动标签不在中央屏幕截图中中心屏幕截图中的活动选项卡单击选项卡之后，可以自动进行第二个示例情况？是的，这是可能的。您只需要创建一个运行AonClick的事件（或在Vanilla JavaScript A andonclick事件中）即可。它正在运行的是隐藏的选项卡并显示要显示的选项卡，只要索引不是0而不是长度-1. 可能您已经有一个事件处理程序，因为您的问题表明TAB激活有效。您只需要在事件中实现我上面描述的function并触发它。这种感觉有点笨拙，但是我能够通过HTML元素的scrollintoviewmethot.。要使以初始负载为中心的活动选项卡，您可以将REF与最初活跃的选项卡一起使用，以及一个：function： function选择新选项卡之后，您还可以在每个选项卡中添加一个on Click将其滚动到中心： useEffect 不幸的是，单击部分无法视图的选项卡时，这无效，因为Mui已经尝试在该情况下滚动到视图中，并且由于通过const initialTabRef = useRef<HTMLDivElement>(null); useEffect(() => { const tempScrollY = window.scrollY; initialTabRef.current?.scrollIntoView({ behavior: "instant", block: "nearest", // no need to vertically-center the tab inline: "center", // horizontally-center it within its parent }); // really janky, but instantly scrolling back to our tempScrollY is a way to appear to avoid vertical scrolling from `scrollIntoView` window.scrollTo({ top: tempScrollY, behavior: "instant" }); }, []); // ... <Tab ref={initialSelectedTab} //... other tab props /> 实现了，我不确定如何在不更改MUI逻辑本身的情况下覆盖它。

javascript reactjs tabs material-ui

回答 2 投票 0

我有一个问题，我在光标中获得了这个奇怪的红色突出显示标签。我在“首选项> vs代码设置”中将“重点为“活动凹痕”设置为false，这有助于一会儿，但是问题再次出现。 Cursor设置

highlightedtext

tabs syntax-highlighting highlight cursor-ide

回答 0 投票 0

步骤繁殖将一些选项卡放入带有相对较长标签的DefaultTabController中。确保减小浏览器窗口的宽度，以使选项卡没有完整显示的空间。 la ...

DefaultTabController

flutter web tabs overflow

回答 1 投票 0

染色扩展：如何在新选项卡中打开链接？

在我的stackoverflow文件夹中，我有stackoverflow.ico和2个波纹管。将其导入Chrome时，它在地址栏中显示图标，但是当我单击它时，Chrome不会打开任何新选项卡。什么...