释放创意：自定义 React 组件，打造饿了么风格多选按钮

2023-12-26 06:25:09

饿了么风格多选按钮组件：解构它的秘密

饿了么的外卖平台以其直观且用户友好的界面而闻名。其多选按钮组件是一个突出的元素，它以一种视觉上令人愉悦且易于使用的形式提供选择。让我们深入了解构成此组件的关键元素：

方框形状： 饿了么的多选按钮采用方框形状，这是一种广泛用于表示二进制选择（选中或未选中）的常见设计模式。
圆角： 方框的角略微圆润，增添了一丝现代感和精致感。
选中状态： 选中时，方框内部会出现一个蓝色复选标记，清楚地表明该选项已被选择。
悬停效果： 当鼠标悬停在未选中的多选按钮上时，方框的边框会变为蓝色，提供视觉提示，表明该选项可以交互。
对齐： 多选按钮通常以水平排列，在它们之间留出适当的间距，确保清晰度和易读性。

构建自定义组件：循序渐进的指南

现在，我们了解了饿了么多选按钮组件的关键特征，让我们着手构建我们自己的自定义 React 组件。我们将分步进行，涵盖 CSS 样式、JavaScript 逻辑和最佳实践。

CSS 样式：勾勒组件的外观

/* 方框样式 */
.checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* 选中状态 */
.checkbox--checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* 悬停效果 */
.checkbox:hover {
  border-color: #007bff;
}

/* 复选标记 */
.checkbox-checkmark {
  width: 10px;
  height: 10px;
  background-color: white;
  border: 1px solid #007bff;
  border-radius: 2px;
}

JavaScript 逻辑：赋予组件生命

import React, { useState } from "react";

const Checkbox = ({ value, onChange }) => {
  const [checked, setChecked] = useState(false);

  const handleChange = () => {
    setChecked(!checked);
    onChange(!checked);
  };

  return (
    <div className="checkbox" onClick={handleChange}>
      {checked && <div className="checkbox-checkmark"></div>}
    </div>
  );
};

export default Checkbox;