(chore) add README and modify little ui, syntax
This commit is contained in:
wangchangqi
parent
abc2a89422
commit
caad82e774
|
|
@ -0,0 +1 @@
|
|||
Checkbox 复选框
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# 主屏容器
|
||||
|
||||
大致层级结构
|
||||
|
||||
```
|
||||
父容器
|
||||
|-子容器1(6x4|4x6格子)
|
||||
|-子容器2(6x4|4x6格子)
|
||||
| |-图标容器
|
||||
| |-组件容器(1x1)
|
||||
| |-文件夹容器
|
||||
| |打开
|
||||
| 子容器3(4x4格子)
|
||||
| |-图标容器
|
||||
|-页面指示器
|
||||
|-Dock容器
|
||||
|-图标容器
|
||||
```
|
||||
|
|
@ -0,0 +1 @@
|
|||
# 页脚-Footer
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
# 表单-form
|
||||
|
||||
参考：iPhone-VPN-添加配置
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# 抓握指示器-Grabber
|
||||
|
||||
下分：
|
||||
- Multitasking Indicator (多任务指示器)(TODO)
|
||||
- App Divider (App分割条)(TODO)
|
||||
- Resizable Indicator (可调指示器)
|
||||
- Home Indicator (主屏指示器)
|
||||
|
|
@ -0,0 +1 @@
|
|||
# 九宫格-Grid
|
||||
|
|
@ -0,0 +1 @@
|
|||
# 标题栏-header
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# 指示器-indicator
|
||||
|
||||
## indicator-page-point 页面圆点指示器
|
||||
|
||||
用于指示页面所在位置
|
||||
|
|
@ -81,7 +81,7 @@ export class IndicatorPagePoint extends LitElement {
|
|||
static styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
:host([column]) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
# 输入框-Input
|
||||
|
||||
工作职责：
|
||||
- 输入信息
|
||||
|
||||
## 特点
|
||||
|
||||
拥有设置焦点的可配置属性，如进到一个页面立即聚焦于该input，弹起输入法
|
||||
删除图标在 input 中文字为空时应不显示
|
||||
input应拥有可配置的默认值(对于一些总要类型，需强制配置)
|
||||
|
||||
## 类型包括
|
||||
|
||||
- input输入|删除图标
|
||||
|
||||
## 特殊说明
|
||||
|
|
@ -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-控制中心
|
||||
|
|
@ -16,7 +16,7 @@ export enum LiType {
|
|||
|
||||
@customElement('star-li')
|
||||
export class StarLi extends LitElement {
|
||||
@property({type: LiType}) type = ''
|
||||
@property({type: String}) type = ''
|
||||
@property({type: String}) label = ''
|
||||
@property({type: String}) value = ''
|
||||
@property({type: String}) default = ''
|
||||
|
|
@ -289,9 +289,10 @@ export class StarLi extends LitElement {
|
|||
--li-right-padding
|
||||
); /* right-arrow须与最右侧文字对齐 */
|
||||
}
|
||||
li.hashref {
|
||||
/* padding-inline-end: 0; */ /* right-arrow须与最右侧文字对齐 */
|
||||
}
|
||||
/* right-arrow须与最右侧文字对齐 */
|
||||
/* li.hashref {
|
||||
padding-inline-end: 0;
|
||||
} */
|
||||
a {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
# 全局overlay
|
||||
|
||||
## 类型包括：
|
||||
|
||||
- 置于底部的overlay，内可填充ul
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# 分段控件-Segment Controls
|
||||
|
||||
如：iPhone-排行榜
|
||||
|
||||
付费|免费|畅销排行
|
||||
|
||||
过去24小时|过去4天
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
# 选择
|
||||
|
||||
如: iPhone-通用-键盘-听写语言
|
||||
|
||||
## 特点
|
||||
|
||||
- 支持多选
|
||||
- 强制多选类型`的情况下，选择只有一个时，将其置灰
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
# 滑块-Slider
|
||||
|
||||
工作职责：
|
||||
- 滑块空间
|
||||
|
||||
说明：
|
||||
- | 用途：分割位置
|
||||
|
||||
|
||||
类型包括：
|
||||
|
||||
- 左侧图标|滑块|右侧图标
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
# 步进器-Stepper
|
||||
|
||||
如：iPhone-设置-辅助功能-旁白-盲文-自动前进速度
|
||||
|
||||
## 说明：
|
||||
|
||||
- | 用途：区分方位
|
||||
|
||||
## 类型包括
|
||||
|
||||
- 数字|单位|加减步进器
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
# 块-无序列表-Unordered List
|
||||
|
||||
工作职责：
|
||||
- `顺序罗列``有限种`内容填充
|
||||
|
||||
说明：
|
||||
- | 用途：分割上下
|
||||
- TabBar 用于切换内容栏
|
||||
|
||||
类型包括：
|
||||
|
||||
- 分段控件|行
|
||||
- 左侧行|右侧行
|
||||
- 自由填充的内容<slot/>
|
||||
|
||||
## 特殊说明
|
||||
|
||||
### 左侧行|右侧行
|
||||
|
||||
用于突出对等显示的信息
|
||||
|
|
@ -11,7 +11,7 @@ export enum UlType {
|
|||
|
||||
@customElement('star-ul')
|
||||
export class StarUl extends LitElement {
|
||||
@property({type: UlType}) type = ''
|
||||
@property({type: String}) type = ''
|
||||
@property({type: String}) title = ''
|
||||
@property({type: String}) text = ''
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue