Skip to content

Commit 280c1db

Browse files
bin-Kbin-K
committed
docs(button): 完善按钮文档并调整相应组件(changelog-needed)
affects: @ued-plus/components ISSUES CLOSED: none
1 parent d34e620 commit 280c1db

File tree

10 files changed

+308
-122
lines changed

10 files changed

+308
-122
lines changed

‎.stylelintrc.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,6 @@ module.exports = {
1919
'selector-class-pattern': null,
2020
'color-function-notation': null,
2121
'alpha-value-notation': null,
22+
'color-hex-length': null,
2223
},
2324
}

‎packages/components/src/button/styles/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
text-align: center;
1313
white-space: nowrap;
1414
cursor: pointer;
15-
background: var(--ued-button-bg-color, var(--ued-color-white));
15+
background: var(--ued-button-bg-color, var(--ued-fill-color-blank));
1616
border: 1px solid var(--ued-button-border-color, var(--ued-border-color));
1717
border-radius: var(--ued-border-radius-base);
1818
outline: none;

‎packages/theme/common/var.scss‎

Lines changed: 83 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
:root {
2+
color-scheme: light;
3+
24
--ued-color-white: #fff;
35
--ued-color-black: #000;
4-
--ued-color-primary: #9a16f8;
5-
--ued-color-primary-light-1: #a127f8;
6-
--ued-color-primary-light-2: #a939f8;
7-
--ued-color-primary-light-3: #b04af8;
8-
--ued-color-primary-light-4: #b75bf8;
9-
--ued-color-primary-light-5: #bf6df8;
10-
--ued-color-primary-light-6: #c67ef8;
11-
--ued-color-primary-light-7: #cd8ff8;
12-
--ued-color-primary-light-8: #d5a1f8;
13-
--ued-color-primary-light-9: #e3c4f8;
14-
--ued-color-primary-dark-2: #8105f6;
6+
--ued-color-primary: #409eff;
7+
--ued-color-primary-light-3: #79bbff;
8+
--ued-color-primary-light-5: #a0cfff;
9+
--ued-color-primary-light-7: #c6e2ff;
10+
--ued-color-primary-light-8: #d9ecff;
11+
--ued-color-primary-light-9: #ecf5ff;
12+
--ued-color-primary-dark-2: #337ecc;
1513
--ued-color-success: #67c23a;
1614
--ued-color-success-light-3: #95d475;
1715
--ued-color-success-light-5: #b3e19d;
@@ -106,3 +104,77 @@
106104
--ued-transition-box-shadow: box-shadow var(--ued-transition-duration-fast) var(--ued-transition-function-ease-in-out-bezier);
107105
--ued-transition-color: color var(--ued-transition-duration-fast) var(--ued-transition-function-ease-in-out-bezier);
108106
}
107+
108+
html.dark {
109+
color-scheme: dark;
110+
111+
--ued-color-primary: #409eff;
112+
--ued-color-primary-light-3: #3375b9;
113+
--ued-color-primary-light-5: #2a598a;
114+
--ued-color-primary-light-7: #213d5b;
115+
--ued-color-primary-light-8: #1d3043;
116+
--ued-color-primary-light-9: #18222c;
117+
--ued-color-primary-dark-2: #66b1ff;
118+
--ued-color-success: #67c23a;
119+
--ued-color-success-light-3: #4e8e2f;
120+
--ued-color-success-light-5: #3e6b27;
121+
--ued-color-success-light-7: #2d481f;
122+
--ued-color-success-light-8: #25371c;
123+
--ued-color-success-light-9: #1c2518;
124+
--ued-color-success-dark-2: #85ce61;
125+
--ued-color-warning: #e6a23c;
126+
--ued-color-warning-light-3: #a77730;
127+
--ued-color-warning-light-5: #7d5b28;
128+
--ued-color-warning-light-7: #533f20;
129+
--ued-color-warning-light-8: #3e301c;
130+
--ued-color-warning-light-9: #292218;
131+
--ued-color-warning-dark-2: #ebb563;
132+
--ued-color-danger: #f56c6c;
133+
--ued-color-danger-light-3: #b25252;
134+
--ued-color-danger-light-5: #854040;
135+
--ued-color-danger-light-7: #582e2e;
136+
--ued-color-danger-light-8: #412626;
137+
--ued-color-danger-light-9: #2b1d1d;
138+
--ued-color-danger-dark-2: #f78989;
139+
--ued-color-error: #f56c6c;
140+
--ued-color-error-light-3: #b25252;
141+
--ued-color-error-light-5: #854040;
142+
--ued-color-error-light-7: #582e2e;
143+
--ued-color-error-light-8: #412626;
144+
--ued-color-error-light-9: #2b1d1d;
145+
--ued-color-error-dark-2: #f78989;
146+
--ued-color-info: #909399;
147+
--ued-color-info-light-3: #6b6d71;
148+
--ued-color-info-light-5: #525457;
149+
--ued-color-info-light-7: #393a3c;
150+
--ued-color-info-light-8: #2d2d2f;
151+
--ued-color-info-light-9: #202121;
152+
--ued-color-info-dark-2: #a6a9ad;
153+
--ued-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
154+
--ued-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
155+
--ued-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
156+
--ued-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
157+
--ued-bg-color-page: #0a0a0a;
158+
--ued-bg-color: #141414;
159+
--ued-bg-color-overlay: #1d1e1f;
160+
--ued-text-color-primary: #e5eaf3;
161+
--ued-text-color-regular: #cfd3dc;
162+
--ued-text-color-secondary: #a3a6ad;
163+
--ued-text-color-placeholder: #8d9095;
164+
--ued-text-color-disabled: #6c6e72;
165+
--ued-border-color-darker: #636466;
166+
--ued-border-color-dark: #58585b;
167+
--ued-border-color: #4c4d4f;
168+
--ued-border-color-light: #414243;
169+
--ued-border-color-lighter: #363637;
170+
--ued-border-color-extra-light: #2b2b2c;
171+
--ued-fill-color-darker: #424243;
172+
--ued-fill-color-dark: #39393a;
173+
--ued-fill-color: #303030;
174+
--ued-fill-color-light: #262727;
175+
--ued-fill-color-lighter: #1d1d1d;
176+
--ued-fill-color-extra-light: #191919;
177+
--ued-fill-color-blank: transparent;
178+
--ued-mask-color: rgba(0, 0, 0, 0.8);
179+
--ued-mask-color-extra-light: rgba(0, 0, 0, 0.3);
180+
}

‎play/app.vue‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,53 @@
11
<template>
2-
<router-link v-for="item in link" :key="item" :to="'/' + item">{{ item }}</router-link>
3-
<router-view></router-view>
2+
<div class="ued">
3+
<div class="catalog">
4+
<router-link v-for="item in link" :key="item" :to="'/' + item">{{ item }}</router-link>
5+
</div>
6+
<div class="content">
7+
<router-view></router-view>
8+
</div>
9+
</div>
410
</template>
511

612
<script lang="ts" setup>
713
import { ref } from 'vue'
814
9-
const link = ref(['button'])
15+
const link = ref(['Button'])
1016
</script>
17+
18+
<style>
19+
body {
20+
margin: 0;
21+
}
22+
</style>
23+
<style lang="scss" scoped>
24+
.ued {
25+
display: flex;
26+
padding: 10px;
27+
overflow: hidden;
28+
height: calc(100vh - 20px);
29+
.catalog {
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
overflow: auto;
34+
width: 15%;
35+
height: 100%;
36+
37+
a {
38+
padding: 5px;
39+
font-size: 16px;
40+
text-decoration: none;
41+
color: rgba(56, 56, 56, 1);
42+
}
43+
.router-link-active {
44+
color: #9a16f8;
45+
}
46+
}
47+
.content {
48+
overflow: auto;
49+
width: 85%;
50+
height: 100%;
51+
}
52+
}
53+
</style>

‎play/components/button/basic/index.vue‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<template>
2+
<h2>基础用法</h2>
3+
<div class="button-content button-basic">
4+
<div class="button-basic-defalut">
5+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type">
6+
{{ item.text }}
7+
</ued-button>
8+
</div>
9+
<div class="button-basic-plain">
10+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" plain>
11+
{{ item.text }}
12+
</ued-button>
13+
</div>
14+
<div class="button-basic-round">
15+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" round>
16+
{{ item.text }}
17+
</ued-button>
18+
</div>
19+
<div class="button-basic-circle">
20+
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" circle />
21+
</div>
22+
</div>
23+
</template>
24+
<script lang="ts" setup>
25+
defineProps({
26+
buttonType: {
27+
type: Object,
28+
default: () => ({}),
29+
},
30+
})
31+
</script>
32+
33+
<style scoped>
34+
.button-basic > div {
35+
margin-bottom: 15px;
36+
}
37+
38+
.button-basic > div:last-child {
39+
margin: 0;
40+
}
41+
</style>

‎play/components/button/disable/index.vue‎

Whitespace-only changes.

‎play/components/button/index.vue‎

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
<template>
22
<div class="button">
3-
<div class="button-base">
4-
<h1>基础按钮</h1>
5-
<div class="button-base-show">
6-
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type">
7-
{{ item.text }}
8-
</ued-button>
9-
</div>
10-
<div class="button-base-show">
11-
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" plain>
12-
{{ item.text }}
13-
</ued-button>
14-
</div>
15-
<div class="button-base-show">
16-
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" round>
17-
{{ item.text }}
18-
</ued-button>
19-
</div>
20-
<div class="button-base-show">
21-
<ued-button v-for="item in buttonType" :key="item.type" :type="item.type" circle />
22-
</div>
23-
</div>
3+
<ButtonBasic :button-type="buttonType" />
244
<div class="button-disabled">
255
<h1>禁用状态</h1>
266
<div class="button-disabled-show">
@@ -112,8 +92,10 @@
11292
</template>
11393

11494
<script lang="ts" setup>
115-
import { ref } from 'vue'
116-
import { UedButton } from '@ued-plus/components'
95+
import { ref, defineAsyncComponent } from 'vue'
96+
97+
const ButtonBasic = defineAsyncComponent(() => import('./basic/index.vue'))
98+
11799
const buttonType = ref([
118100
{ type: '', text: '默认按钮' },
119101
{ type: 'primary', text: '主要按钮' },
@@ -123,6 +105,17 @@ const buttonType = ref([
123105
{ type: 'info', text: '信息按钮' },
124106
])
125107
</script>
108+
<style lang="scss">
109+
.button {
110+
&-content {
111+
display: flex;
112+
flex-direction: column;
113+
border: 1px solid #e4e7ed;
114+
padding: 30px;
115+
border-radius: 5px;
116+
}
117+
}
118+
</style>
126119
<style lang="scss" scoped>
127120
.button {
128121
&-base,

‎play/main.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { createApp } from 'vue'
22
import App from './app.vue'
33
import router from './router'
4+
import Ued from '@ued-plus/components'
45

56
const app = createApp(App)
6-
app.use(router).mount('#app')
7+
app.use(router).use(Ued).mount('#app')

0 commit comments

Comments
 (0)