82 lines
6.5 KiB
Markdown
82 lines
6.5 KiB
Markdown
# Ura Components 简介
|
||
|
||
Ura Components 是一套构建星光麒麟操作系统界面的组件式 UI 框架，可支撑开发者高效地构建跨端应用的 UI 界面。
|
||
|
||
## 拉取代码
|
||
|
||
```sh
|
||
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 └────────────┘ └───────────────┘ └─────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 支持功能包括
|
||
|
||
- 深色模式
|
||
- 图标字体
|
||
- 国际化
|
||
- 按压反馈
|
||
- 复杂手势交互
|
||
- 侵入性样式修改
|
||
|
||
## 组件分类
|
||
|
||
目前分为三类组件：
|
||
|
||
- 原子组件
|
||
- 特点：可独立执行、单一功能
|
||
- 如：按钮、单选框、复选框、开关等
|
||
- 复合组件
|
||
- 特点：由原子组件及由原子组件组成的复合组件之间的组合或嵌套
|
||
- 如：组、行、块、窗等
|
||
- 功能卡片组件
|
||
- 特点：结合系统硬件能力和接口，实现某一块功能
|
||
- 如：解锁卡片、电池卡片、音乐卡片等
|