Ura Components 简介

Ura Components 是一套构建星光麒麟操作系统界面的组件式 UI 框架，可支撑开发者高效地构建跨端应用的 UI 界面。

拉取代码

git clone https://gitee.com/openkylin/ura-components.git

解决需求

1. 代码复用，提升界面开发效率，支撑系统 UI 的设计落地；
2. 跨端运行，提供响应式 UI 解决方案，做到一次开发多端部署；
3. 开发生态，为以后的开发者在星光麒麟上开发应用提供方法和工具；

自研原因

1. 普通的 UI 组件内聚程度较低、组合灵活度低。
2. 与操作系统功能深度融合，提供面向系统功能的组件支持；
3. 跨设备响应式解决方案，兼容多个平台（手机、平板、腕表、PC 等）上的 UI 表现。

架构概述

┌─────────────────────────────────────────────────────────────────────────┐
│            ┌─────────┐ ┌─────────────────────────────────┐ ┌──────────┐ │
│            │         │ │          ┌─────────┐ ┌─────────┐│ │          │ │
│            │  Actor  │ │Composite │  Actor  │ │  Actor  ││ │          │ │
│            │Component│ │Component │Component│ │Component││ │          │ │
│            │         │ │          └─────────┘ └─────────┘│ │          │ │
│            └─────────┘ └─────────────────────────────────┘ │Functional│ │
│            ┌─────────┐ ┌─────────────────────────────────┐ │Component │ │
│            │         │ │          ┌─────────┐ ┌─────────┐│ │          │ │
│            │  Actor  │ │Composite │Composite│ │  Actor  ││ │          │ │
│     Ura    │Component│ │Component │Component│ │Component││ │          │ │
│ Components │         │ │          └─────────┘ └─────────┘│ │          │ │
│            └─────────┘ └─────────────────────────────────┘ └──────────┘ │
│            ┌──────────────────────────────────────────────────────────┐ │
│            │         ┌─────────┐ ┌──────┐ ┌──────┐ ┌────────────────┐ │ │
│            │         │ Gesture │ │ Blur │ │ L10n │ │ Press Feedback │ │ │
│            │  Base   └─────────┘ └──────┘ └──────┘ └────────────────┘ │ │
│            │ Element ┌──────────┐ ┌─────────────────┐ ┌─────────────┐ │ │
│            │         │ Darkmode │ │ Adaptive Layout │ │ ...         │ │ │
│            │         └──────────┘ └─────────────────┘ └─────────────┘ │ │
│            └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│            ┌─────────────────┐ ┌────────────┐ ┌────────────┐ ┌────────┐ │
│ LitElement │ ReactiveElement │ │ Decorators │ │ Directives │ │ ...    │ │
│            └─────────────────┘ └────────────┘ └────────────┘ └────────┘ │
└─────────────────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────────────────┐
│      Web       ┌────────────┐ ┌───────────────┐ ┌─────────────────────┐ │
│   Component    │ Shadow DOM │ │ HTML Template │ │ HTML Custom Element │ │
│ Specification  └────────────┘ └───────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘

支持功能包括

• 深色模式
• 图标字体
• 国际化
• 按压反馈
• 复杂手势交互
• 侵入性样式修改

组件分类

目前分为三类组件：

• 原子组件
  • 特点：可独立执行、单一功能
  • 如：按钮、单选框、复选框、开关等
• 复合组件
  • 特点：由原子组件及由原子组件组成的复合组件之间的组合或嵌套
  • 如：组、行、块、窗等
• 功能卡片组件
  • 特点：结合系统硬件能力和接口，实现某一块功能
  • 如：解锁卡片、电池卡片、音乐卡片等