YanYuCloud UI组件展示

立体按钮

按钮变体

按钮尺寸

带图标按钮

动画效果

加载状态

圆角变体

立体卡片

默认卡片

这是一个默认样式的卡片组件，适用于展示一般内容。

浮起卡片

这是一个浮起样式的卡片，悬停时会有轻微上浮效果。

漂浮卡片

这是一个漂浮样式的卡片，悬停时会有明显上浮效果。

扁平卡片

这是一个扁平样式的卡片，没有明显的阴影效果。

渐变卡片

这是一个渐变背景的卡片，适用于强调重要内容。

3D卡片

这是一个3D效果的卡片，有明显的立体感。

卡片动画效果

漂浮动画

悬停时会有上下漂浮的动画效果。

缩放动画

悬停时会有轻微放大的动画效果。

旋转动画

悬停时会有轻微旋转的动画效果。

弹跳动画

悬停时会有弹跳的动画效果。

交互式卡片

AI诊断

使用人工智能辅助医疗诊断

基于深度学习的医学影像分析和自然语言处理技术。

健康监测

实时监测患者生命体征

支持心率、血压、血氧等多项指标的连续监测。

预约管理

管理医生和患者的预约

智能排班系统，自动匹配最佳预约时间。

医生咨询

药物管理

病历查看

健康报告

增强表单

密码长度至少为8位，包含字母和数字

动态加载

数据加载中...

请稍候...

响应式表格

ID
姓名
年龄
科室
状态
1张三32内科在线
2李四45外科离线
3王五28儿科在线

页面过渡动画

页面过渡动画类型

  • 淡入淡出 (fade)
  • 向上滑入 (slide-up)
  • 向下滑入 (slide-down)
  • 向左滑入 (slide-left)
  • 向右滑入 (slide-right)
  • 缩放 (scale)
  • 旋转 (rotate)

使用方法

将页面内容包裹在 PageTransition 组件中，并指定动画类型和持续时间：

<PageTransition animation="slide-up" duration={0.5}>
  <YourPageContent />
</PageTransition>