antd Slider 根据数据展示

最新推荐文章于 2024-08-22 15:17:14 发布

臧小川

最新推荐文章于 2024-08-22 15:17:14 发布

阅读量1.3k

点赞数

分类专栏： react 文章标签： css css3 javascript

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/121909219

版权

react 专栏收录该内容

112 篇文章 6 订阅

订阅专栏

这篇博客展示了如何在React应用中利用Ant Design的Slider组件，并通过自定义marks属性来显示个性化标记，每个标记包含人物名称和对应的高度或金钱值。CSS部分定义了不同标记的背景渐变颜色，区分奇偶性，并调整了滑块的样式，如点、步和文字间距。

摘要由CSDN通过智能技术生成

在这里插入图片描述

index

import React from 'react'
import styles from './style.less'
import { Slider } from 'antd';
const data = [
    {
        height: 148.9,
        name: '羽神',
        money: 250,
    },
    {
        height: 159,
        name: '少主',
        money: 189,
    },
    {
        height: 188,
        name: '大鼎',
        money: 13220,
    },
    {
        height: 188,
        name: '赵老威',
        money: 13220,
    },
    {
        height: 188,
        name: '郭帅',
        money: 13220,
    },
    {
        height: 188,
        name: '那个街口 我丢失了你',
        money: 13220,
    },
    {
        height: 188,
        name: '铜锣湾扛把子',
        money: 13220,
    },

]
const marks = {};
for (const key in data)
{
    console.log(data.length, 'length');
    let index = (100 / (data.length - 1)) * Number(key)  // -1 因为 antd 默认有个终点
    marks[index] = <strong className={key % 2 === 0 ? styles.marksEven : styles.marksOdd} >{data[key].name}</strong>  // 根据奇数偶数 给不同颜色
}
const index = () =>
{
    return (
        <div className={styles.container}>
            <Slider marks={marks} defaultValue={100} disabled className={styles.sli} />
        </div>
    )
}

export default index

CSS

body {
  background: linear-gradient(#243949, #517fa4);
  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    width: 1000px;

    .marksEven {
      // 偶数
      background: linear-gradient(to right, rgba(182, 54, 128) 0%, rgba(16, 202, 100, ) 100%);

    }

    .marksOdd {
      // 奇数
      background: linear-gradient(to right, rgb(231, 120, 157, .3) 0%, rgb(254, 225, 64, .1) 100%);
    }

    .marksEven,
    .marksOdd {
      cursor: pointer;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

  }

}


:global {
  .ant-slider-dot {
    // 点
    position: absolute;
    top: -4px;
    width: 12px;
    height: 12px;
    border: 2px solid #f0f0f0;
    cursor: pointer;
  }

  .ant-slider-step {
    // 步
    position: absolute;
    width: 100%;
    height: 4px;
    background: rgb(25, 184, 144);
  }

  .ant-slider-disabled .ant-slider-handle,
  .ant-slider-disabled .ant-slider-dot {
    background-color: #17b324;
    box-shadow: none;
    cursor: not-allowed;
  }

  .ant-slider-mark {
    // 文字距离
    position: absolute;
    top: 18px;
    left: 10px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
  }

  //   .ant-slider-mark-text {
  //     // 文字颜色
  //     cursor: pointer;
  //     background: linear-gradient(to right, rgb(231, 120, 157, .3) 0%, rgb(254, 225, 64, .1) 100%);
  //     -webkit-background-clip: text;
  //     -webkit-text-fill-color: transparent;
  //   }
}