如何在线性进度条 MUI 的末尾放置图标？

Question

我正在使用 MUI v5 构建线性进度 bar.I 有一个场景，如果进度条中的值为 100%，我需要在进度条的 end.The 宽度处显示勾号图标with/without 刻度图标应该相同，这意味着图标不应该放在 bar.I 之后应该放在 bar.I 的末尾尝试使用样式并能够将刻度图标放在 end.But 我无法清楚地显示图标，因为条形图与勾选图标重叠。

<div style={{ display: "flex", flexDirection: "row", position: "relative", alignItems: "center" }}>
                            <LinearProgress
                              variant="determinate"
                              sx={{
                                width: "100%",
                                borderRadius: "4px"
                              }}
                              
                              value={50}
                            />
                              <CheckCircleIcon sx={{ color: "blue" }} style={{ position: "absolute", width: "20px", display: "flex", justifyContent: "flex-end", right: "-2px", color: "#fff", fontWeight: "bold" }} />
                            
                          </div>

当前设计预期设计

Answer 1

这是一个现场演示，我在其中自定义了一个带有复选标记 SliderThumb 的 MUI Slider。

该演示包括将其用作进度条的基础：

禁用滑块以忽略用户输入。请记住，禁用会将颜色更改为灰色。您可以通过 .Mui-disabled
使用与您当前进度相对应的状态变量设置滑块的 value

您也可以选择自定义 LinearProgress 组件，方法与我在上面自定义 Slider 的方式相同。请参阅 docs 了解 LinearProgress 自定义。

完整滑块代码：

import * as React from 'react'
import Slider, { SliderThumb } from '@mui/material/Slider'
import { styled } from '@mui/material/styles'
import Box from '@mui/material/Box'
import CheckCircleIcon from '@mui/icons-material/CheckCircle'

const CheckMarkSlider = styled(Slider)(({ theme }) =>
({
  color: '#3a8589',
  height: 3,
  padding: '13px 0',
  '& .MuiSlider-thumb':
  {
    height: 20,
    width: 20,
    backgroundColor: '#fff',
    border: '1px solid currentColor',
    '&:hover': {
      boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
    },
    '& .checkmark-bar':
    {
      height: 9,
      width: 1,
      backgroundColor: 'currentColor',
      marginLeft: 1,
      marginRight: 1,
    },
  },
  '& .MuiSlider-track':
  {
    height: 3,
  },
  '& .MuiSlider-rail':
  {
    color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
    opacity: theme.palette.mode === 'dark' ? undefined : 1,
    height: 3,
  },
}))

const CheckMarkThumbComponent = (props) =>
{
  const { children, ...other } = props

  return (
    <SliderThumb {...other}>
      {children}
      <CheckCircleIcon />
    </SliderThumb>
  )
}

const CustomizedSlider = () =>
{
  const [value, setValue] = React.useState(20)

  React.useEffect(() =>
  {
    const intervalId = setInterval(() => setValue(Math.random() * 100), 500)
    return () => clearInterval(intervalId)
  }, [value])

  return (
    <Box sx={{ width: 320 }}>
      <CheckMarkSlider
        value = {value}
        disabled
        components={{ Thumb: CheckMarkThumbComponent }} />
    </Box>
  )
}

export default CustomizedSlider

如何在线性进度条 MUI 的末尾放置图标？

How to place icon at the end in linear progress bar MUI?

css

material-ui