Ant Design中的Modal>Form底栏按钮设计指南

前端

2023-12-23 22:47:07

Ant Design中的Modal>Form是一个强大的组件，可用于在弹出窗口中创建表单。该组件提供了一系列选项来定制表单的外观和行为，包括底栏按钮。底栏按钮对于指导用户操作并提供明确的反馈至关重要。

按钮类型

Modal>Form底栏通常包括两个按钮：“确定”和“取消”。

“确定”按钮用于提交表单并执行所需的处理。
“取消”按钮用于关闭弹出窗口而不保存更改。

按钮布局

按钮的布局应清晰简洁。通常，按钮从左到右按以下顺序排列：

“取消”按钮
“确定”按钮

按钮功能

确定按钮：
- 当表单验证通过时，触发表单提交。
- 通常使用“提交”、“保存”或“创建”等标签。
- 可以通过提供onOk属性来指定提交处理函数。
取消按钮：
- 关闭弹出窗口，不会保存任何更改。
- 通常使用“取消”、“关闭”或“退出”等标签。
- 无需提供任何附加属性。

最佳实践

保持按钮标签简洁明了，避免使用模糊或令人困惑的语言。
根据按钮的功能使用适当的标签和颜色。例如，“确定”按钮通常使用绿色，“取消”按钮使用灰色。
确保按钮具有足够的间距，以便轻松点击。
在禁用按钮时提供视觉指示，例如使用较浅的颜色或添加禁用图标。
考虑在“确定”按钮上添加加载指示器，以指示正在进行处理。

示例代码

以下示例代码展示了一个带有“确定”和“取消”按钮的Modal>Form：

import { Modal, Form, Button, Input } from 'antd';

const MyModal = () => {
  const [form] = Form.useForm();

  const onOk = () => {
    // 提交表单处理逻辑
  };

  return (
    <Modal title="Modal Title">
      <Form form={form} onFinish={onOk}>
        <Form.Item label="Input Label" name="input">
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">确定</Button>
          <Button type="default" onClick={() => { /* 关闭弹出窗口处理逻辑 */ }}>取消</Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default MyModal;