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

2024-04-28 20:28

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

Text

文本内容。

导入

import { Text } from '@ray-js/ray';

Props

属性类型默认值说明支持平台
classNamestring样式名涂鸦、微信
selectablebooleanfalse文本是否可选涂鸦、微信
onClick(e: { type: 'click' }) => voidfalse点击事件涂鸦、微信

示例代码

基本使用
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

属性类型默认值说明支持平台
typestring图标类型,类型名 请查看上方示例中 iconfont 的 font class 名涂鸦、微信、RN、Web
sizenumber16图标大小,单位 px涂鸦、微信、RN、Web
colorstring#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 介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/944184

相关文章

zookeeper端口说明及介绍

《zookeeper端口说明及介绍》:本文主要介绍zookeeper端口说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、zookeeper有三个端口(可以修改)aVNMqvZ二、3个端口的作用三、部署时注意总China编程结一、zookeeper有三个端口(可以

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

Python中win32包的安装及常见用途介绍

《Python中win32包的安装及常见用途介绍》在Windows环境下,PythonWin32模块通常随Python安装包一起安装,:本文主要介绍Python中win32包的安装及常见用途的相关... 目录前言主要组件安装方法常见用途1. 操作Windows注册表2. 操作Windows服务3. 窗口操作

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分