根据圆形图像调整项目符号点

Question

我想创建一个部分，其中图像可以是任何布局，在我的例子中它是圆形的。 文本点随图像布局进行调整。 我正在寻找这个问题的动态解决方案。 是否有任何反应库或任何其他解决方案（没有硬编码协调文本与图像布局对齐）

我尝试用CSS解决这个问题，但最终每次布局更改或点数更改时我都需要编写代码

Answer 1

const CircularLayout = ({ imageUrl, points }) => {
  return (
    <div className="circular-layout">
      {/* Circle image */}
      <div className="circle-container">
        <img src={imageUrl} alt="Circular Layout" className="circle-image" />
      </div>

      {/* Dynamic text points */}
      <div className="text-points">
        {points.map((point, index) => (
          <div key={index} className="text-point">
            <span className="icon">⭐</span>
            {point}
          </div>
        ))}
      </div>
    </div>
  );
};

CSS：

.circular-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.circle-container {
  position: relative;
  flex: 0 0 auto;
}

.circle-image {
  width: 200px; 
  height: 200px;
  border-radius: 50%; 
}

.text-points {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20px;
}

.text-point {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 1rem;
}

.text-point .icon {
  margin-right: 8px;
  color: #ffa500;
}

这应该有效。在circle-omage类中，您可以直接动态管理尺寸。通过文本点类，您可以获得动态间距。希望这有帮助。