Text
文本内容。
导入
import { Text } from '@ray-js/ray';Props
| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
|---|---|---|---|---|
| className | string | 样式名 | 涂鸦、微信 | |
| selectable | boolean | false | 文本是否可选 | 涂鸦、微信 |
| onClick | (e: { type: 'click' }) => void | false | 点击事件 | 涂鸦、微信 |
示例代码
基本使用
import React from 'react';import { Text } from '@ray-js/components';export default function Demo() {return (<Text style={{ fontSize: 40, color: 'darkcyan' }}>遵循 React DSL 语法</Text>);
}
Icon
图标。
导入
import { Icon } from '@ray-js/ray';效果
👉 点击免费领取 Iocn 文件
Props
| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
|---|---|---|---|---|
| type | string | 图标类型，类型名 请查看上方示例中 iconfont 的 font class 名 | 涂鸦、微信、RN、Web | |
| size | number | 16 | 图标大小，单位 px | 涂鸦、微信、RN、Web |
| color | string | #333333 | 图标颜色 | 涂鸦、微信、RN、Web |
示例代码
基本使用
import React from 'react';
import { Icon, View } from '@ray-js/components';export default function () {return (<React.Fragment><View style={{ flexDirection: 'row' }}><Icon type="icon-right" size={30} color="#007aff"></Icon><Icon type="icon-warning" size={30} color="#007aff"></Icon><Icon type="icon-a-cloudrainfill" size={30} color="#007aff"></Icon><Icon type="icon-a-cloudsleetfill" size={30} color="#007aff"></Icon></View></React.Fragment>);
}👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。
