1.0.2 • Published 5 years ago
@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 });