(chore) add README and modify little ui, syntax
This commit is contained in:
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`
|
static styles = css`
|
||||||
:host {
|
:host {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
:host([column]) {
|
: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')
|
@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;
|
||||||
|
|
|
@ -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')
|
@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 = ''
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue