@aligov/feed-back

反馈条，常用于表单中，反馈具体某项的表单填写错误

Usage no npm install needed!

<script type="module">
  import aligovFeedBack from 'https://cdn.skypack.dev/@aligov/feed-back';
</script>

README

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