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

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

重现步骤

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

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

当前行为

  • 无响应*

预期行为

标记适应父容器

上下文


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

您的环境

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
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#

这是我所做的。

<Grid item xs={12} className="pt-0">
                    <div className="text-center">
                      <Slider
                        marks={marks}
                        step={10}
                        defaultValue={MIN}
                        valueLabelDisplay="auto"
                        min={MIN}
                        max={MAX}
                        onChange={handleChange}
                      />
                    </div>
                    <div className="slider-marks d-flex flex-between">
                      <div role="button" onClick={() => setVal(MIN)}>
                        {formatCurrency(MIN)} min
                      </div>
                      <div role="button" onClick={() => setVal(MAX)}>
                        {formatCurrency(MAX)} max
                      </div>
                    </div>
                  </Grid>
Along with the styles:
               ```.d-flex {
                  display: flex;
                 }
               .flex-between {
                    justify-content: space-between;
                    align-items: center;
               } ```

结果:

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

6qftjkof

6qftjkof6#

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

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

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

bvuwiixz

bvuwiixz7#

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

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

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

相关问题