(chore) add README and modify little ui, syntax

This commit is contained in:
wangchangqi 2022-08-30 16:19:21 +08:00
parent abc2a89422
commit caad82e774
19 changed files with 218 additions and 6 deletions

View File

@ -0,0 +1 @@
Checkbox 复选框

View File

@ -0,0 +1,18 @@
# 主屏容器
大致层级结构
```
父容器
|-子容器1(6x4|4x6格子)
|-子容器2(6x4|4x6格子)
| |-图标容器
| |-组件容器(1x1)
| |-文件夹容器
| |打开
| 子容器3(4x4格子)
| |-图标容器
|-页面指示器
|-Dock容器
|-图标容器
```

View File

@ -0,0 +1 @@
# 页脚-Footer

View File

@ -0,0 +1,3 @@
# 表单-form
参考iPhone-VPN-添加配置

View File

@ -0,0 +1,7 @@
# 抓握指示器-Grabber
下分:
- Multitasking Indicator (多任务指示器)(TODO)
- App Divider (App分割条)(TODO)
- Resizable Indicator (可调指示器)
- Home Indicator (主屏指示器)

View File

@ -0,0 +1 @@
# 九宫格-Grid

View File

@ -0,0 +1 @@
# 标题栏-header

View File

@ -0,0 +1,5 @@
# 指示器-indicator
## indicator-page-point 页面圆点指示器
用于指示页面所在位置

View File

@ -81,7 +81,7 @@ export class IndicatorPagePoint extends LitElement {
static styles = css` static styles = css`
:host { :host {
display: flex; display: flex;
width: 100vw; width: 100%;
margin: auto; margin: auto;
} }
:host([column]) { :host([column]) {

View File

@ -0,0 +1,16 @@
# 输入框-Input
工作职责:
- 输入信息
## 特点
拥有设置焦点的可配置属性如进到一个页面立即聚焦于该input弹起输入法
删除图标在 input 中文字为空时应不显示
input应拥有可配置的默认值(对于一些总要类型,需强制配置)
## 类型包括
- input输入|删除图标
## 特殊说明

View File

@ -0,0 +1,95 @@
# 行-Line
工作职责:
- `组合排列``有限种`内容填充物
## 特点
行宽 - 100%填充父容器给的宽
行高 - 存在一个min-height实际行高由行内填充物决定
行中独立嵌套其他内容时,使用 slot
## 说明:
- | 用途:偏左侧 | 偏右侧
- () 用途:可选内容
- 主文字在上,辅助文字在下
- 主文字,通常包含:
- 左侧可选:重点强调内容
- 辅助信息,通常类型:
- 纯文本
- SVG+纯文本
- 左侧占位,通常包括:
- 勾选类型图标
- 空白占位
- 删减意义图标
- 增加意义图标
- 右侧占位,通常包括:
- 勾选类型图标
- 增加意义图标
- 抓取用于排序的图标
- 右侧图标,通常包括:
- 下一级图标
- 勾选类型图标
- Loading图标
- 云下载图标
- 图标组中的单个图标或多个图标
- 图标组加密锁图标、wifi信号强度图标、其他状态图标
- 选择器,通常包括:
- 时间选择器
- 日期选择器
- 状态信息
- (可选)数组,点击时切换
- 滑块控件
- 音量滑块
- 亮度滑块
- 色温滑块
- 文字大小滑块
- 旁白语速滑块
- 音调滑块
## 类型包括:
- 行选择器
- 行按钮(偏左|居中,普通类型蓝色|警告类型红色)
- 一排复选框
- 滑块控件
- 步进器控件
- input输入
- 纯文字
- 组合的SVG
- (左侧占位) 主文字(辅助信息) | (右侧图标)
- (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
- (左侧占位) (图标) 主文字(辅助信息) | 开关 (右侧图标)
- (左侧占位) (图标) 主文字(辅助信息) | 状态信息 (右侧图标)
- (左侧占位) (图标) 主文字(辅助信息) | 选择器
- (大图标) 主文字(辅助信息) | (按钮)
## 特殊说明
### 纯文字
iPhone-通用-关于本机-SEID
### 组合的SVG
iPhone-通用-iPhone储存空间
### 一排复选框
iPhone-通知-任意应用内-提醒
iPhone-设置-显示与亮度-外观
### 行选择器
动态的如iPhone-勿扰模式-允许的通知
静态的如iPhone-勿扰模式-时间段内的重复(日、一、二、三、四、五、六)
### (大图标) 主文字(辅助信息) | 按钮
iPhone-通用-关于本机-支持范围-Apple支持
iPhone-通用-iPhone储存空间-任意应用内
### (左侧占位) (图标) 主文字(辅助信息) | (右侧占位)
iPhone-控制中心

View File

@ -16,7 +16,7 @@ export enum LiType {
@customElement('star-li') @customElement('star-li')
export class StarLi extends LitElement { export class StarLi extends LitElement {
@property({type: LiType}) type = '' @property({type: String}) type = ''
@property({type: String}) label = '' @property({type: String}) label = ''
@property({type: String}) value = '' @property({type: String}) value = ''
@property({type: String}) default = '' @property({type: String}) default = ''
@ -289,9 +289,10 @@ export class StarLi extends LitElement {
--li-right-padding --li-right-padding
); /* right-arrow须与最右侧文字对齐 */ ); /* right-arrow须与最右侧文字对齐 */
} }
li.hashref { /* right-arrow须与最右侧文字对齐 */
/* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */ /* li.hashref {
} padding-inline-end: 0;
} */
a { a {
display: flex; display: flex;
text-decoration: none; text-decoration: none;

View File

@ -0,0 +1,5 @@
# 全局overlay
## 类型包括:
- 置于底部的overlay内可填充ul

View File

@ -0,0 +1,7 @@
# 分段控件-Segment Controls
iPhone-排行榜
付费|免费|畅销排行
过去24小时|过去4天

View File

@ -0,0 +1,8 @@
# 选择
如: iPhone-通用-键盘-听写语言
## 特点
- 支持多选
- 强制多选类型`的情况下,选择只有一个时,将其置灰

View File

@ -0,0 +1,12 @@
# 滑块-Slider
工作职责:
- 滑块空间
说明:
- | 用途:分割位置
类型包括:
- 左侧图标|滑块|右侧图标

View File

@ -0,0 +1,11 @@
# 步进器-Stepper
iPhone-设置-辅助功能-旁白-盲文-自动前进速度
## 说明:
- | 用途:区分方位
## 类型包括
- 数字|单位|加减步进器

View File

@ -0,0 +1,20 @@
# 块-无序列表-Unordered List
工作职责:
- `顺序罗列``有限种`内容填充
说明:
- | 用途:分割上下
- TabBar 用于切换内容栏
类型包括:
- 分段控件|行
- 左侧行|右侧行
- 自由填充的内容<slot/>
## 特殊说明
### 左侧行|右侧行
用于突出对等显示的信息

View File

@ -11,7 +11,7 @@ export enum UlType {
@customElement('star-ul') @customElement('star-ul')
export class StarUl extends LitElement { export class StarUl extends LitElement {
@property({type: UlType}) type = '' @property({type: String}) type = ''
@property({type: String}) title = '' @property({type: String}) title = ''
@property({type: String}) text = '' @property({type: String}) text = ''