智能小程序 Ray 开发实践——基础内容组件 Text 和 Icon 介绍

本文主要是介绍智能小程序 Ray 开发实践——基础内容组件 Text 和 Icon 介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 小程序开发。 

这篇关于智能小程序 Ray 开发实践——基础内容组件 Text 和 Icon 介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---