@n8n/design-system 1.70.0
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/.eslintrc.js +47 -0
- package/.turbo/turbo-build.log +17 -0
- package/LICENSE.md +88 -0
- package/README.md +51 -0
- package/biome.jsonc +7 -0
- package/chromatic.config.json +4 -0
- package/dist/.nojekyll +0 -0
- package/dist/assets/images/storybook-logo-dark.png +0 -0
- package/dist/assets/images/storybook-logo-light.png +0 -0
- package/dist/design-system.css +1 -0
- package/dist/n8n-design-system.es.js +32107 -0
- package/dist/n8n-design-system.umd.js +551 -0
- package/package.json +16 -0
- package/postcss.config.js +6 -0
- package/public/.nojekyll +0 -0
- package/public/assets/images/storybook-logo-dark.png +0 -0
- package/public/assets/images/storybook-logo-light.png +0 -0
- package/src/css/fonts/element-icons.ttf +0 -0
- package/src/css/fonts/element-icons.woff +0 -0
- package/src/css/tailwind/index.css +3 -0
- package/src/index.ts +8 -0
- package/tailwind.config.js +8 -0
- package/theme/preview/docs.min.css +2379 -0
- package/theme/preview/index.html +1334 -0
- package/tsconfig.json +21 -0
- package/vite.config.mts +60 -0
|
@@ -0,0 +1,1334 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Deprecated - Element UI Theme CSS Variable</title>
|
|
8
|
+
<!-- import CSS -->
|
|
9
|
+
<link rel="stylesheet" href="../dist/index.css" />
|
|
10
|
+
<link rel="stylesheet" href="./docs.min.css" />
|
|
11
|
+
</head>
|
|
12
|
+
|
|
13
|
+
<body>
|
|
14
|
+
<div id="app">
|
|
15
|
+
<el-container>
|
|
16
|
+
<el-container>
|
|
17
|
+
<el-main>
|
|
18
|
+
<div class="component-preview">
|
|
19
|
+
<h4>Color</h4>
|
|
20
|
+
<div class="color">
|
|
21
|
+
<el-row :gutter="12">
|
|
22
|
+
<el-col :span="4" v-for="(color, key) in colorLine" :key="key">
|
|
23
|
+
<div class="demo-color-box" :style="{ background: dataProxy(color) }">
|
|
24
|
+
{{color}}
|
|
25
|
+
<div class="value">{{dataProxy(color)}}</div>
|
|
26
|
+
<div class="bg-color-sub">
|
|
27
|
+
<div
|
|
28
|
+
class="bg-success-sub-item"
|
|
29
|
+
v-for="(item, key) in Array(2)"
|
|
30
|
+
:key="key"
|
|
31
|
+
:style="{ background: tintColor(dataProxy(color), (key + 8) / 10) }"
|
|
32
|
+
></div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</el-col>
|
|
36
|
+
</el-row>
|
|
37
|
+
<el-row :gutter="12">
|
|
38
|
+
<el-col :span="4">
|
|
39
|
+
<div
|
|
40
|
+
class="demo-color-box demo-color-box-other"
|
|
41
|
+
:style="{ background: color_text_primary }"
|
|
42
|
+
>
|
|
43
|
+
Primary Text
|
|
44
|
+
<div class="value">{{color_text_primary}}</div>
|
|
45
|
+
</div>
|
|
46
|
+
</el-col>
|
|
47
|
+
<el-col :span="4">
|
|
48
|
+
<div
|
|
49
|
+
class="demo-color-box demo-color-box-other"
|
|
50
|
+
:style="{ background: color_text_regular }"
|
|
51
|
+
>
|
|
52
|
+
Regular Text
|
|
53
|
+
<div class="value">{{color_text_regular}}</div>
|
|
54
|
+
</div>
|
|
55
|
+
</el-col>
|
|
56
|
+
<el-col :span="4">
|
|
57
|
+
<div
|
|
58
|
+
class="demo-color-box demo-color-box-other"
|
|
59
|
+
:style="{ background: color_text_secondary }"
|
|
60
|
+
>
|
|
61
|
+
Secondary Text
|
|
62
|
+
<div class="value">{{color_text_secondary}}</div>
|
|
63
|
+
</div>
|
|
64
|
+
</el-col>
|
|
65
|
+
<el-col :span="4">
|
|
66
|
+
<div
|
|
67
|
+
class="demo-color-box demo-color-box-other"
|
|
68
|
+
:style="{ background: color_text_placeholder }"
|
|
69
|
+
>
|
|
70
|
+
Placeholder
|
|
71
|
+
<div class="value">{{color_text_placeholder}}</div>
|
|
72
|
+
</div>
|
|
73
|
+
</el-col>
|
|
74
|
+
</el-row>
|
|
75
|
+
|
|
76
|
+
<el-row :gutter="12">
|
|
77
|
+
<el-col :span="4">
|
|
78
|
+
<div
|
|
79
|
+
class="demo-color-box demo-color-box-other demo-color-box-lite"
|
|
80
|
+
:style="{ background: border_color_base }"
|
|
81
|
+
>
|
|
82
|
+
Border Base
|
|
83
|
+
<div class="value">{{border_color_base}}</div>
|
|
84
|
+
</div>
|
|
85
|
+
</el-col>
|
|
86
|
+
<el-col :span="4">
|
|
87
|
+
<div
|
|
88
|
+
class="demo-color-box demo-color-box-other demo-color-box-lite"
|
|
89
|
+
:style="{ background: border_color_light }"
|
|
90
|
+
>
|
|
91
|
+
Border Light
|
|
92
|
+
<div class="value">{{border_color_light}}</div>
|
|
93
|
+
</div>
|
|
94
|
+
</el-col>
|
|
95
|
+
<el-col :span="4">
|
|
96
|
+
<div
|
|
97
|
+
class="demo-color-box demo-color-box-other demo-color-box-lite"
|
|
98
|
+
:style="{ background: border_color_lighter }"
|
|
99
|
+
>
|
|
100
|
+
Border Lighter
|
|
101
|
+
<div class="value">{{border_color_lighter}}</div>
|
|
102
|
+
</div>
|
|
103
|
+
</el-col>
|
|
104
|
+
<el-col :span="4">
|
|
105
|
+
<div
|
|
106
|
+
class="demo-color-box demo-color-box-other demo-color-box-lite"
|
|
107
|
+
:style="{ background: border_color_extra_light }"
|
|
108
|
+
>
|
|
109
|
+
Border Extralight
|
|
110
|
+
<div class="value">{{border_color_extra_light}}</div>
|
|
111
|
+
</div>
|
|
112
|
+
</el-col>
|
|
113
|
+
</el-row>
|
|
114
|
+
|
|
115
|
+
<el-row :gutter="12" v-if="false">
|
|
116
|
+
<el-col :span="4">
|
|
117
|
+
<div
|
|
118
|
+
class="demo-color-box demo-color-box-other"
|
|
119
|
+
:style="{ background: color_black }"
|
|
120
|
+
>
|
|
121
|
+
Background B
|
|
122
|
+
<div class="value">{{color_black}}</div>
|
|
123
|
+
</div>
|
|
124
|
+
</el-col>
|
|
125
|
+
<el-col :span="4">
|
|
126
|
+
<div
|
|
127
|
+
class="demo-color-box demo-color-box-other"
|
|
128
|
+
:style="{ background: color_white, color: '#303133', border: '1px solid #eee' }"
|
|
129
|
+
>
|
|
130
|
+
Background W
|
|
131
|
+
<div class="value">{{color_white}}</div>
|
|
132
|
+
</div>
|
|
133
|
+
</el-col>
|
|
134
|
+
<el-col :span="4">
|
|
135
|
+
<div class="demo-color-box demo-color-box-other bg-transparent">
|
|
136
|
+
Background
|
|
137
|
+
<div class="value">Transparent</div>
|
|
138
|
+
</div>
|
|
139
|
+
</el-col>
|
|
140
|
+
</el-row>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<h4>Typography</h4>
|
|
144
|
+
<el-row :gutter="12">
|
|
145
|
+
<el-col :span="6" class="heading">
|
|
146
|
+
<div :style="{ fontSize: font_size_extra_large }">Heading1</div>
|
|
147
|
+
<div :style="{ fontSize: font_size_large }">Heading2</div>
|
|
148
|
+
<div :style="{ fontSize: font_size_medium }">Heading3</div>
|
|
149
|
+
<div :style="{ fontSize: font_size_base }">Heading4</div>
|
|
150
|
+
<div :style="{ fontSize: font_size_small }">Heading5</div>
|
|
151
|
+
<div :style="{ fontSize: font_size_extra_small }">Heading6</div>
|
|
152
|
+
</el-col>
|
|
153
|
+
<el-col :span="9">
|
|
154
|
+
<div class="title">Example body text</div>
|
|
155
|
+
<p
|
|
156
|
+
class="paragraph"
|
|
157
|
+
:style="{
|
|
158
|
+
fontSize: font_size_base,
|
|
159
|
+
fontWeight: font_weight_primary,
|
|
160
|
+
lineHeight: font_line_height_primary
|
|
161
|
+
}"
|
|
162
|
+
>
|
|
163
|
+
With MySpace becoming more popular every day, there is the constant need to be
|
|
164
|
+
different. There are millions of users. If MySpace layouts are chosen well, then
|
|
165
|
+
you can enhance your profile a great deal.
|
|
166
|
+
</p>
|
|
167
|
+
</el-col>
|
|
168
|
+
<el-col :span="9">
|
|
169
|
+
<div class="title">Example small text</div>
|
|
170
|
+
<p
|
|
171
|
+
class="paragraph"
|
|
172
|
+
:style="{
|
|
173
|
+
fontSize: font_size_small,
|
|
174
|
+
fontWeight: font_weight_secondary,
|
|
175
|
+
lineHeight: font_line_height_secondary
|
|
176
|
+
}"
|
|
177
|
+
>
|
|
178
|
+
Computers have become ubiquitous in almost every facet of our lives. At work,
|
|
179
|
+
desk jockeys spend hours in front of their desktops, while delivery people scan
|
|
180
|
+
bar codes with handhelds and workers in the field stay in touch with the central
|
|
181
|
+
office via their notebooks. Computer hardware weaves itself through the fabric
|
|
182
|
+
of our lives.
|
|
183
|
+
</p>
|
|
184
|
+
</el-col>
|
|
185
|
+
</el-row>
|
|
186
|
+
|
|
187
|
+
<h4>Button</h4>
|
|
188
|
+
<el-row class="demo-line">
|
|
189
|
+
<el-button>Default</el-button>
|
|
190
|
+
<el-button type="primary">Primary</el-button>
|
|
191
|
+
<el-button type="success">Success</el-button>
|
|
192
|
+
<el-button type="info">Info</el-button>
|
|
193
|
+
<el-button type="warning">Warning</el-button>
|
|
194
|
+
<el-button type="danger">Danger</el-button>
|
|
195
|
+
</el-row>
|
|
196
|
+
<el-row class="demo-line">
|
|
197
|
+
<el-button disabled>Default</el-button>
|
|
198
|
+
<el-button disabled type="primary">Primary</el-button>
|
|
199
|
+
<el-button disabled type="success">Success</el-button>
|
|
200
|
+
<el-button disabled type="info">Info</el-button>
|
|
201
|
+
<el-button disabled type="warning">Warning</el-button>
|
|
202
|
+
<el-button disabled type="danger">Danger</el-button>
|
|
203
|
+
</el-row>
|
|
204
|
+
<el-row class="demo-line">
|
|
205
|
+
<el-button plain>Plain</el-button>
|
|
206
|
+
<el-button type="primary" plain>Primary</el-button>
|
|
207
|
+
<el-button type="success" plain>Success</el-button>
|
|
208
|
+
<el-button type="info" plain>Info</el-button>
|
|
209
|
+
<el-button type="warning" plain>Warning</el-button>
|
|
210
|
+
<el-button type="danger" plain>Danger</el-button>
|
|
211
|
+
</el-row>
|
|
212
|
+
<el-row class="demo-line">
|
|
213
|
+
<el-button disabled plain>Plain</el-button>
|
|
214
|
+
<el-button disabled type="primary" plain>Primary</el-button>
|
|
215
|
+
<el-button disabled type="success" plain>Success</el-button>
|
|
216
|
+
<el-button disabled type="info" plain>Info</el-button>
|
|
217
|
+
<el-button disabled type="warning" plain>Warning</el-button>
|
|
218
|
+
<el-button disabled type="danger" plain>Danger</el-button>
|
|
219
|
+
</el-row>
|
|
220
|
+
<el-row class="demo-line">
|
|
221
|
+
<el-button round>Round</el-button>
|
|
222
|
+
<el-button type="primary" round>Primary</el-button>
|
|
223
|
+
<el-button type="success" round>Success</el-button>
|
|
224
|
+
<el-button type="info" round>Info</el-button>
|
|
225
|
+
<el-button type="warning" round>Warning</el-button>
|
|
226
|
+
<el-button type="danger" round>Danger</el-button>
|
|
227
|
+
</el-row>
|
|
228
|
+
<el-row class="demo-line">
|
|
229
|
+
<el-button icon="el-icon-search" circle></el-button>
|
|
230
|
+
<el-button type="primary" icon="el-icon-edit" circle></el-button>
|
|
231
|
+
<el-button type="success" icon="el-icon-check" circle></el-button>
|
|
232
|
+
<el-button type="info" icon="el-icon-message" circle></el-button>
|
|
233
|
+
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
|
|
234
|
+
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
|
235
|
+
</el-row>
|
|
236
|
+
<el-row class="demo-line">
|
|
237
|
+
<el-button>Default</el-button>
|
|
238
|
+
<el-button size="medium">Medium</el-button>
|
|
239
|
+
<el-button size="small">Small</el-button>
|
|
240
|
+
<el-button size="mini">Mini</el-button>
|
|
241
|
+
</el-row>
|
|
242
|
+
<el-row>
|
|
243
|
+
<el-button type="text">文字按钮</el-button>
|
|
244
|
+
<el-button type="text" disabled>文字按钮</el-button>
|
|
245
|
+
</el-row>
|
|
246
|
+
<h4>Radio</h4>
|
|
247
|
+
<el-row class="demo-line">
|
|
248
|
+
<el-radio v-model="radio" label="1">Option A</el-radio>
|
|
249
|
+
<el-radio v-model="radio" label="2">Option B</el-radio>
|
|
250
|
+
</el-row>
|
|
251
|
+
<el-row class="demo-line">
|
|
252
|
+
<el-radio-group v-model="radio1">
|
|
253
|
+
<el-radio-button label="New York"></el-radio-button>
|
|
254
|
+
<el-radio-button label="Washington"></el-radio-button>
|
|
255
|
+
<el-radio-button label="Los Angeles"></el-radio-button>
|
|
256
|
+
<el-radio-button label="Chicago"></el-radio-button>
|
|
257
|
+
</el-radio-group>
|
|
258
|
+
</el-row>
|
|
259
|
+
<el-row class="demo-line">
|
|
260
|
+
<el-radio v-model="radio2" label="1" border>Option A</el-radio>
|
|
261
|
+
<el-radio v-model="radio2" label="2" border>Option B</el-radio>
|
|
262
|
+
</el-row>
|
|
263
|
+
<h4>Checkbox</h4>
|
|
264
|
+
<el-row class="demo-line">
|
|
265
|
+
<el-checkbox v-model="checked">Option</el-checkbox>
|
|
266
|
+
</el-row>
|
|
267
|
+
<el-row class="demo-line">
|
|
268
|
+
<el-checkbox-group v-model="checked1">
|
|
269
|
+
<el-checkbox-button
|
|
270
|
+
v-for="city in ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']"
|
|
271
|
+
:label="city"
|
|
272
|
+
:key="city"
|
|
273
|
+
>{{city}}</el-checkbox-button
|
|
274
|
+
>
|
|
275
|
+
</el-checkbox-group>
|
|
276
|
+
</el-row>
|
|
277
|
+
<el-row class="demo-line">
|
|
278
|
+
<el-checkbox v-model="checked2" label="Option1" border></el-checkbox>
|
|
279
|
+
</el-row>
|
|
280
|
+
<h4>Input</h4>
|
|
281
|
+
<el-row style="width: 180px">
|
|
282
|
+
<el-input placeholder="Please input" v-model="input"></el-input>
|
|
283
|
+
</el-row>
|
|
284
|
+
<h4>InputNumber</h4>
|
|
285
|
+
<el-row>
|
|
286
|
+
<el-input-number v-model="inputNumber" :min="1" :max="10"></el-input-number>
|
|
287
|
+
</el-row>
|
|
288
|
+
<h4>Select</h4>
|
|
289
|
+
<el-row>
|
|
290
|
+
<el-select v-model="selectValue" placeholder="Select">
|
|
291
|
+
<el-option
|
|
292
|
+
v-for="item in selectOptions"
|
|
293
|
+
:key="item.value"
|
|
294
|
+
:label="item.label"
|
|
295
|
+
:value="item.value"
|
|
296
|
+
>
|
|
297
|
+
</el-option>
|
|
298
|
+
</el-select>
|
|
299
|
+
</el-row>
|
|
300
|
+
<h4>Cascader</h4>
|
|
301
|
+
<el-row>
|
|
302
|
+
<el-cascader :options="cascadeOptions" v-model="cascaderValue"></el-cascader>
|
|
303
|
+
</el-row>
|
|
304
|
+
<h4>Switch</h4>
|
|
305
|
+
<el-row>
|
|
306
|
+
<el-switch v-model="switchValue"></el-switch>
|
|
307
|
+
<el-switch
|
|
308
|
+
style="margin-left: 40px"
|
|
309
|
+
v-model="switchValue"
|
|
310
|
+
active-text="Pay by month"
|
|
311
|
+
inactive-text="Pay by year"
|
|
312
|
+
>
|
|
313
|
+
</el-switch>
|
|
314
|
+
</el-row>
|
|
315
|
+
<h4>Slider</h4>
|
|
316
|
+
<el-row style="width: 380px">
|
|
317
|
+
<el-slider v-model="slider"></el-slider>
|
|
318
|
+
</el-row>
|
|
319
|
+
<h4>DatePicker</h4>
|
|
320
|
+
<el-row>
|
|
321
|
+
<el-date-picker v-model="datePicker" type="date"></el-date-picker>
|
|
322
|
+
</el-row>
|
|
323
|
+
<h4>Rate</h4>
|
|
324
|
+
<el-row>
|
|
325
|
+
<el-rate class="demo-line" v-model="rate"></el-rate>
|
|
326
|
+
<el-rate
|
|
327
|
+
class="demo-line"
|
|
328
|
+
v-model="rate"
|
|
329
|
+
show-score
|
|
330
|
+
text-color="#ff9900"
|
|
331
|
+
score-template="{value} points"
|
|
332
|
+
>
|
|
333
|
+
</el-rate>
|
|
334
|
+
</el-row>
|
|
335
|
+
<h4>Transfer</h4>
|
|
336
|
+
<el-row>
|
|
337
|
+
<el-transfer v-model="transfer" filterable :data="transferData">
|
|
338
|
+
<el-button class="transfer-footer" slot="left-footer" size="small"
|
|
339
|
+
>Operation</el-button
|
|
340
|
+
>
|
|
341
|
+
<el-button class="transfer-footer" slot="right-footer" size="small"
|
|
342
|
+
>Operation</el-button
|
|
343
|
+
>
|
|
344
|
+
</el-transfer>
|
|
345
|
+
</el-row>
|
|
346
|
+
<h4>Table</h4>
|
|
347
|
+
<el-row>
|
|
348
|
+
<el-table :data="tableData" style="width: 70%">
|
|
349
|
+
<el-table-column prop="date" label="Date" width="180"></el-table-column>
|
|
350
|
+
<el-table-column prop="name" label="Name" width="180"></el-table-column>
|
|
351
|
+
<el-table-column prop="address" label="Address"></el-table-column>
|
|
352
|
+
</el-table>
|
|
353
|
+
</el-row>
|
|
354
|
+
<h4>Tag</h4>
|
|
355
|
+
<el-row>
|
|
356
|
+
<el-tag class="demo-item" closable>Tag One</el-tag>
|
|
357
|
+
<el-tag class="demo-item" closable type="success">Tag Two</el-tag>
|
|
358
|
+
<el-tag class="demo-item" closable type="info">Tag Three</el-tag>
|
|
359
|
+
<el-tag class="demo-item" closable type="warning">Tag Four</el-tag>
|
|
360
|
+
<el-tag class="demo-item" closable type="danger">Tag Five</el-tag>
|
|
361
|
+
</el-row>
|
|
362
|
+
<h4>Progress</h4>
|
|
363
|
+
<el-row style="width: 380px">
|
|
364
|
+
<el-progress :percentage="20"></el-progress>
|
|
365
|
+
<el-progress :percentage="60" status="exception"></el-progress>
|
|
366
|
+
<el-progress :percentage="100" status="success"></el-progress>
|
|
367
|
+
</el-row>
|
|
368
|
+
<h4>Tree</h4>
|
|
369
|
+
<el-row style="width: 380px">
|
|
370
|
+
<el-tree :data="treeData" :props="defaultTreeProps"></el-tree>
|
|
371
|
+
</el-row>
|
|
372
|
+
<h4>Pagination</h4>
|
|
373
|
+
<el-row>
|
|
374
|
+
<el-pagination layout="prev, pager, next" :total="1000"></el-pagination>
|
|
375
|
+
</el-row>
|
|
376
|
+
<h4>Badge</h4>
|
|
377
|
+
<el-row>
|
|
378
|
+
<el-badge :value="12" class="demo-item">
|
|
379
|
+
<el-button size="small">comments</el-button>
|
|
380
|
+
</el-badge>
|
|
381
|
+
<el-badge :value="3" class="demo-item">
|
|
382
|
+
<el-button size="small">replies</el-button>
|
|
383
|
+
</el-badge>
|
|
384
|
+
<el-badge :value="1" class="demo-item" type="primary">
|
|
385
|
+
<el-button size="small">comments</el-button>
|
|
386
|
+
</el-badge>
|
|
387
|
+
<el-badge :value="2" class="demo-item" type="warning">
|
|
388
|
+
<el-button size="small">replies</el-button>
|
|
389
|
+
</el-badge>
|
|
390
|
+
</el-row>
|
|
391
|
+
<h4>Alert</h4>
|
|
392
|
+
<el-row style="width: 380px">
|
|
393
|
+
<el-alert
|
|
394
|
+
class="demo-item"
|
|
395
|
+
title="success alert"
|
|
396
|
+
type="success"
|
|
397
|
+
show-icon
|
|
398
|
+
></el-alert>
|
|
399
|
+
<el-alert
|
|
400
|
+
class="demo-item"
|
|
401
|
+
title="info alert"
|
|
402
|
+
type="info"
|
|
403
|
+
close-text="Gotcha"
|
|
404
|
+
show-icon
|
|
405
|
+
></el-alert>
|
|
406
|
+
<el-alert
|
|
407
|
+
class="demo-item"
|
|
408
|
+
title="warning alert"
|
|
409
|
+
type="warning"
|
|
410
|
+
show-icon
|
|
411
|
+
></el-alert>
|
|
412
|
+
<el-alert
|
|
413
|
+
class="demo-item"
|
|
414
|
+
title="error alert"
|
|
415
|
+
type="error"
|
|
416
|
+
description="more text description"
|
|
417
|
+
show-icon
|
|
418
|
+
>
|
|
419
|
+
</el-alert>
|
|
420
|
+
</el-row>
|
|
421
|
+
<h4>Loading</h4>
|
|
422
|
+
<el-row>
|
|
423
|
+
<el-table :data="tableData" style="width: 90%" v-loading="true">
|
|
424
|
+
<el-table-column prop="date" label="Date" width="180"></el-table-column>
|
|
425
|
+
<el-table-column prop="name" label="Name" width="180"></el-table-column>
|
|
426
|
+
<el-table-column prop="address" label="Address"></el-table-column>
|
|
427
|
+
</el-table>
|
|
428
|
+
</el-row>
|
|
429
|
+
<h4>Message</h4>
|
|
430
|
+
<el-row>
|
|
431
|
+
<div
|
|
432
|
+
role="alert"
|
|
433
|
+
class="demo-item el-message el-message--success el-message-fade-leave-active el-message-fade-leave-to"
|
|
434
|
+
style="
|
|
435
|
+
top: 0;
|
|
436
|
+
left: 0;
|
|
437
|
+
width: 100px;
|
|
438
|
+
opacity: 1;
|
|
439
|
+
position: relative;
|
|
440
|
+
transform: none;
|
|
441
|
+
"
|
|
442
|
+
>
|
|
443
|
+
<i class="el-message__icon el-icon-success"></i>
|
|
444
|
+
<p class="el-message__content">Congrats, this is a success message.</p>
|
|
445
|
+
<!---->
|
|
446
|
+
</div>
|
|
447
|
+
<div
|
|
448
|
+
role="alert"
|
|
449
|
+
class="demo-item el-message el-message--warning el-message-fade-leave-active el-message-fade-leave-to"
|
|
450
|
+
style="
|
|
451
|
+
top: 0;
|
|
452
|
+
left: 0;
|
|
453
|
+
width: 100px;
|
|
454
|
+
opacity: 1;
|
|
455
|
+
position: relative;
|
|
456
|
+
transform: none;
|
|
457
|
+
"
|
|
458
|
+
>
|
|
459
|
+
<i class="el-message__icon el-icon-warning"></i>
|
|
460
|
+
<p class="el-message__content">Warning, this is a warning message.</p>
|
|
461
|
+
<!---->
|
|
462
|
+
</div>
|
|
463
|
+
<div
|
|
464
|
+
role="alert"
|
|
465
|
+
class="demo-item el-message el-message--info el-message-fade-leave-active el-message-fade-leave-to"
|
|
466
|
+
style="
|
|
467
|
+
top: 0;
|
|
468
|
+
left: 0;
|
|
469
|
+
width: 100px;
|
|
470
|
+
opacity: 1;
|
|
471
|
+
position: relative;
|
|
472
|
+
transform: none;
|
|
473
|
+
"
|
|
474
|
+
>
|
|
475
|
+
<i class="el-message__icon el-icon-info"></i>
|
|
476
|
+
<p class="el-message__content">This is a message.</p>
|
|
477
|
+
<!---->
|
|
478
|
+
</div>
|
|
479
|
+
<div
|
|
480
|
+
role="alert"
|
|
481
|
+
class="demo-item el-message el-message--error is-closable el-message-fade-leave-active el-message-fade-leave-to"
|
|
482
|
+
style="
|
|
483
|
+
top: 0;
|
|
484
|
+
left: 0;
|
|
485
|
+
width: 100px;
|
|
486
|
+
opacity: 1;
|
|
487
|
+
position: relative;
|
|
488
|
+
transform: none;
|
|
489
|
+
"
|
|
490
|
+
>
|
|
491
|
+
<i class="el-message__icon el-icon-error"></i>
|
|
492
|
+
<p class="el-message__content">Oops, this is a error message.</p>
|
|
493
|
+
<i class="el-message__closeBtn el-icon-close"></i>
|
|
494
|
+
</div>
|
|
495
|
+
</el-row>
|
|
496
|
+
<h4>MessageBox</h4>
|
|
497
|
+
<el-row>
|
|
498
|
+
<div class="el-message-box">
|
|
499
|
+
<div class="el-message-box__header">
|
|
500
|
+
<div class="el-message-box__title"><!----><span>Warning</span></div>
|
|
501
|
+
<button type="button" aria-label="Close" class="el-message-box__headerbtn">
|
|
502
|
+
<i class="el-message-box__close el-icon-close"></i>
|
|
503
|
+
</button>
|
|
504
|
+
</div>
|
|
505
|
+
<div class="el-message-box__content">
|
|
506
|
+
<div class="el-message-box__status el-icon-warning"></div>
|
|
507
|
+
<div class="el-message-box__message">
|
|
508
|
+
<p>This will permanently delete the file. Continue?</p>
|
|
509
|
+
</div>
|
|
510
|
+
<div class="el-message-box__input" style="display: none">
|
|
511
|
+
<div class="el-input">
|
|
512
|
+
<!----><input
|
|
513
|
+
type="text"
|
|
514
|
+
autocomplete="off"
|
|
515
|
+
placeholder=""
|
|
516
|
+
class="el-input__inner"
|
|
517
|
+
/>
|
|
518
|
+
<!---->
|
|
519
|
+
<!---->
|
|
520
|
+
<!---->
|
|
521
|
+
</div>
|
|
522
|
+
<div class="el-message-box__errormsg" style="visibility: hidden"></div>
|
|
523
|
+
</div>
|
|
524
|
+
</div>
|
|
525
|
+
<div class="el-message-box__btns">
|
|
526
|
+
<button type="button" class="el-button el-button--default el-button--small">
|
|
527
|
+
<!---->
|
|
528
|
+
<!----><span> Cancel </span></button
|
|
529
|
+
><button
|
|
530
|
+
type="button"
|
|
531
|
+
class="el-button el-button--default el-button--small el-button--primary"
|
|
532
|
+
>
|
|
533
|
+
<!---->
|
|
534
|
+
<!----><span> OK </span>
|
|
535
|
+
</button>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</el-row>
|
|
539
|
+
<h4>Notification</h4>
|
|
540
|
+
<el-row>
|
|
541
|
+
<div role="alert" class="el-notification right" style="position: relative; left: 0">
|
|
542
|
+
<!---->
|
|
543
|
+
<div class="el-notification__group">
|
|
544
|
+
<span class="el-notification__title">Notification</span>
|
|
545
|
+
<div class="el-notification__content">
|
|
546
|
+
<div>This is a message</div>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="el-notification__closeBtn el-icon-close"></div>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
</el-row>
|
|
552
|
+
<h4>Menu</h4>
|
|
553
|
+
<el-row>
|
|
554
|
+
<el-menu :default-active="menu" class="el-menu-demo" mode="horizontal">
|
|
555
|
+
<el-menu-item index="1">Processing Center</el-menu-item>
|
|
556
|
+
<el-submenu index="2">
|
|
557
|
+
<template slot="title">Workspace</template>
|
|
558
|
+
<el-menu-item index="2-1">item one</el-menu-item>
|
|
559
|
+
<el-menu-item index="2-2">item two</el-menu-item>
|
|
560
|
+
<el-menu-item index="2-3">item three</el-menu-item>
|
|
561
|
+
<el-submenu index="2-4">
|
|
562
|
+
<template slot="title">item four</template>
|
|
563
|
+
<el-menu-item index="2-4-1">item one</el-menu-item>
|
|
564
|
+
<el-menu-item index="2-4-2">item two</el-menu-item>
|
|
565
|
+
<el-menu-item index="2-4-3">item three</el-menu-item>
|
|
566
|
+
</el-submenu>
|
|
567
|
+
</el-submenu>
|
|
568
|
+
<el-menu-item index="3" disabled>Info</el-menu-item>
|
|
569
|
+
<el-menu-item index="4">
|
|
570
|
+
<a href="https://www.ele.me" target="_blank">Orders</a>
|
|
571
|
+
</el-menu-item>
|
|
572
|
+
</el-menu>
|
|
573
|
+
<el-menu default-active="2" class="demo-line">
|
|
574
|
+
<el-submenu index="1">
|
|
575
|
+
<template slot="title">
|
|
576
|
+
<i class="el-icon-location"></i>
|
|
577
|
+
<span>Navigator One</span>
|
|
578
|
+
</template>
|
|
579
|
+
<el-menu-item-group title="Group One">
|
|
580
|
+
<el-menu-item index="1-1">item one</el-menu-item>
|
|
581
|
+
<el-menu-item index="1-2">item one</el-menu-item>
|
|
582
|
+
</el-menu-item-group>
|
|
583
|
+
<el-menu-item-group title="Group Two">
|
|
584
|
+
<el-menu-item index="1-3">item three</el-menu-item>
|
|
585
|
+
</el-menu-item-group>
|
|
586
|
+
<el-submenu index="1-4">
|
|
587
|
+
<template slot="title">item four</template>
|
|
588
|
+
<el-menu-item index="1-4-1">item one</el-menu-item>
|
|
589
|
+
</el-submenu>
|
|
590
|
+
</el-submenu>
|
|
591
|
+
<el-menu-item index="2">
|
|
592
|
+
<i class="el-icon-menu"></i>
|
|
593
|
+
<span>Navigator Two</span>
|
|
594
|
+
</el-menu-item>
|
|
595
|
+
<el-menu-item index="3" disabled>
|
|
596
|
+
<i class="el-icon-document"></i>
|
|
597
|
+
<span>Navigator Three</span>
|
|
598
|
+
</el-menu-item>
|
|
599
|
+
<el-menu-item index="4">
|
|
600
|
+
<i class="el-icon-setting"></i>
|
|
601
|
+
<span>Navigator Four</span>
|
|
602
|
+
</el-menu-item>
|
|
603
|
+
</el-menu>
|
|
604
|
+
</el-row>
|
|
605
|
+
<h4>Tabs</h4>
|
|
606
|
+
<el-row>
|
|
607
|
+
<el-tabs v-model="tab" class="demo-item">
|
|
608
|
+
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
|
609
|
+
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
|
610
|
+
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
|
611
|
+
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
|
612
|
+
</el-tabs>
|
|
613
|
+
<el-tabs type="card" class="demo-item">
|
|
614
|
+
<el-tab-pane label="User">User</el-tab-pane>
|
|
615
|
+
<el-tab-pane label="Config">Config</el-tab-pane>
|
|
616
|
+
<el-tab-pane label="Role">Role</el-tab-pane>
|
|
617
|
+
<el-tab-pane label="Task">Task</el-tab-pane>
|
|
618
|
+
</el-tabs>
|
|
619
|
+
</el-row>
|
|
620
|
+
<h4>Dialog</h4>
|
|
621
|
+
<el-row>
|
|
622
|
+
<div
|
|
623
|
+
role="dialog"
|
|
624
|
+
aria-modal="true"
|
|
625
|
+
aria-label="Tips"
|
|
626
|
+
class="el-dialog"
|
|
627
|
+
style="margin: 0"
|
|
628
|
+
>
|
|
629
|
+
<div class="el-dialog__header">
|
|
630
|
+
<span class="el-dialog__title">Tips</span
|
|
631
|
+
><button type="button" aria-label="Close" class="el-dialog__headerbtn">
|
|
632
|
+
<i class="el-dialog__close el-icon el-icon-close"></i>
|
|
633
|
+
</button>
|
|
634
|
+
</div>
|
|
635
|
+
<div class="el-dialog__body">
|
|
636
|
+
<span>This is a message</span>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="el-dialog__footer">
|
|
639
|
+
<span class="dialog-footer"
|
|
640
|
+
><button type="button" class="el-button el-button--default">
|
|
641
|
+
<!---->
|
|
642
|
+
<!----><span>Cancel</span>
|
|
643
|
+
</button>
|
|
644
|
+
<button type="button" class="el-button el-button--primary">
|
|
645
|
+
<!---->
|
|
646
|
+
<!----><span>Confirm</span>
|
|
647
|
+
</button></span
|
|
648
|
+
>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
</el-row>
|
|
652
|
+
<h4>Tooltip</h4>
|
|
653
|
+
<el-row>
|
|
654
|
+
<div
|
|
655
|
+
role="tooltip"
|
|
656
|
+
x-placement="top"
|
|
657
|
+
class="el-tooltip__popper is-dark"
|
|
658
|
+
style="position: relative; width: 40px; text-align: center"
|
|
659
|
+
>
|
|
660
|
+
Dark
|
|
661
|
+
<div x-arrow="" class="popper__arrow"></div>
|
|
662
|
+
</div>
|
|
663
|
+
<div
|
|
664
|
+
role="tooltip"
|
|
665
|
+
x-placement="top"
|
|
666
|
+
class="el-tooltip__popper is-light"
|
|
667
|
+
style="margin-top: 10px; position: relative; width: 40px; text-align: center"
|
|
668
|
+
>
|
|
669
|
+
Light
|
|
670
|
+
<div x-arrow="" class="popper__arrow"></div>
|
|
671
|
+
</div>
|
|
672
|
+
</el-row>
|
|
673
|
+
<h4>Popover</h4>
|
|
674
|
+
<el-row>
|
|
675
|
+
<div
|
|
676
|
+
role="tooltip"
|
|
677
|
+
x-placement="top"
|
|
678
|
+
id="el-popover-2936"
|
|
679
|
+
aria-hidden="true"
|
|
680
|
+
class="el-popover el-popper el-popover--plain"
|
|
681
|
+
tabindex="0"
|
|
682
|
+
style="width: 200px; position: relative"
|
|
683
|
+
>
|
|
684
|
+
<div class="el-popover__title">Title</div>
|
|
685
|
+
this is content, this is content, this is content
|
|
686
|
+
<div x-arrow="" class="popper__arrow"></div>
|
|
687
|
+
</div>
|
|
688
|
+
</el-row>
|
|
689
|
+
<h4>Card</h4>
|
|
690
|
+
<el-row>
|
|
691
|
+
<el-card class="box-card">
|
|
692
|
+
<div slot="header" class="clearfix">
|
|
693
|
+
<span>Card name</span>
|
|
694
|
+
</div>
|
|
695
|
+
</el-card>
|
|
696
|
+
</el-row>
|
|
697
|
+
<h4>Carousel</h4>
|
|
698
|
+
<el-row>
|
|
699
|
+
<el-carousel height="150px">
|
|
700
|
+
<el-carousel-item v-for="item in 4" :key="item">
|
|
701
|
+
<h3>{{ item }}</h3>
|
|
702
|
+
</el-carousel-item>
|
|
703
|
+
</el-carousel>
|
|
704
|
+
</el-row>
|
|
705
|
+
<h4>Collapse</h4>
|
|
706
|
+
<el-row>
|
|
707
|
+
<el-collapse v-model="collapse">
|
|
708
|
+
<el-collapse-item title="Consistent" name="1">
|
|
709
|
+
<div>
|
|
710
|
+
Consistent with real life: in line with the process and logic of real life,
|
|
711
|
+
and comply with languages and habits that the users are used to;
|
|
712
|
+
</div>
|
|
713
|
+
</el-collapse-item>
|
|
714
|
+
<el-collapse-item title="Feedback" name="2">
|
|
715
|
+
<div>
|
|
716
|
+
Operation feedback: enable the users to clearly perceive their operations by
|
|
717
|
+
style updates and interactive effects;
|
|
718
|
+
</div>
|
|
719
|
+
</el-collapse-item>
|
|
720
|
+
</el-collapse>
|
|
721
|
+
</el-row>
|
|
722
|
+
<h4>Avatar</h4>
|
|
723
|
+
<el-row class="demo-line avatar-demo">
|
|
724
|
+
<el-avatar icon="el-icon-user-solid" />
|
|
725
|
+
<el-avatar> avatar </el-avatar>
|
|
726
|
+
<el-avatar shape="square" fit="contain" :src="avatarData.url"></el-avatar>
|
|
727
|
+
<el-avatar size="large"> large </el-avatar>
|
|
728
|
+
<el-avatar size="medium"> medium </el-avatar>
|
|
729
|
+
<el-avatar size="small"> small </el-avatar>
|
|
730
|
+
</el-row>
|
|
731
|
+
<h4>Tree</h4>
|
|
732
|
+
<el-row class="demo-line">
|
|
733
|
+
<el-tree :data="treeData"></el-tree>
|
|
734
|
+
</el-row>
|
|
735
|
+
</div>
|
|
736
|
+
</el-main>
|
|
737
|
+
</el-container>
|
|
738
|
+
<el-aside width="400px">
|
|
739
|
+
<div class="color-wrap">
|
|
740
|
+
<el-card class="box-card">
|
|
741
|
+
<div slot="header" class="box-card-header">
|
|
742
|
+
<span>Color</span>
|
|
743
|
+
<el-button size="small" round type="primary" @click.native="copyCssVariables"
|
|
744
|
+
>复制变量</el-button
|
|
745
|
+
>
|
|
746
|
+
</div>
|
|
747
|
+
<el-row>
|
|
748
|
+
<p>color-primary 主题色</p>
|
|
749
|
+
<el-col :span="6">
|
|
750
|
+
<el-color-picker v-model="color_primary"></el-color-picker>
|
|
751
|
+
</el-col>
|
|
752
|
+
<el-col :span="18">
|
|
753
|
+
<el-input v-model="color_primary"></el-input>
|
|
754
|
+
</el-col>
|
|
755
|
+
</el-row>
|
|
756
|
+
|
|
757
|
+
<el-row>
|
|
758
|
+
<p>color-success 成功题色</p>
|
|
759
|
+
<el-col :span="6">
|
|
760
|
+
<el-color-picker v-model="color_success"></el-color-picker>
|
|
761
|
+
</el-col>
|
|
762
|
+
<el-col :span="18">
|
|
763
|
+
<el-input v-model="color_success"></el-input>
|
|
764
|
+
</el-col>
|
|
765
|
+
</el-row>
|
|
766
|
+
|
|
767
|
+
<el-row>
|
|
768
|
+
<p>color-warning 警告题色</p>
|
|
769
|
+
<el-col :span="6">
|
|
770
|
+
<el-color-picker v-model="color_warning"></el-color-picker>
|
|
771
|
+
</el-col>
|
|
772
|
+
<el-col :span="18">
|
|
773
|
+
<el-input v-model="color_warning"></el-input>
|
|
774
|
+
</el-col>
|
|
775
|
+
</el-row>
|
|
776
|
+
|
|
777
|
+
<el-row>
|
|
778
|
+
<p>color-danger 危险题色</p>
|
|
779
|
+
<el-col :span="6">
|
|
780
|
+
<el-color-picker v-model="color_danger"></el-color-picker>
|
|
781
|
+
</el-col>
|
|
782
|
+
<el-col :span="18">
|
|
783
|
+
<el-input v-model="color_danger"></el-input>
|
|
784
|
+
</el-col>
|
|
785
|
+
</el-row>
|
|
786
|
+
|
|
787
|
+
<el-row>
|
|
788
|
+
<p>color-info 信息题色</p>
|
|
789
|
+
<el-col :span="6">
|
|
790
|
+
<el-color-picker v-model="color_info"></el-color-picker>
|
|
791
|
+
</el-col>
|
|
792
|
+
<el-col :span="18">
|
|
793
|
+
<el-input v-model="color_info"></el-input>
|
|
794
|
+
</el-col>
|
|
795
|
+
</el-row>
|
|
796
|
+
|
|
797
|
+
<el-row>
|
|
798
|
+
<p>color-text-primary 主要文字颜色</p>
|
|
799
|
+
<el-col :span="6">
|
|
800
|
+
<el-color-picker v-model="color_text_primary"></el-color-picker>
|
|
801
|
+
</el-col>
|
|
802
|
+
<el-col :span="18">
|
|
803
|
+
<el-input v-model="color_text_primary"></el-input>
|
|
804
|
+
</el-col>
|
|
805
|
+
</el-row>
|
|
806
|
+
|
|
807
|
+
<el-row>
|
|
808
|
+
<p>color-text-regular 常规文字颜色</p>
|
|
809
|
+
<el-col :span="6">
|
|
810
|
+
<el-color-picker v-model="color_text_regular"></el-color-picker>
|
|
811
|
+
</el-col>
|
|
812
|
+
<el-col :span="18">
|
|
813
|
+
<el-input v-model="color_text_regular"></el-input>
|
|
814
|
+
</el-col>
|
|
815
|
+
</el-row>
|
|
816
|
+
|
|
817
|
+
<el-row>
|
|
818
|
+
<p>color-text-secondary 次要文字颜色</p>
|
|
819
|
+
<el-col :span="6">
|
|
820
|
+
<el-color-picker v-model="color_text_secondary"></el-color-picker>
|
|
821
|
+
</el-col>
|
|
822
|
+
<el-col :span="18">
|
|
823
|
+
<el-input v-model="color_text_secondary"></el-input>
|
|
824
|
+
</el-col>
|
|
825
|
+
</el-row>
|
|
826
|
+
|
|
827
|
+
<el-row>
|
|
828
|
+
<p>color-text-placeholder 占位文字颜色</p>
|
|
829
|
+
<el-col :span="6">
|
|
830
|
+
<el-color-picker v-model="color_text_placeholder"></el-color-picker>
|
|
831
|
+
</el-col>
|
|
832
|
+
<el-col :span="18">
|
|
833
|
+
<el-input v-model="color_text_placeholder"></el-input>
|
|
834
|
+
</el-col>
|
|
835
|
+
</el-row>
|
|
836
|
+
|
|
837
|
+
<el-row>
|
|
838
|
+
<p>border-color-base 一级边框颜色</p>
|
|
839
|
+
<el-col :span="6">
|
|
840
|
+
<el-color-picker v-model="border_color_base"></el-color-picker>
|
|
841
|
+
</el-col>
|
|
842
|
+
<el-col :span="18">
|
|
843
|
+
<el-input v-model="border_color_base"></el-input>
|
|
844
|
+
</el-col>
|
|
845
|
+
</el-row>
|
|
846
|
+
|
|
847
|
+
<el-row>
|
|
848
|
+
<p>border-color-light 二级边框颜色</p>
|
|
849
|
+
<el-col :span="6">
|
|
850
|
+
<el-color-picker v-model="border_color_light"></el-color-picker>
|
|
851
|
+
</el-col>
|
|
852
|
+
<el-col :span="18">
|
|
853
|
+
<el-input v-model="border_color_light"></el-input>
|
|
854
|
+
</el-col>
|
|
855
|
+
</el-row>
|
|
856
|
+
|
|
857
|
+
<el-row>
|
|
858
|
+
<p>border-color-lighter 三级边框颜色</p>
|
|
859
|
+
<el-col :span="6">
|
|
860
|
+
<el-color-picker v-model="border_color_lighter"></el-color-picker>
|
|
861
|
+
</el-col>
|
|
862
|
+
<el-col :span="18">
|
|
863
|
+
<el-input v-model="border_color_lighter"></el-input>
|
|
864
|
+
</el-col>
|
|
865
|
+
</el-row>
|
|
866
|
+
|
|
867
|
+
<el-row>
|
|
868
|
+
<p>border-color-xlight 四级边框颜色</p>
|
|
869
|
+
<el-col :span="6">
|
|
870
|
+
<el-color-picker v-model="border_color_extra_light"></el-color-picker>
|
|
871
|
+
</el-col>
|
|
872
|
+
<el-col :span="18">
|
|
873
|
+
<el-input v-model="border_color_extra_light"></el-input>
|
|
874
|
+
</el-col>
|
|
875
|
+
</el-row>
|
|
876
|
+
</el-card>
|
|
877
|
+
</div>
|
|
878
|
+
|
|
879
|
+
<el-dialog :visible.sync="visible" title="复制CSS变量">
|
|
880
|
+
<pre>{{ cssVariables}}</pre>
|
|
881
|
+
<small>使用方式：将上面的代码通过style属性添加到项目的html标签上</small>
|
|
882
|
+
</el-dialog>
|
|
883
|
+
</el-aside>
|
|
884
|
+
</el-container>
|
|
885
|
+
</div>
|
|
886
|
+
</body>
|
|
887
|
+
<!-- import Vue before Element -->
|
|
888
|
+
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
|
|
889
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
890
|
+
<!-- import JavaScript -->
|
|
891
|
+
<script src="https://unpkg.com/element-plus/lib/index.js"></script>
|
|
892
|
+
<script>
|
|
893
|
+
const original = {
|
|
894
|
+
color_primary: '#409EFF',
|
|
895
|
+
color_success: '#67C23A',
|
|
896
|
+
color_warning: '#E6A23C',
|
|
897
|
+
color_danger: '#F56C6C',
|
|
898
|
+
color_info: '#909399',
|
|
899
|
+
color_white: '#FFFFFF',
|
|
900
|
+
color_black: '#000000',
|
|
901
|
+
color_text_primary: '#303133',
|
|
902
|
+
color_text_regular: '#606266',
|
|
903
|
+
color_text_secondary: '#909399',
|
|
904
|
+
color_text_placeholder: '#C0C4CC',
|
|
905
|
+
border_color_base: '#DCDFE6',
|
|
906
|
+
border_color_light: '#E4E7ED',
|
|
907
|
+
border_color_lighter: '#EBEEF5',
|
|
908
|
+
border_color_extra_light: '#F2F6FC',
|
|
909
|
+
font_size_extra_large: '20px',
|
|
910
|
+
font_size_large: '18px',
|
|
911
|
+
font_size_medium: '16px',
|
|
912
|
+
font_size_base: '14px',
|
|
913
|
+
font_size_small: '13px',
|
|
914
|
+
font_size_extra_small: '12px',
|
|
915
|
+
font_weight_primary: 500,
|
|
916
|
+
font_weight_secondary: 100,
|
|
917
|
+
font_line_height_primary: '24px',
|
|
918
|
+
font_line_height_secondary: '16px',
|
|
919
|
+
};
|
|
920
|
+
|
|
921
|
+
Vue.config.devtools = true;
|
|
922
|
+
Vue.createApp({
|
|
923
|
+
data() {
|
|
924
|
+
return {
|
|
925
|
+
global: {},
|
|
926
|
+
colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'],
|
|
927
|
+
color_primary: '',
|
|
928
|
+
color_success: '',
|
|
929
|
+
color_warning: '',
|
|
930
|
+
color_danger: '',
|
|
931
|
+
color_info: '',
|
|
932
|
+
color_white: '',
|
|
933
|
+
color_black: '',
|
|
934
|
+
color_text_primary: '',
|
|
935
|
+
color_text_regular: '',
|
|
936
|
+
color_text_secondary: '',
|
|
937
|
+
color_text_placeholder: '',
|
|
938
|
+
border_color_base: '',
|
|
939
|
+
border_color_light: '',
|
|
940
|
+
border_color_lighter: '',
|
|
941
|
+
border_color_extra_light: '',
|
|
942
|
+
font_size_extra_large: '',
|
|
943
|
+
font_size_large: '',
|
|
944
|
+
font_size_medium: '',
|
|
945
|
+
font_size_base: '',
|
|
946
|
+
font_size_small: '',
|
|
947
|
+
font_size_extra_small: '',
|
|
948
|
+
font_weight_primary: 0,
|
|
949
|
+
font_weight_secondary: 0,
|
|
950
|
+
font_line_height_primary: '',
|
|
951
|
+
font_line_height_secondary: '',
|
|
952
|
+
radio: '1',
|
|
953
|
+
radio1: 'Washington',
|
|
954
|
+
radio2: '1',
|
|
955
|
+
checked: true,
|
|
956
|
+
checked1: ['Shanghai'],
|
|
957
|
+
checked2: true,
|
|
958
|
+
input: 'Element',
|
|
959
|
+
inputNumber: 1,
|
|
960
|
+
treeData: [
|
|
961
|
+
{
|
|
962
|
+
label: '一级 1',
|
|
963
|
+
children: [
|
|
964
|
+
{
|
|
965
|
+
label: '二级 1-1',
|
|
966
|
+
children: [
|
|
967
|
+
{
|
|
968
|
+
label: '三级 1-1-1',
|
|
969
|
+
},
|
|
970
|
+
],
|
|
971
|
+
},
|
|
972
|
+
],
|
|
973
|
+
},
|
|
974
|
+
{
|
|
975
|
+
label: '一级 2',
|
|
976
|
+
children: [
|
|
977
|
+
{
|
|
978
|
+
label: '二级 2-1',
|
|
979
|
+
children: [
|
|
980
|
+
{
|
|
981
|
+
label: '三级 2-1-1',
|
|
982
|
+
},
|
|
983
|
+
],
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
label: '二级 2-2',
|
|
987
|
+
children: [
|
|
988
|
+
{
|
|
989
|
+
label: '三级 2-2-1',
|
|
990
|
+
},
|
|
991
|
+
],
|
|
992
|
+
},
|
|
993
|
+
],
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
label: '一级 3',
|
|
997
|
+
children: [
|
|
998
|
+
{
|
|
999
|
+
label: '二级 3-1',
|
|
1000
|
+
children: [
|
|
1001
|
+
{
|
|
1002
|
+
label: '三级 3-1-1',
|
|
1003
|
+
},
|
|
1004
|
+
],
|
|
1005
|
+
},
|
|
1006
|
+
{
|
|
1007
|
+
label: '二级 3-2',
|
|
1008
|
+
children: [
|
|
1009
|
+
{
|
|
1010
|
+
label: '三级 3-2-1',
|
|
1011
|
+
},
|
|
1012
|
+
],
|
|
1013
|
+
},
|
|
1014
|
+
],
|
|
1015
|
+
},
|
|
1016
|
+
],
|
|
1017
|
+
selectOptions: [
|
|
1018
|
+
{
|
|
1019
|
+
value: 'Option1',
|
|
1020
|
+
label: 'Option1',
|
|
1021
|
+
},
|
|
1022
|
+
{
|
|
1023
|
+
value: 'Option2',
|
|
1024
|
+
label: 'Option2',
|
|
1025
|
+
},
|
|
1026
|
+
{
|
|
1027
|
+
value: 'Option3',
|
|
1028
|
+
label: 'Option3',
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
value: 'Option4',
|
|
1032
|
+
label: 'Option4',
|
|
1033
|
+
},
|
|
1034
|
+
{
|
|
1035
|
+
value: 'Option5',
|
|
1036
|
+
label: 'Option5',
|
|
1037
|
+
},
|
|
1038
|
+
],
|
|
1039
|
+
selectValue: '',
|
|
1040
|
+
cascadeOptions: [
|
|
1041
|
+
{
|
|
1042
|
+
value: 'guide',
|
|
1043
|
+
label: 'Guide',
|
|
1044
|
+
children: [
|
|
1045
|
+
{
|
|
1046
|
+
value: 'disciplines',
|
|
1047
|
+
label: 'Disciplines',
|
|
1048
|
+
children: [
|
|
1049
|
+
{
|
|
1050
|
+
value: 'consistency',
|
|
1051
|
+
label: 'Consistency',
|
|
1052
|
+
},
|
|
1053
|
+
{
|
|
1054
|
+
value: 'feedback',
|
|
1055
|
+
label: 'Feedback',
|
|
1056
|
+
},
|
|
1057
|
+
],
|
|
1058
|
+
},
|
|
1059
|
+
],
|
|
1060
|
+
},
|
|
1061
|
+
{
|
|
1062
|
+
value: 'resource',
|
|
1063
|
+
label: 'Resource',
|
|
1064
|
+
children: [
|
|
1065
|
+
{
|
|
1066
|
+
value: 'axure',
|
|
1067
|
+
label: 'Axure Components',
|
|
1068
|
+
},
|
|
1069
|
+
{
|
|
1070
|
+
value: 'sketch',
|
|
1071
|
+
label: 'Sketch Templates',
|
|
1072
|
+
},
|
|
1073
|
+
{
|
|
1074
|
+
value: 'docs',
|
|
1075
|
+
label: 'Design Documentation',
|
|
1076
|
+
},
|
|
1077
|
+
],
|
|
1078
|
+
},
|
|
1079
|
+
],
|
|
1080
|
+
cascaderValue: [],
|
|
1081
|
+
switchValue: true,
|
|
1082
|
+
slider: 28,
|
|
1083
|
+
datePicker: '',
|
|
1084
|
+
rate: null,
|
|
1085
|
+
transferData: (() => {
|
|
1086
|
+
const data = [];
|
|
1087
|
+
for (let i = 1; i <= 15; i++) {
|
|
1088
|
+
data.push({
|
|
1089
|
+
key: i,
|
|
1090
|
+
label: `Option ${i}`,
|
|
1091
|
+
disabled: i % 4 === 0,
|
|
1092
|
+
});
|
|
1093
|
+
}
|
|
1094
|
+
return data;
|
|
1095
|
+
})(),
|
|
1096
|
+
transfer: [1, 4],
|
|
1097
|
+
tableData: [
|
|
1098
|
+
{
|
|
1099
|
+
date: '2016-05-03',
|
|
1100
|
+
name: 'Tom',
|
|
1101
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
1102
|
+
},
|
|
1103
|
+
{
|
|
1104
|
+
date: '2016-05-02',
|
|
1105
|
+
name: 'Tom',
|
|
1106
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
1107
|
+
},
|
|
1108
|
+
{
|
|
1109
|
+
date: '2016-05-04',
|
|
1110
|
+
name: 'Tom',
|
|
1111
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
1112
|
+
},
|
|
1113
|
+
{
|
|
1114
|
+
date: '2016-05-01',
|
|
1115
|
+
name: 'Tom',
|
|
1116
|
+
address: 'No. 189, Grove St, Los Angeles',
|
|
1117
|
+
},
|
|
1118
|
+
],
|
|
1119
|
+
menu: '1',
|
|
1120
|
+
tab: 'first',
|
|
1121
|
+
collapse: ['1'],
|
|
1122
|
+
treeData: [
|
|
1123
|
+
{
|
|
1124
|
+
label: 'Level one 1',
|
|
1125
|
+
children: [
|
|
1126
|
+
{
|
|
1127
|
+
label: 'Level two 1-1',
|
|
1128
|
+
children: [
|
|
1129
|
+
{
|
|
1130
|
+
label: 'Level three 1-1-1',
|
|
1131
|
+
},
|
|
1132
|
+
],
|
|
1133
|
+
},
|
|
1134
|
+
],
|
|
1135
|
+
},
|
|
1136
|
+
{
|
|
1137
|
+
label: 'Level one 2',
|
|
1138
|
+
children: [
|
|
1139
|
+
{
|
|
1140
|
+
label: 'Level two 2-1',
|
|
1141
|
+
children: [
|
|
1142
|
+
{
|
|
1143
|
+
label: 'Level three 2-1-1',
|
|
1144
|
+
},
|
|
1145
|
+
],
|
|
1146
|
+
},
|
|
1147
|
+
{
|
|
1148
|
+
label: 'Level two 2-2',
|
|
1149
|
+
children: [
|
|
1150
|
+
{
|
|
1151
|
+
label: 'Level three 2-2-1',
|
|
1152
|
+
},
|
|
1153
|
+
],
|
|
1154
|
+
},
|
|
1155
|
+
],
|
|
1156
|
+
},
|
|
1157
|
+
{
|
|
1158
|
+
label: 'Level one 3',
|
|
1159
|
+
children: [
|
|
1160
|
+
{
|
|
1161
|
+
label: 'Level two 3-1',
|
|
1162
|
+
children: [
|
|
1163
|
+
{
|
|
1164
|
+
label: 'Level three 3-1-1',
|
|
1165
|
+
},
|
|
1166
|
+
],
|
|
1167
|
+
},
|
|
1168
|
+
{
|
|
1169
|
+
label: 'Level two 3-2',
|
|
1170
|
+
children: [
|
|
1171
|
+
{
|
|
1172
|
+
label: 'Level three 3-2-1',
|
|
1173
|
+
},
|
|
1174
|
+
],
|
|
1175
|
+
},
|
|
1176
|
+
],
|
|
1177
|
+
},
|
|
1178
|
+
],
|
|
1179
|
+
defaultTreeProps: {
|
|
1180
|
+
children: 'children',
|
|
1181
|
+
label: 'label',
|
|
1182
|
+
},
|
|
1183
|
+
avatarData: {
|
|
1184
|
+
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
1185
|
+
},
|
|
1186
|
+
cssVariables: '',
|
|
1187
|
+
visible: false,
|
|
1188
|
+
};
|
|
1189
|
+
},
|
|
1190
|
+
watch: {
|
|
1191
|
+
global: {
|
|
1192
|
+
immediate: true,
|
|
1193
|
+
handler(value) {
|
|
1194
|
+
Object.keys(original).forEach((v) => {
|
|
1195
|
+
const key = `$--${v.replace(/_/g, '-')}`;
|
|
1196
|
+
if (value[key]) {
|
|
1197
|
+
this[v] = value[key];
|
|
1198
|
+
} else {
|
|
1199
|
+
this[v] = original[v];
|
|
1200
|
+
}
|
|
1201
|
+
});
|
|
1202
|
+
},
|
|
1203
|
+
},
|
|
1204
|
+
color_primary(v) {
|
|
1205
|
+
this.setCssVariable('color-primary-base', v);
|
|
1206
|
+
},
|
|
1207
|
+
color_success(v) {
|
|
1208
|
+
this.setCssVariable('color-success-base', v);
|
|
1209
|
+
},
|
|
1210
|
+
color_warning(v) {
|
|
1211
|
+
this.setCssVariable('color-warning-base', v);
|
|
1212
|
+
},
|
|
1213
|
+
color_danger(v) {
|
|
1214
|
+
this.setCssVariable('color-danger-base', v);
|
|
1215
|
+
},
|
|
1216
|
+
color_info(v) {
|
|
1217
|
+
this.setCssVariable('color-info-base', v);
|
|
1218
|
+
},
|
|
1219
|
+
color_text_primary(v) {
|
|
1220
|
+
this.setCssVariable('color-text-dark', v);
|
|
1221
|
+
},
|
|
1222
|
+
color_text_regular(v) {
|
|
1223
|
+
this.setCssVariable('color-text-base', v);
|
|
1224
|
+
},
|
|
1225
|
+
color_text_secondary(v) {
|
|
1226
|
+
this.setCssVariable('color-text-light', v);
|
|
1227
|
+
},
|
|
1228
|
+
color_text_placeholder(v) {
|
|
1229
|
+
this.setCssVariable('color-text-lighter', v);
|
|
1230
|
+
},
|
|
1231
|
+
border_color_base(v) {
|
|
1232
|
+
this.setCssVariable('border-color-base', v);
|
|
1233
|
+
},
|
|
1234
|
+
border_color_light(v) {
|
|
1235
|
+
this.setCssVariable('border-color-light', v);
|
|
1236
|
+
},
|
|
1237
|
+
border_color_lighter(v) {
|
|
1238
|
+
this.setCssVariable('border-color-lighter', v);
|
|
1239
|
+
},
|
|
1240
|
+
border_color_extra_light(v) {
|
|
1241
|
+
this.setCssVariable('border-color-xlight', v);
|
|
1242
|
+
},
|
|
1243
|
+
},
|
|
1244
|
+
methods: {
|
|
1245
|
+
tintColor(a, b) {
|
|
1246
|
+
return tintColor(a, b);
|
|
1247
|
+
},
|
|
1248
|
+
dataProxy(value) {
|
|
1249
|
+
return this[`color_${value.toLowerCase()}`];
|
|
1250
|
+
},
|
|
1251
|
+
setGlobal() {
|
|
1252
|
+
if (window.userThemeConfig) {
|
|
1253
|
+
this.global = window.userThemeConfig.global;
|
|
1254
|
+
}
|
|
1255
|
+
},
|
|
1256
|
+
tintColor(c, tint) {
|
|
1257
|
+
const color = c.replace('#', '');
|
|
1258
|
+
let red = parseInt(color.slice(0, 2), 16);
|
|
1259
|
+
let green = parseInt(color.slice(2, 4), 16);
|
|
1260
|
+
let blue = parseInt(color.slice(4, 6), 16);
|
|
1261
|
+
|
|
1262
|
+
if (tint === 0) {
|
|
1263
|
+
// when primary color is in its rgb space
|
|
1264
|
+
return [red, green, blue].join(',');
|
|
1265
|
+
} else {
|
|
1266
|
+
red += Math.round(tint * (255 - red));
|
|
1267
|
+
green += Math.round(tint * (255 - green));
|
|
1268
|
+
blue += Math.round(tint * (255 - blue));
|
|
1269
|
+
red = red.toString(16);
|
|
1270
|
+
green = green.toString(16);
|
|
1271
|
+
blue = blue.toString(16);
|
|
1272
|
+
return `#${red}${green}${blue}`;
|
|
1273
|
+
}
|
|
1274
|
+
},
|
|
1275
|
+
hexToHSL(hex) {
|
|
1276
|
+
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
1277
|
+
|
|
1278
|
+
var r = parseInt(result[1], 16);
|
|
1279
|
+
var g = parseInt(result[2], 16);
|
|
1280
|
+
var b = parseInt(result[3], 16);
|
|
1281
|
+
|
|
1282
|
+
(r /= 255), (g /= 255), (b /= 255);
|
|
1283
|
+
var max = Math.max(r, g, b),
|
|
1284
|
+
min = Math.min(r, g, b);
|
|
1285
|
+
var h,
|
|
1286
|
+
s,
|
|
1287
|
+
l = (max + min) / 2;
|
|
1288
|
+
|
|
1289
|
+
if (max == min) {
|
|
1290
|
+
h = s = 0; // achromatic
|
|
1291
|
+
} else {
|
|
1292
|
+
var d = max - min;
|
|
1293
|
+
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
1294
|
+
switch (max) {
|
|
1295
|
+
case r:
|
|
1296
|
+
h = (g - b) / d + (g < b ? 6 : 0);
|
|
1297
|
+
break;
|
|
1298
|
+
case g:
|
|
1299
|
+
h = (b - r) / d + 2;
|
|
1300
|
+
break;
|
|
1301
|
+
case b:
|
|
1302
|
+
h = (r - g) / d + 4;
|
|
1303
|
+
break;
|
|
1304
|
+
}
|
|
1305
|
+
h /= 6;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
s = s * 100;
|
|
1309
|
+
s = Math.round(s);
|
|
1310
|
+
l = l * 100;
|
|
1311
|
+
l = Math.round(l);
|
|
1312
|
+
h = Math.round(360 * h);
|
|
1313
|
+
|
|
1314
|
+
return {
|
|
1315
|
+
h: h,
|
|
1316
|
+
s: s + '%',
|
|
1317
|
+
l: l + '%',
|
|
1318
|
+
};
|
|
1319
|
+
},
|
|
1320
|
+
setCssVariable(key, color) {
|
|
1321
|
+
const hslColor = this.hexToHSL(color);
|
|
1322
|
+
document.documentElement.style.setProperty(`--${key}-h`, hslColor.h);
|
|
1323
|
+
document.documentElement.style.setProperty(`--${key}-s`, hslColor.s);
|
|
1324
|
+
document.documentElement.style.setProperty(`--${key}-l`, hslColor.l);
|
|
1325
|
+
},
|
|
1326
|
+
copyCssVariables() {
|
|
1327
|
+
const cssVariables = document.querySelector('html').getAttribute('style');
|
|
1328
|
+
this.cssVariables = cssVariables ? cssVariables : '没有进行颜色修改，请先修改颜色！';
|
|
1329
|
+
this.visible = true;
|
|
1330
|
+
},
|
|
1331
|
+
},
|
|
1332
|
+
}).mount('#app');
|
|
1333
|
+
</script>
|
|
1334
|
+
</html>
|