openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity
ura-components/README.md

6.5 KiB
Raw Blame History

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  └────────────┘ └───────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────────────────────────┘

支持功能包括

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

组件分类

目前分为三类组件：

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