[material-ui][Slider] Labels of the marks goes beyond the block

webghufk  于 10个月前  发布在  Go
关注(0)|答案(7)|浏览(87)

重现步骤

链接到实时示例:(必需)
步骤:

  1. 将滑块组件添加到页面上
  2. 添加标记 min 和 max
  3. 标记超出了块的范围

当前行为

  • 无响应*

预期行为

标记适应父容器

上下文


如您所见,它们不在容器中

您的环境

npx @mui/envinfo

  1. System:
  2. OS: macOS 14.1.2
  3. Binaries:
  4. Node: 20.9.0 - /usr/local/bin/node
  5. npm: 10.1.0 - /usr/local/bin/npm
  6. pnpm: Not Found
  7. Browsers:
  8. Chrome: 120.0.6099.216
  9. Edge: Not Found
  10. Safari: 17.1.2
  11. npmPackages:
  12. @emotion/react: ^11.11.3 => 11.11.3
  13. @emotion/styled: ^11.11.0 => 11.11.0
  14. @mui/base: 5.0.0-beta.31
  15. @mui/core-downloads-tracker: 5.15.4
  16. @mui/icons-material: ^5.15.4 => 5.15.4
  17. @mui/material: ^5.15.4 => 5.15.4
  18. @mui/material-nextjs: ^5.15.3 => 5.15.4
  19. @mui/private-theming: 5.15.4
  20. @mui/styled-engine: 5.15.4
  21. @mui/system: 5.15.4
  22. @mui/types: 7.2.13
  23. @mui/utils: 5.15.4
  24. @mui/x-date-pickers: ^6.18.7 => 6.18.7
  25. @types/react: ^18.2.47 => 18.2.47
  26. react: ^18.2.0 => 18.2.0
  27. react-dom: ^18.2.0 => 18.2.0
  28. typescript: ^5.3.3 => 5.3.3
  29. </details>
  30. **Search keywords**: slider
ojsjcaue

ojsjcaue1#

嘿,@DonikaV,感谢你的反馈!
只是为了澄清一下,通过使标记适应父容器
你的意思是:

1. 找到一种方法将标签对齐到滑块轨道的边缘

或者

2. 使父容器包含标签?

slmsl1lt

slmsl1lt2#

嘿,@zanivan,@mj12albert ,我认为包含父容器标签的第二个选项会是一个更好的解决方案。如果你也认为它比其他方案更好,请将此分配给我,我会解决这个问题。

zbdgwd5y

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}$

展开查看全部
zour9fqk

zour9fqk4#

如果我们采用第一种情况,我相信我们应该让用户选择是否启用这个功能——这意味着我不会改变当前的默认设置。
然而,在第二种情况下,这可能是一个破坏性的更改。我想知道将组件修改为包含这样的标签是否会破坏现有的布局。
第三种方法是将@DonikaV的解决方法——或者另一个——作为文档中的示例,这样用户就可以学习如何实现这一点。
@DiegoAndai@mj12albert 有什么想法吗?

thtygnil

thtygnil5#

这是我所做的。

  1. <Grid item xs={12} className="pt-0">
  2. <div className="text-center">
  3. <Slider
  4. marks={marks}
  5. step={10}
  6. defaultValue={MIN}
  7. valueLabelDisplay="auto"
  8. min={MIN}
  9. max={MAX}
  10. onChange={handleChange}
  11. />
  12. </div>
  13. <div className="slider-marks d-flex flex-between">
  14. <div role="button" onClick={() => setVal(MIN)}>
  15. {formatCurrency(MIN)} min
  16. </div>
  17. <div role="button" onClick={() => setVal(MAX)}>
  18. {formatCurrency(MAX)} max
  19. </div>
  20. </div>
  21. </Grid>
  1. Along with the styles:
  2. ```.d-flex {
  3. display: flex;
  4. }
  5. .flex-between {
  6. justify-content: space-between;
  7. align-items: center;
  8. } ```

结果:

P.S. 我对两个选项都满意,最重要的是它们会显示在父容器内。我知道在MUI Flutter中也是同样的问题,我的同事也添加了自定义的最小值和最大值标签。

展开查看全部
6qftjkof

6qftjkof6#

第三种方法是将@DonikaV的解决方法(或其他方法)作为示例添加到文档中,这样用户就可以学习如何实现。我倾向于这种方法:

  • 现在为它添加一个示例
  • 在Material 3中重新审视这个问题

@DonikaV,你能打开一个PR来将示例添加到文档中吗?

bvuwiixz

bvuwiixz7#

第三种方法是将@DonikaV的解决方法(或其他方法)作为文档中的演示,以便用户能够学习如何实现。我倾向于这种方法:

  • 现在添加一个演示
  • 在Material 3中重新审视这个问题

@DonikaV,你能打开一个PR将示例添加到文档中吗?
你好,已经完成了,#40647。请检查是否一切正常。这是我第一次为如此大的项目做出贡献 :)

相关问题