Skip to content

Commit 9294821

Browse files
jxhhdxkagol
jxhhdx
authored and
kagol
committed
docs: standardized devui style
1 parent d8b34fb commit 9294821

File tree

16 files changed

+216
-166
lines changed

16 files changed

+216
-166
lines changed

‎packages/devui-vue/devui/search/src/search-types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export type IconPosition = 'right' | 'left';
66
export const searchProps = {
77
size: {
88
type: String as PropType<Size>,
9-
default: '',
9+
default: 'md',
1010
},
1111
placeholder: {
1212
type: String,

‎packages/devui-vue/devui/select/src/select.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22

33
$border-change-time: 300ms;
44
$border-change-function: cubic-bezier(0.645, 0.045, 0.355, 1);
5-
$select-input-height-sm: 24px;
6-
$select-input-height-md: 28px;
7-
$select-input-height-lg: 44px;
5+
$select-input-height-sm: $devui-size-sm;
6+
$select-input-height-md: $devui-size-md;
7+
$select-input-height-lg: $devui-size-lg;
88
$select-arrow-width: 28px;
99
$transition-base-time: 0.25s;
1010
$select-dropdown-max-height: 300px;
@@ -54,7 +54,7 @@ $select-item-min-height: 36px;
5454
.#{$devui-prefix}-tag {
5555
margin: 2px 0 2px 4px;
5656

57-
.devui-tag__item.devui-tag--sm {
57+
.#{$devui-prefix}-tag__item.#{$devui-prefix}-tag--sm {
5858
height: 18px;
5959
line-height: 16px;
6060
}

‎packages/devui-vue/docs/.vitepress/devui-theme/styles/demo-block.scss‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,94 @@
2626
}
2727
}
2828
}
29+
30+
.ml {
31+
&-0 {
32+
margin-left: 4px;
33+
}
34+
35+
&-1 {
36+
margin-left: 8px;
37+
}
38+
39+
&-2 {
40+
margin-left: 12px;
41+
}
42+
43+
&-3 {
44+
margin-left: 16px;
45+
}
46+
47+
&-4 {
48+
margin-left: 24px;
49+
}
50+
}
51+
52+
.mb {
53+
&-0 {
54+
margin-bottom: 4px;
55+
}
56+
57+
&-1 {
58+
margin-bottom: 8px;
59+
}
60+
61+
&-2 {
62+
margin-bottom: 12px;
63+
}
64+
65+
&-3 {
66+
margin-bottom: 16px;
67+
}
68+
69+
&-4 {
70+
margin-bottom: 24px;
71+
}
72+
}
73+
74+
.mr {
75+
&-0 {
76+
margin-right: 4px;
77+
}
78+
79+
&-1 {
80+
margin-right: 8px;
81+
}
82+
83+
&-2 {
84+
margin-right: 12px;
85+
}
86+
87+
&-3 {
88+
margin-right: 16px;
89+
}
90+
91+
&-4 {
92+
margin-right: 24px;
93+
}
94+
}
95+
96+
.mt {
97+
&-0 {
98+
margin-top: 4px;
99+
}
100+
101+
&-1 {
102+
margin-top: 8px;
103+
}
104+
105+
&-2 {
106+
margin-top: 12px;
107+
}
108+
109+
&-3 {
110+
margin-top: 16px;
111+
}
112+
113+
&-4 {
114+
margin-top: 24px;
115+
}
116+
}
29117
}
30118

31119
.demo-block-control {

‎packages/devui-vue/docs/components/alert/index.md‎

Lines changed: 24 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,14 @@
1414

1515
```vue
1616
<template>
17-
<div class="alert-demo-1">
18-
<d-alert type="success" :closeable="false">success</d-alert>
19-
<d-alert type="danger" :closeable="false">danger</d-alert>
20-
<d-alert type="warning" :closeable="false">warning</d-alert>
21-
<d-alert type="info" :closeable="false">info</d-alert>
22-
<d-alert type="simple" :closeable="false">simple</d-alert>
17+
<div>
18+
<d-alert class="mb-2" type="success" :closeable="false">success</d-alert>
19+
<d-alert class="mb-2" type="danger" :closeable="false">danger</d-alert>
20+
<d-alert class="mb-2" type="warning" :closeable="false">warning</d-alert>
21+
<d-alert class="mb-2" type="info" :closeable="false">info</d-alert>
22+
<d-alert class="mb-2" type="simple" :closeable="false">simple</d-alert>
2323
</div>
2424
</template>
25-
<style>
26-
.alert-demo-1 .devui-alert {
27-
margin-bottom: 20px;
28-
}
29-
</style>
3025
```
3126

3227
:::
@@ -39,12 +34,12 @@
3934

4035
```vue
4136
<template>
42-
<div class="alert-demo-2">
43-
<d-alert type="success" @close="handleClose">success</d-alert>
44-
<d-alert type="danger" @close="handleClose">danger</d-alert>
45-
<d-alert type="warning" @close="handleClose">warning</d-alert>
46-
<d-alert type="info" @close="handleClose">info</d-alert>
47-
<d-alert type="simple" @close="handleClose">simple</d-alert>
37+
<div>
38+
<d-alert class="mb-2" type="success" @close="handleClose">success</d-alert>
39+
<d-alert class="mb-2" type="danger" @close="handleClose">danger</d-alert>
40+
<d-alert class="mb-2" type="warning" @close="handleClose">warning</d-alert>
41+
<d-alert class="mb-2" type="info" @close="handleClose">info</d-alert>
42+
<d-alert class="mb-2" type="simple" @close="handleClose">simple</d-alert>
4843
</div>
4944
</template>
5045
<script>
@@ -59,11 +54,6 @@ export default {
5954
},
6055
};
6156
</script>
62-
<style>
63-
.alert-demo-2 .devui-alert {
64-
margin-bottom: 20px;
65-
}
66-
</style>
6757
```
6858

6959
:::
@@ -76,19 +66,14 @@ export default {
7666

7767
```vue
7868
<template>
79-
<div class="alert-demo-3">
80-
<d-alert type="success" :show-icon="false">success</d-alert>
81-
<d-alert type="danger" :show-icon="false">danger</d-alert>
82-
<d-alert type="warning" :show-icon="false">warning</d-alert>
83-
<d-alert type="info" :show-icon="false">info</d-alert>
84-
<d-alert type="simple" :show-icon="false">simple</d-alert>
69+
<div>
70+
<d-alert class="mb-2" type="success" :show-icon="false">success</d-alert>
71+
<d-alert class="mb-2" type="danger" :show-icon="false">danger</d-alert>
72+
<d-alert class="mb-2" type="warning" :show-icon="false">warning</d-alert>
73+
<d-alert class="mb-2" type="info" :show-icon="false">info</d-alert>
74+
<d-alert class="mb-2" type="simple" :show-icon="false">simple</d-alert>
8575
</div>
8676
</template>
87-
<style>
88-
.alert-demo-3 .devui-alert {
89-
margin-bottom: 20px;
90-
}
91-
</style>
9277
```
9378

9479
:::
@@ -99,19 +84,14 @@ export default {
9984

10085
```vue
10186
<template>
102-
<div class="alert-demo-3">
103-
<d-alert type="success" center>success</d-alert>
104-
<d-alert type="danger" center>danger</d-alert>
105-
<d-alert type="warning" center>warning</d-alert>
106-
<d-alert type="info" center>info</d-alert>
107-
<d-alert type="simple" center>simple</d-alert>
87+
<div>
88+
<d-alert class="mb-2" type="success" center>success</d-alert>
89+
<d-alert class="mb-2" type="danger" center>danger</d-alert>
90+
<d-alert class="mb-2" type="warning" center>warning</d-alert>
91+
<d-alert class="mb-2" type="info" center>info</d-alert>
92+
<d-alert class="mb-2" type="simple" center>simple</d-alert>
10893
</div>
10994
</template>
110-
<style>
111-
.alert-demo-3 .devui-alert {
112-
margin-bottom: 20px;
113-
}
114-
</style>
11595
```
11696

11797
:::

‎packages/devui-vue/docs/components/auto-complete/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,12 +81,12 @@ export default defineComponent({
8181

8282
```vue
8383
<template>
84-
<h4>Small</h4>
85-
<d-auto-complete size="sm" :source="source" v-model="value1" :width="420"> </d-auto-complete>
86-
<h4>Middle</h4>
87-
<d-auto-complete :source="source" v-model="value2" :width="420"> </d-auto-complete>
88-
<h4>Large</h4>
89-
<d-auto-complete size="lg" :source="source" v-model="value3" :width="420"> </d-auto-complete>
84+
<div class="mb-0">Small</div>
85+
<d-auto-complete class="mb-2" size="sm" :source="source" v-model="value1" :width="420"> </d-auto-complete>
86+
<div class="mb-0">Middle</div>
87+
<d-auto-complete class="mb-2" :source="source" v-model="value2" :width="420"> </d-auto-complete>
88+
<div class="mb-0">Large</div>
89+
<d-auto-complete class="mb-2" size="lg" :source="source" v-model="value3" :width="420"> </d-auto-complete>
9090
</template>
9191
9292
<script>

‎packages/devui-vue/docs/components/cascader/index.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313

1414
```vue
1515
<template>
16-
<h4>hover mode</h4>
17-
<d-cascader :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
18-
<h4>click mode</h4>
19-
<d-cascader :options="options" v-model="value" showPath trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
20-
<h4>data empty</h4>
21-
<d-cascader :options="[]" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
22-
<h4>disabled</h4>
23-
<d-cascader :options="[]" disabled trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
16+
<div class="mb-0">hover mode</div>
17+
<d-cascader class="mb-2" :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
18+
<div class="mb-0">click mode</div>
19+
<d-cascader class="mb-2" :options="options" v-model="value" showPath trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
20+
<div class="mb-0">data empty</div>
21+
<d-cascader class="mb-2" :options="[]" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
22+
<div class="mb-0">disabled</div>
23+
<d-cascader class="mb-2" :options="[]" disabled trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
2424
</template>
2525
<script>
2626
import { defineComponent, reactive, ref } from 'vue';
@@ -129,7 +129,7 @@ export default defineComponent({
129129

130130
```vue
131131
<template>
132-
<d-cascader v-model="value" :options="options" width="fit-content">
132+
<d-cascader class="mb-2" v-model="value" :options="options" width="fit-content">
133133
<template #host>
134134
<d-button>请选择</d-button>
135135
</template>
@@ -254,6 +254,7 @@ export default defineComponent({
254254
:debounce="500"
255255
:before-filter="beforeFilter"
256256
@change="changeFun"
257+
class="mb-2"
257258
></d-cascader>
258259
<div>选择的value值：{{ value1 }}</div>
259260
</template>

‎packages/devui-vue/docs/components/date-picker/index.md‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
```vue
1414
1515
<template>
16-
<p>选中的日期： {{eventValue}}</p>
16+
<div class="mb-2">选中的日期： {{eventValue}}</div>
1717
<d-datepicker :selected-date-change="handleEventValue" />
1818
</template>
1919
@@ -55,12 +55,12 @@ export default defineComponent({
5555
```vue
5656
5757
<template>
58-
<p>开启 auto-close</p>
59-
<d-datepicker auto-close class="mb20" />
58+
<div class="mb-2">开启 auto-close</div>
59+
<d-datepicker auto-close class="mb-1" />
6060
<d-datepicker :auto-close="true" />
6161
62-
<p>关闭 auto-close</p>
63-
<d-datepicker class="mb20" />
62+
<div class="mb-2 mt-3">关闭 auto-close</div>
63+
<d-datepicker class="mb-1" />
6464
<d-datepicker :auto-close="false" />
6565
</template>
6666
@@ -89,12 +89,12 @@ export default defineComponent({
8989
```vue
9090
9191
<template>
92-
<p>开启 range</p>
93-
<d-datepicker range class="mb20" />
92+
<div class="mb-2">开启 range</div>
93+
<d-datepicker range class="mb-1" />
9494
<d-datepicker :range="true" />
9595
96-
<p>关闭 range</p>
97-
<d-datepicker class="mb20" />
96+
<div class="mb-2 mt-3">关闭 range</div>
97+
<d-datepicker class="mb-1" />
9898
<d-datepicker :range="false" />
9999
</template>
100100
@@ -123,7 +123,7 @@ export default defineComponent({
123123
```vue
124124
125125
<template>
126-
<d-datepicker format="yyyy-MM-dd hh:mm:ss" class="mb20" />
126+
<d-datepicker format="yyyy-MM-dd hh:mm:ss" class="mb-1" />
127127
<d-datepicker format="yy-MM-dd" range />
128128
</template>
129129
@@ -152,8 +152,7 @@ export default defineComponent({
152152
```vue
153153
154154
<template>
155-
<d-input v-model="splitterText" :max-length="1" class="mb20 wh200"></d-input>
156-
<p></p>
155+
<d-input v-model="splitterText" :max-length="1" class="mb-1 wh200"></d-input>
157156
<d-datepicker range :range-spliter="splitterText" />
158157
</template>
159158

‎packages/devui-vue/docs/components/dropdown/index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default defineComponent({
7575
</div>
7676
</div>
7777
<d-dropdown :visible="isOpen" :trigger="trigger" :position="position" align="start" @toggle="handleToggle">
78-
<d-button>More</d-button>
78+
<d-button class="mt-1">More</d-button>
7979
<template #menu>
8080
<ul class="list-menu">
8181
<li class="menu-item">Item 1</li>
@@ -126,7 +126,7 @@ export default defineComponent({
126126
</div>
127127
</div>
128128
<d-dropdown :close-scope="closeScope" :position="position" align="start" style="width: 100px;">
129-
<d-button>More</d-button>
129+
<d-button class="mt-1">More</d-button>
130130
<template #menu>
131131
<ul class="list-menu">
132132
<li class="menu-item">Item 1</li>

0 commit comments

Comments
 (0)