@aligov/feed-back

Install

$ npm install @aligov/feed-back --save

Usage

import FeedBack from '@aligov/feed-back';

API

Props

| name | type | default | describe | | :------- | :---------- | :------ | :------------------------------------------------------------------------------------------------------- | | type | String | 'info' | 反馈条类型,可选值: info、success、error、warning | | text | String | '' | 反馈条的文案。适用于纯文本格式，如遇到比较复杂的反馈条，比如说左边文字+右边图片的，请选用下面的 children | | showIcon | Boolean | true | 是否显示 icon | | children | Rax Element | '' | 自定义反馈条里面的内容，优先级高于 text 属性 |

Function

| name | param | return | describe | | :------ | :----- | :----- | :----------------- | | onClick | 自定义 | void | 点击反馈条触发回调 |

Example

基本用法

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import FeedBack from '@aligov/feed-back';
import View from "rax-view";

render(<View>
    <MyComponent
      type="success"
      text="成功状态提醒"
      onClick={() => {
        alert("success");
      }}
    />
    <MyComponent
      type="error"
      text="已过号，如需帮助请联系大厅工作人员，谢谢！"
    />
    <MyComponent type="warning" text="异常信息提醒" />
    <MyComponent text="请完善信息，方便您在办事过程中获得更好的体验,请完善信息，方便您在办事过程中获得更好的体验" />
  </View>, document.body, { driver: DriverUniversal });

自定义反馈条

import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import FeedBack from '@aligov/feed-back';
import View from "rax-view";

const viewStyle = {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    fontSize: "28rpx",
    color: "#ffffff",
};

render(
    <MyComponent showIcon={false}>
      <View
        style={viewStyle}
      >
        <Text>窗口当前排队</Text>
        <Text style={{ fontWeight: "600" }}>3</Text>
        <Text>人</Text>
      </View>
    </MyComponent>, document.body, { driver: DriverUniversal });