重现步骤
链接到实时示例:(必需)
步骤:
- 将滑块组件添加到页面上
- 添加标记 min 和 max
- 标记超出了块的范围
当前行为
- 无响应*
预期行为
标记适应父容器
上下文
如您所见,它们不在容器中
您的环境
npx @mui/envinfo
System:
OS: macOS 14.1.2
Binaries:
Node: 20.9.0 - /usr/local/bin/node
npm: 10.1.0 - /usr/local/bin/npm
pnpm: Not Found
Browsers:
Chrome: 120.0.6099.216
Edge: Not Found
Safari: 17.1.2
npmPackages:
@emotion/react: ^11.11.3 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.31
@mui/core-downloads-tracker: 5.15.4
@mui/icons-material: ^5.15.4 => 5.15.4
@mui/material: ^5.15.4 => 5.15.4
@mui/material-nextjs: ^5.15.3 => 5.15.4
@mui/private-theming: 5.15.4
@mui/styled-engine: 5.15.4
@mui/system: 5.15.4
@mui/types: 7.2.13
@mui/utils: 5.15.4
@mui/x-date-pickers: ^6.18.7 => 6.18.7
@types/react: ^18.2.47 => 18.2.47
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.3.3 => 5.3.3
</details>
**Search keywords**: slider
7条答案
按热度按时间ojsjcaue1#
嘿,@DonikaV,感谢你的反馈!
只是为了澄清一下,通过使标记适应父容器
你的意思是:
1. 找到一种方法将标签对齐到滑块轨道的边缘
或者
2. 使父容器包含标签?
slmsl1lt2#
嘿,@zanivan,@mj12albert ,我认为包含父容器标签的第二个选项会是一个更好的解决方案。如果你也认为它比其他方案更好,请将此分配给我,我会解决这个问题。
zbdgwd5y3#
你好,@DonikaV,感谢你的反馈!
只是为了澄清,通过使标记适应父容器
你的意思是:
1. 有一种方法将标签对齐到滑块轨道的边缘
$x_{1}^{c}{0}{d}{1}{x}$
或者
2. 使父容器包含标签?
$x_{1}^{c}{1}{d}{1}{x}$
第一个选项会很好,作为一个解决方法,我从标记中删除了标签,并添加了我自己的自定义HTML标签。但是如果能像你的截图那样就好了 $x_{e}^{0}{f}{1}{x}$
zour9fqk4#
如果我们采用第一种情况,我相信我们应该让用户选择是否启用这个功能——这意味着我不会改变当前的默认设置。
然而,在第二种情况下,这可能是一个破坏性的更改。我想知道将组件修改为包含这样的标签是否会破坏现有的布局。
第三种方法是将@DonikaV的解决方法——或者另一个——作为文档中的示例,这样用户就可以学习如何实现这一点。
@DiegoAndai@mj12albert 有什么想法吗?
thtygnil5#
这是我所做的。
结果:
P.S. 我对两个选项都满意,最重要的是它们会显示在父容器内。我知道在MUI Flutter中也是同样的问题,我的同事也添加了自定义的最小值和最大值标签。
6qftjkof6#
第三种方法是将@DonikaV的解决方法(或其他方法)作为示例添加到文档中,这样用户就可以学习如何实现。我倾向于这种方法:
@DonikaV,你能打开一个PR来将示例添加到文档中吗?
bvuwiixz7#
第三种方法是将@DonikaV的解决方法(或其他方法)作为文档中的演示,以便用户能够学习如何实现。我倾向于这种方法:
@DonikaV,你能打开一个PR将示例添加到文档中吗?
你好,已经完成了,#40647。请检查是否一切正常。这是我第一次为如此大的项目做出贡献 :)