【问题标题】:Material UI Slider - Label Formating材质 UI 滑块 - 标签格式
【发布时间】:2020-05-14 08:23:12
【问题描述】:

我有以下范围滑块,它显示从 1000 到 1,000,000 的值。

我想将标签显示为更易读的格式,例如100k 1M 1k 等。是否可以在工具提示内格式化标签,以便对用户更有意义并且不会破坏用户体验。

我想用这个功能来改变数字的显示方式。

function numFormatter(num) {
    if(num > 999 && num < 1000000){
        return (num/1000).toFixed(0) + 'K'; // convert to K for number from > 1000 < 1 million 
    }else if(num > 1000000){
        return (num/1000000).toFixed(0) + 'M'; // convert to M for number from > 1 million 
    }else if(num < 900){
        return num; // if value < 1000, nothing to do
    }
}

【问题讨论】:

    标签: reactjs slider material-ui material-design


    【解决方案1】:

    是的,有可能。

    Material-UI Slider 有名为 valueLabelFormat

    的道具

    值标签的值的格式函数。

    参考:

    valueLabelFormat?: string | ((value: number, index: number) => React.ReactNode);
    

    使用示例:

    valueLabelFormat={value => <div>{numFormatter(value)}</div>}
    

    截图:

    【讨论】:

    • 谢谢你会检查出来。我们是否也应该在getAriaValueText 上更新它
    • @HarshaMV 可能没有必要。更新了这篇文章的快照。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-04-22
    • 2020-03-10
    • 1970-01-01
    • 2021-11-24
    • 1970-01-01
    • 2021-11-15
    • 2016-05-04
    相关资源
    最近更新 更多