@aligov/feed-back

@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 });