@neatui/css 3.5.1 → 3.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +284 -0
- package/core/border.scss +2 -2
- package/core/scroll.scss +1 -16
- package/core/size.scss +3 -2
- package/core/trim.scss +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,287 @@
|
|
|
1
1
|
# @neatui/css
|
|
2
2
|
|
|
3
3
|
[http://neatui.fekit.cn](http://neatui.fekit.cn)
|
|
4
|
+
|
|
5
|
+
@neatui/css 是一个现代化的原子样式库，提供了丰富的预定义样式类，帮助开发者快速构建界面。
|
|
6
|
+
|
|
7
|
+
## 特性
|
|
8
|
+
|
|
9
|
+
- 🎨 主题系统：支持自定义主题色卡，内置智能色彩系统
|
|
10
|
+
- 📱 响应式：内置响应式设计支持
|
|
11
|
+
- 🎯 原子化：提供大量可复用的原子类
|
|
12
|
+
- 🔧 可定制：支持 SCSS 变量覆盖和扩展
|
|
13
|
+
- 📦 组件化：提供常用 UI 组件样式
|
|
14
|
+
|
|
15
|
+
## 核心模块
|
|
16
|
+
|
|
17
|
+
### 1. 基础样式 (basic)
|
|
18
|
+
|
|
19
|
+
提供了最基础的原子类：
|
|
20
|
+
|
|
21
|
+
- 尺寸控制：
|
|
22
|
+
|
|
23
|
+
- `.full`, `.full-x`, `.full-y`: 100% 宽度/高度
|
|
24
|
+
- `.min-full`, `.min-full-x`, `.min-full-y`: 最小宽度/高度 100%
|
|
25
|
+
- `.max-full`, `.max-full-x`, `.max-full-y`: 最大宽度/高度 100%
|
|
26
|
+
|
|
27
|
+
- 文本对齐：
|
|
28
|
+
|
|
29
|
+
- `.ac`: 居中对齐
|
|
30
|
+
- `.al`: 左对齐
|
|
31
|
+
- `.ar`: 右对齐
|
|
32
|
+
- `.aj`: 两端对齐
|
|
33
|
+
|
|
34
|
+
- 垂直对齐：
|
|
35
|
+
|
|
36
|
+
- `.vt`: 顶部对齐
|
|
37
|
+
- `.vm`: 中部对齐
|
|
38
|
+
- `.vb`: 底部对齐
|
|
39
|
+
- `.avc`: 水平垂直居中
|
|
40
|
+
|
|
41
|
+
- 定位：
|
|
42
|
+
|
|
43
|
+
- `.pr`: 相对定位
|
|
44
|
+
- `.pa`: 绝对定位
|
|
45
|
+
- `.pf`: 固定定位
|
|
46
|
+
- `.ps`: 粘性定位
|
|
47
|
+
|
|
48
|
+
- 浮动：
|
|
49
|
+
|
|
50
|
+
- `.fl`: 左浮动
|
|
51
|
+
- `.fr`: 右浮动
|
|
52
|
+
- `.fn`: 无浮动
|
|
53
|
+
- `.cb`: 清除浮动
|
|
54
|
+
|
|
55
|
+
- 字重：
|
|
56
|
+
- `.fw1` ~ `.fw9`: 字重 100-900
|
|
57
|
+
- `.fw0`: 正常字重
|
|
58
|
+
- `.fw-none`: 无字重
|
|
59
|
+
- `.fw-auto`: 自动字重
|
|
60
|
+
|
|
61
|
+
### 2. 字号系统 (size)
|
|
62
|
+
|
|
63
|
+
- 全局字号：
|
|
64
|
+
|
|
65
|
+
- `[size="xs"]` ~ `[size="xl"]`: 基础字号（从 xs 到 xl）
|
|
66
|
+
- `[ui-size="xs"]` ~ `[ui-size="xl"]`: UI 组件字号
|
|
67
|
+
|
|
68
|
+
- 分级字号：
|
|
69
|
+
|
|
70
|
+
- `.fs-xxs` ~ `.fs-xxl`: 字体大小（从极小到极大）
|
|
71
|
+
- `.fs-{size}+`: 增加字号（+0.05rem）
|
|
72
|
+
- `.fs-{size}*`: 双倍字号
|
|
73
|
+
- `.fs-{size}-sub`: 子元素字号
|
|
74
|
+
|
|
75
|
+
- 行高：
|
|
76
|
+
- `.lh-no`: 无行高
|
|
77
|
+
- `.lh-xs`: 1倍行高
|
|
78
|
+
- `.lh-ss`: 1.25倍行高
|
|
79
|
+
- `.lh-sm`: 1.5倍行高
|
|
80
|
+
- `.lh-ms`: 1.75倍行高
|
|
81
|
+
- `.lh-mm`: 2倍行高
|
|
82
|
+
- `.lh-ml`: 2.25倍行高
|
|
83
|
+
- `.lh-ls`: 2.5倍行高
|
|
84
|
+
- `.lh-lm`: 2.75倍行高
|
|
85
|
+
- `.lh-ll`: 3倍行高
|
|
86
|
+
- `.lh-xl`: 3.5倍行高
|
|
87
|
+
|
|
88
|
+
### 3. 弹性布局 (flex)
|
|
89
|
+
|
|
90
|
+
- 基础属性：
|
|
91
|
+
|
|
92
|
+
- `[ui-flex]`: 弹性布局容器
|
|
93
|
+
- `.flex-nowrap`: 不换行
|
|
94
|
+
- `.flex-wrap`: 换行
|
|
95
|
+
- `.flex-inline`: 行内弹性布局
|
|
96
|
+
|
|
97
|
+
- 弹性项：
|
|
98
|
+
|
|
99
|
+
- `.flex-fixed`: 固定尺寸
|
|
100
|
+
- `.flex-block`: 占满剩余空间
|
|
101
|
+
- `.flex-grow`: 仅增长
|
|
102
|
+
- `.flex-shrink`: 仅收缩
|
|
103
|
+
|
|
104
|
+
- 方向与对齐（使用 `[ui-flex~="..."]`）：
|
|
105
|
+
|
|
106
|
+
- 行布局：
|
|
107
|
+
|
|
108
|
+
- `row lt`: 左上对齐
|
|
109
|
+
- `row lm`: 左中对齐
|
|
110
|
+
- `row lb`: 左下对齐
|
|
111
|
+
- `row ct`: 居中上对齐
|
|
112
|
+
- `row cm`: 居中对齐
|
|
113
|
+
- `row cb`: 居中下对齐
|
|
114
|
+
- `row rt`: 右上对齐
|
|
115
|
+
- `row rm`: 右中对齐
|
|
116
|
+
- `row rb`: 右下对齐
|
|
117
|
+
- `row xt`: 两端上对齐
|
|
118
|
+
- `row xm`: 两端中对齐
|
|
119
|
+
- `row xb`: 两端下对齐
|
|
120
|
+
|
|
121
|
+
- 列布局：
|
|
122
|
+
- `col lt`: 左上对齐
|
|
123
|
+
- `col lm`: 左中对齐
|
|
124
|
+
- `col lb`: 左下对齐
|
|
125
|
+
- 其他同行布局
|
|
126
|
+
|
|
127
|
+
### 4. 边框系统 (border)
|
|
128
|
+
|
|
129
|
+
- 边框样式：
|
|
130
|
+
|
|
131
|
+
- `.b-solid`: 实线边框
|
|
132
|
+
- `.b-dashed`: 虚线边框
|
|
133
|
+
- `.b-dotted`: 点线边框
|
|
134
|
+
|
|
135
|
+
- 边框宽度：
|
|
136
|
+
- 全边框：`.b-no` ~ `.b-xl`（0px ~ 1rem）
|
|
137
|
+
- 水平边框：`.bx-no` ~ `.bx-xl`
|
|
138
|
+
- 垂直边框：`.by-no` ~ `.by-xl`
|
|
139
|
+
- 顶部边框：`.bt-no` ~ `.bt-xl`
|
|
140
|
+
- 右侧边框：`.br-no` ~ `.br-xl`
|
|
141
|
+
- 底部边框：`.bb-no` ~ `.bb-xl`
|
|
142
|
+
- 左侧边框：`.bl-no` ~ `.bl-xl`
|
|
143
|
+
|
|
144
|
+
尺寸等级：
|
|
145
|
+
|
|
146
|
+
- `no`: 0px
|
|
147
|
+
- `xs`: 1px
|
|
148
|
+
- `ss`: 2px
|
|
149
|
+
- `sm`: 3px
|
|
150
|
+
- `sl`: 4px
|
|
151
|
+
- `ms`: 5px
|
|
152
|
+
- `mm`: 0.5rem
|
|
153
|
+
- `ml`: 0.6rem
|
|
154
|
+
- `ls`: 0.7rem
|
|
155
|
+
- `lm`: 0.8rem
|
|
156
|
+
- `ll`: 0.9rem
|
|
157
|
+
- `xl`: 1rem
|
|
158
|
+
|
|
159
|
+
### 5. 主题系统 (theme)
|
|
160
|
+
|
|
161
|
+
- 系统默认色卡：
|
|
162
|
+
|
|
163
|
+
- `--co-main`: 主色调 (#0889e4)
|
|
164
|
+
- `--co-text`: 文本色 (#000000)
|
|
165
|
+
- `--co-fore`: 前景色 (#ffffff)
|
|
166
|
+
- `--co-back`: 背景色 (#f5f5f5)
|
|
167
|
+
- `--co-link`: 链接色 (#d07950)
|
|
168
|
+
- `--co-code`: 代码色 (#e23861)
|
|
169
|
+
- `--co-well`: 成功色 (#4bbc73)
|
|
170
|
+
- `--co-warn`: 警告色 (#fb9a2a)
|
|
171
|
+
- `--co-risk`: 危险色 (#f95850)
|
|
172
|
+
- `--co-info`: 信息色 (#0889e4)
|
|
173
|
+
|
|
174
|
+
- 扩展色系：
|
|
175
|
+
|
|
176
|
+
- `--co-read`: 主要文本色 (85% 文本色)
|
|
177
|
+
- `--co-desc`: 描述文本色 (55% 文本色)
|
|
178
|
+
- `--co-note`: 注释文本色 (35% 文本色)
|
|
179
|
+
- `--co-case`: 案例文本色 (20% 文本色)
|
|
180
|
+
- `--co-line`: 线条色 (10% 文本色)
|
|
181
|
+
- `--co-weak`: 弱化色 (4% 文本色)
|
|
182
|
+
|
|
183
|
+
- 透明度变体：
|
|
184
|
+
每个颜色都支持以下透明度变体：
|
|
185
|
+
- `xs`, `ss`, `sm`, `sl`, `ms`, `mm`, `ml`, `ls`, `lm`, `ll`, `xl`
|
|
186
|
+
使用方式：`--co-{color}-{variant}`
|
|
187
|
+
|
|
188
|
+
### 6. 组件样式
|
|
189
|
+
|
|
190
|
+
每个组件都有其特定的样式类，以下是主要组件：
|
|
191
|
+
|
|
192
|
+
- 动画 (anim)：过渡和动画效果
|
|
193
|
+
- 按钮 (btns)：各种按钮样式
|
|
194
|
+
- 卡片 (card)：卡片容器样式
|
|
195
|
+
- 表单 (form)：表单元素样式
|
|
196
|
+
- 图标 (icon)：图标样式
|
|
197
|
+
- 图片 (imgs)：图片处理样式
|
|
198
|
+
- 分割线 (line)：分隔线样式
|
|
199
|
+
- 列表 (list)：列表样式
|
|
200
|
+
- 加载 (load)：加载动画
|
|
201
|
+
- 菜单 (menu)：菜单样式
|
|
202
|
+
- 导航 (navs)：导航样式
|
|
203
|
+
- 提示 (note)：提示文本样式
|
|
204
|
+
- 操作项 (opts)：操作按钮样式
|
|
205
|
+
- 路径 (path)：面包屑导航
|
|
206
|
+
- 侧边栏 (side)：侧边栏样式
|
|
207
|
+
- 步骤条 (steps)：步骤指示器
|
|
208
|
+
- 表格 (table)：表格样式
|
|
209
|
+
- 标签页 (tabs)：选项卡样式
|
|
210
|
+
- 标签 (tags)：标签样式
|
|
211
|
+
- 提示框 (tips)：提示框样式
|
|
212
|
+
- 标题 (title)：标题样式
|
|
213
|
+
|
|
214
|
+
## 使用方法
|
|
215
|
+
|
|
216
|
+
1. 安装依赖：
|
|
217
|
+
|
|
218
|
+
```bash
|
|
219
|
+
npm install @neatui/css
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
2. 引入样式：
|
|
223
|
+
|
|
224
|
+
```scss
|
|
225
|
+
// 全量引入
|
|
226
|
+
@import '@neatui/css/neatui.scss';
|
|
227
|
+
|
|
228
|
+
// 按需引入
|
|
229
|
+
@import '@neatui/css/core/basic.scss';
|
|
230
|
+
@import '@neatui/css/core/theme.scss';
|
|
231
|
+
// ... 其他需要的模块
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
3. 配置主题（可选）：
|
|
235
|
+
|
|
236
|
+
```scss
|
|
237
|
+
@use '@neatui/css/core/theme' with (
|
|
238
|
+
$theme: (
|
|
239
|
+
light: (
|
|
240
|
+
main: #0889e4,
|
|
241
|
+
text: #000000,
|
|
242
|
+
// ... 其他颜色配置
|
|
243
|
+
),
|
|
244
|
+
dark: (
|
|
245
|
+
main: #2196f3,
|
|
246
|
+
text: #ffffff,
|
|
247
|
+
// ... 其他颜色配置
|
|
248
|
+
)
|
|
249
|
+
)
|
|
250
|
+
);
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
## 响应式设计
|
|
254
|
+
|
|
255
|
+
所有样式类都支持响应式前缀：
|
|
256
|
+
|
|
257
|
+
- 默认：无前缀
|
|
258
|
+
- 平板：`pad:`
|
|
259
|
+
- 移动端：`mob:`
|
|
260
|
+
|
|
261
|
+
使用示例：
|
|
262
|
+
|
|
263
|
+
```html
|
|
264
|
+
<div class="flex-block pad:flex-fixed mob:flex-grow">
|
|
265
|
+
<!-- 在不同设备上有不同的弹性布局行为 -->
|
|
266
|
+
</div>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
## 最佳实践
|
|
270
|
+
|
|
271
|
+
1. 使用主题系统时，建议遵循 NeatUI 设计规范建立主题色卡
|
|
272
|
+
2. 优先使用预定义的原子类，避免重复编写样式
|
|
273
|
+
3. 合理使用响应式类，确保在不同设备上的最佳展现
|
|
274
|
+
4. 按需引入所需模块，减少不必要的代码体积
|
|
275
|
+
5. 使用语义化的组件类名，提高代码可维护性
|
|
276
|
+
|
|
277
|
+
## 贡献指南
|
|
278
|
+
|
|
279
|
+
欢迎提交 Issue 和 Pull Request 来帮助改进 @neatui/css。在提交之前，请确保：
|
|
280
|
+
|
|
281
|
+
1. 遵循项目的代码规范
|
|
282
|
+
2. 编写必要的文档和注释
|
|
283
|
+
3. 添加相应的测试用例
|
|
284
|
+
|
|
285
|
+
## 许可证
|
|
286
|
+
|
|
287
|
+
MIT License
|
package/core/border.scss
CHANGED
package/core/scroll.scss
CHANGED
|
@@ -5,9 +5,6 @@
|
|
|
5
5
|
-webkit-overflow-scrolling: touch;
|
|
6
6
|
scrollbar-width: thin;
|
|
7
7
|
scrollbar-gutter: auto;
|
|
8
|
-
// @include theme {
|
|
9
|
-
// scrollbar-color: rgba(var(--co-text), 0.15) transparent;
|
|
10
|
-
// }
|
|
11
8
|
scrollbar-color: var(--co-text-ss) transparent;
|
|
12
9
|
|
|
13
10
|
&::-webkit-scrollbar {
|
|
@@ -20,9 +17,6 @@
|
|
|
20
17
|
&::-webkit-scrollbar-thumb {
|
|
21
18
|
border: 1px solid transparent;
|
|
22
19
|
border-radius: 10px;
|
|
23
|
-
// @include theme {
|
|
24
|
-
// background-color: rgba(var(--co-text), 0.15) !important;
|
|
25
|
-
// }
|
|
26
20
|
background-color: var(--co-text-ss) !important;
|
|
27
21
|
background-clip: content-box;
|
|
28
22
|
}
|
|
@@ -107,9 +101,6 @@
|
|
|
107
101
|
}
|
|
108
102
|
|
|
109
103
|
::-webkit-scrollbar-thumb {
|
|
110
|
-
// @include theme {
|
|
111
|
-
// background-color: rgba(var(--co-text), 0.15) !important;
|
|
112
|
-
// }
|
|
113
104
|
background-color: var(--co-text-ss) !important;
|
|
114
105
|
}
|
|
115
106
|
|
|
@@ -118,10 +109,7 @@
|
|
|
118
109
|
& {
|
|
119
110
|
-webkit-overflow-scrolling: touch;
|
|
120
111
|
scrollbar-width: thin;
|
|
121
|
-
scrollbar-gutter:
|
|
122
|
-
// @include theme {
|
|
123
|
-
// scrollbar-color: rgba(var(--co-text), 0.15) transparent;
|
|
124
|
-
// }
|
|
112
|
+
scrollbar-gutter: stable;
|
|
125
113
|
scrollbar-color: var(--co-text-ss) transparent;
|
|
126
114
|
|
|
127
115
|
&::-webkit-scrollbar {
|
|
@@ -134,9 +122,6 @@
|
|
|
134
122
|
&::-webkit-scrollbar-thumb {
|
|
135
123
|
border: 1px solid transparent;
|
|
136
124
|
border-radius: 10px;
|
|
137
|
-
// @include theme {
|
|
138
|
-
// background-color: rgba(var(--co-text), 0.15) !important;
|
|
139
|
-
// }
|
|
140
125
|
background-color: var(--co-text-ss) !important;
|
|
141
126
|
background-clip: content-box;
|
|
142
127
|
}
|
package/core/size.scss
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
@use 'sass:list';
|
|
13
|
+
@use './media.scss' as *;
|
|
13
14
|
|
|
14
15
|
// 全局字号
|
|
15
16
|
@mixin baseSize($sz: 13) {
|
|
@@ -149,11 +150,11 @@
|
|
|
149
150
|
@include randSize();
|
|
150
151
|
|
|
151
152
|
// 平板
|
|
152
|
-
@
|
|
153
|
+
@include med('<dpc') {
|
|
153
154
|
@include randSize('pad\\:');
|
|
154
155
|
}
|
|
155
156
|
|
|
156
157
|
// 移动
|
|
157
|
-
@
|
|
158
|
+
@include med('<pad') {
|
|
158
159
|
@include randSize('mob\\:');
|
|
159
160
|
}
|
package/core/trim.scss
CHANGED