Feedback 反馈

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

用户在进行操作行为后（例如：输入、提交），系统对该操作行为内容作出的判断和校验反馈。

• 成功：用户操作已成功。例如：宝贝发布成功。

• 提示：需要用户知道采取行动的事件。例如：宝贝即将过期。

• 错误：用户操作已失效或是需要马上采取行动的问题。例如：宝贝已经失效，提交失败。

API

反馈

代码示例

反馈外观

反馈组件通过设置shape为inline、addon、toast，可分别创建有背景，无背景以及弹出的反馈组件，shape默认值为inline。

查看源码在线预览

import { Feedback, Select } from "@icedesign/base";
const Option = Select.Option;
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shape: "inline"
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(shape) {
    this.setState({ shape });
  }
  render() {
    const { shape } = this.state;
    let types;
    if (shape === "toast") {
      types = ["success", "prompt", "error", "help", "loading"];
    } else {
      types = ["success", "prompt", "error"];
    }
    return (
      <div className="feedback-shape-demo">
        <span className="demo-label">请选择Shape：</span>
        <Select defaultValue="inline" onChange={this.handleSelect}>
          <Option value="inline">Inline</Option>
          <Option value="addon">Addon</Option>
          <Option value="toast">Toast</Option>
        </Select>
        {types.map(type => (
          <Feedback key={type} title="title" type={type} shape={shape}>
            Content Content Content Content
          </Feedback>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.feedback-shape-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
}
.feedback-shape-demo .next-feedback {
    margin-top: 10px;
}
.feedback-shape-demo .next-feedback.next-feedback-toast {
    position: relative !important;
}

反馈尺寸

反馈组件通过设置size为medium、large，可以分别创建中等尺寸以及大尺寸的反馈组件。

查看源码在线预览

import { Feedback, Select } from "@icedesign/base";
const Option = Select.Option;
const types = ["success", "prompt", "error"];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      size: "medium"
    };
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(size) {
    this.setState({ size });
  }
  render() {
    const { size } = this.state;
    return (
      <div className="feedback-size-demo">
        <span className="demo-label">请选择Size：</span>
        <Select defaultValue="medium" onChange={this.handleSelect}>
          <Option value="medium">Medium</Option>
          <Option value="large">Large</Option>
        </Select>
        {types.map(type => (
          <Feedback key={type} title="title" type={type} size={size}>
            Content Content Content Content
          </Feedback>
        ))}
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

.feedback-size-demo .demo-label {
    display: inline-block;
    vertical-align: top;
    height: 28px;
    line-height: 28px;
}
.feedback-size-demo .next-feedback {
    margin-top: 10px;
}

弹窗便捷方法

可以通过Feedback.toast.success、Feedback.toast.prompt、Feedback.toast.error方法来方便的显示指定类型的反馈弹窗。

查看源码在线预览

import { Feedback, Button } from "@icedesign/base";
const Toast = Feedback.toast;
const showSuccess = () => Toast.success("success 快捷调用");
const showPrompt = () => Toast.prompt("prompt 快捷调用");
const showError = () => Toast.error("error 快捷调用");
const showHelp = () => Toast.help("help 快捷调用");
const showLoading = () => Toast.loading("loading 快捷调用");
ReactDOM.render(
  <div className="feedback-toast-quick-demo">
    <Button onClick={showSuccess}>success 快捷调用</Button>
    <Button onClick={showPrompt}>prompt 快捷调用</Button>
    <Button onClick={showError}>error 快捷调用</Button>
    <Button onClick={showHelp}>help 快捷调用</Button>
    <Button onClick={showLoading}>loading 快捷调用</Button>
  </div>,
  mountNode
);

.feedback-toast-quick-demo .next-btn.next-btn-medium {
    margin-right: 10px;
    margin-bottom: 10px;
}

弹窗用法

可以通过Feedback.toast.show和Feedback.toast.hide方法来方便的显示或隐藏反馈弹窗。

查看源码在线预览

import { Feedback, Button } from "@icedesign/base";
const Toast = Feedback.toast;
const show = () => {
  Toast.show({
    type: "loading",
    content: "将在3秒后关闭或手动点击关闭按钮",
    afterClose: () => console.log("Closed the toast")
  });
};
const hide = () => Toast.hide();
ReactDOM.render(
  <div className="feedback-toast-demo">
    <Button onClick={show}>显示</Button>
    <Button onClick={hide}>关闭</Button>
  </div>,
  mountNode
);

.feedback-toast-demo .next-btn.next-btn-medium {
    margin-right: 10px;
}

反馈类型

反馈组件通过设置type为success、prompt、error、help、loading，可分别创建类型为成功、提示、错误、帮助以及加载中的反馈组件，type默认值为success。

查看源码在线预览

import { Feedback } from "@icedesign/base";
ReactDOM.render(
  <div className="feedback-type-demo">
    <Feedback title="title">Content Content Content Content</Feedback>
    <Feedback title="title" type="prompt">
      Content Content Content Content
    </Feedback>
    <Feedback title="title" type="error">
      Content Content Content Content
    </Feedback>
  </div>,
  mountNode
);

.feedback-type-demo .next-feedback {
    margin-bottom: 10px;
}

相关区块

暂无相关区块