跳到主要内容

SiiUI 组件库

提示

版本要求：SiiUI 语法从 v1.1.0 开始支持

SiiUI 是 Sii 语言内置的声明式 UI 组件库，提供了丰富的预置组件，让您能够快速构建现代化的 Web 界面。

核心特性​

声明式语法​

使用简洁的组件语法构建界面，支持链式属性调用和嵌套结构：

@Component
struct MyApp {
  @BuilderUI {
    Col()
      .gap(24)
      .padding(16)
      .backgroundColor("#f5f5f5")
    {
      Text("欢迎使用 SiiUI")
        .fontSize(h1)
        .color("#333")
        .fontWeight(bold)
      
      Button("开始使用")
        .backgroundColor("#007bff")
        .color("white")
        .padding(12)
        .borderRadius(8)
    }
  }
}

丰富的组件生态​

提供 200+ 预置组件，涵盖：

  • 布局组件：Row、Col、Flex、Grid 等
  • 文本组件：Text、Code、Markdown 等
  • 表单组件：TextInput、Select、Checkbox 等
  • 数据展示：Table、List、Card、Chart 等
  • 反馈组件：Alert、Toast、Modal 等
  • 媒体组件：Image、Video、Audio 等
  • 动画组件：Fade、Slide、Scale 等

统一的属性系统​

所有组件都支持统一的属性系统：

// 布局属性
.width("100%")
.height("200px")
.margin(16)
.padding(24)

// 样式属性  
.backgroundColor("#ffffff")
.color("#333333")
.fontSize(h2)
.borderRadius(8)

// 交互属性
.onClick(handleClick)
.disabled(false)
.loading(true)

响应式设计​

内置响应式支持，轻松适配不同设备：

Responsive()
  .mobile({ width: "100%", padding: 16 })
  .tablet({ width: "80%", padding: 24 })
  .desktop({ width: "60%", padding: 32 })
{
  Card() {
    // 内容
  }
}

快速开始​

1. 创建 SiiUI 项目​

sii init-web my-siiui-app
cd my-siiui-app

2. 编写第一个组件​

@Component
struct HelloWorld {
  @BuilderUI {
    Col()
      .padding(32)
      .textAlign(center)
    {
      Text("Hello, SiiUI!")
        .fontSize(h1)
        .color("#007bff")
        .marginBottom(16)
      
      Button("点击我")
        .backgroundColor("#28a745")
        .color("white")
        .padding(12, 24)
        .borderRadius(6)
        .onClick(() => {
          print("按钮被点击了！");
        })
    }
  }
}

3. 运行项目​

sii run --web <project-name> --serve

详细说明：关于项目创建、构建和运行的完整命令说明，请查看 安装与 CLI 指南。

组件分类​

基础组件​

  • 布局：Row、Col、Stack、Flex、Grid
  • 文本：Text、Code、Pre、Markdown
  • 按钮：Button、IconButton、FloatingButton

表单组件​

  • 输入：TextInput、TextArea、Search
  • 选择：Select、Radio、Checkbox、Switch
  • 日期：DatePicker、TimePicker、DateTimePicker

数据展示​

  • 列表：List、ListItem、VirtualList
  • 表格：Table
  • 卡片：Card、CardHeader、CardBody、CardFooter
  • 图表：Chart、PieChart、BarChart、LineChart

反馈组件​

  • 提示：Alert、Toast、Snackbar、Tooltip
  • 弹窗：Modal、Dialog、Popover
  • 状态：Loading、Spinner、Empty、Error

媒体组件​

  • 图片：Image、Avatar、Gallery、Carousel
  • 视频：Video、Audio、Player

动画组件​

  • 过渡：Fade、Slide、Scale、Rotate
  • 高级：Animate、Transition、Keyframe、Spring

设计原则​

1. 一致性​

所有组件遵循统一的设计语言和 API 规范

2. 可组合性​

组件可以自由组合和嵌套，构建复杂的界面

3. 可扩展性​

支持自定义样式和属性，满足个性化需求

4. 性能优化​

内置虚拟化、懒加载等性能优化机制