bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

一大波组件尺寸调整

master
yutent 2023-11-29 12:21:49 +08:00
parent d111e67efc
commit 08a6bb043d
5 changed files with 38 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/base/button.js
View File

@ -123,47 +123,19 @@ class Button extends Component {
`,
// 尺寸
css`
@use 'sass:map';
$sizes: (
s: (
w: 52px,
h: 20px,
f: 12px
),
m: (
w: 72px,
h: 24px,
f: 12px
),
// l 为默认
xl:
(
w: 132px,
h: 36px,
f: 14px
),
xxl: (
w: 160px,
h: 44px,
f: 14px
)
);
:host([size='small']) {
min-width: 72px;
height: 24px;
font-size: 12px;
@loop $s, $v in $sizes {
:host([size='#{$s}']) {
min-width: map.get($v, 'w');
height: map.get($v, 'h');
font-size: map.get($v, 'f');
.icon {
--wc-icon-size: var(--wc-button-icon-size, #{map.get($v, 'f')});
}
}
:host([size='#{$s}'][circle]) {
width: map.get($v, 'h');
height: map.get($v, 'h');
.icon {
--wc-icon-size: 12px;
}
}
:host([size='small'][circle]) {
width: 24px;
height: 24px;
}
:host([dashed]) button {
border-style: dashed;

28
src/base/icon.js
View File

@ -48,28 +48,19 @@ class Icon extends Component {
color: inherit;
fill: currentColor;
&.loading {
animation: load 1.5s linear infinite;
}
circle {
stroke: currentColor;
animation: circle 1.5s ease-in-out infinite;
}
}
$gaps: (
's': 20px,
'm': 24px,
'l': 32px,
'xl': 36px,
'xxl': 44px
);
@loop $k, $v in $gaps {
:host([size='#{$k}']) {
width: $v;
height: $v;
}
:host([name='loading']) svg {
animation: load 1.5s linear infinite;
}
:host([size='small']) {
width: 24px;
height: 24px;
}
@keyframes circle {
@ -96,10 +87,7 @@ class Icon extends Component {
render() {
return html`
<svg
class=${classMap({ svg: true, loading: this.name === 'loading' })}
viewBox="0 0 1024 1024"
>
<svg class=${classMap({ svg: true })} viewBox="0 0 1024 1024">
${this.name === 'loading'
? svg`<circle cx="512" cy="512" r="384" fill="none" stroke-width="80" />`
: svg`<path d="${dict[this.name]}" />`}

32
src/form/checkbox.js
View File

@ -74,7 +74,7 @@ class CheckboxItem extends Component {
css`
:host {
display: inline-flex;
align-items: center;
height: 32px;
cursor: pointer;
label {
@ -126,30 +126,12 @@ class CheckboxItem extends Component {
`,
// 尺寸
css`
@use 'sass:map';
$sizes: (
s: (
h: 20px,
f: 12px
),
m: (
h: 24px,
f: 12px
),
xl: (
h: 36px,
f: 16px
)
);
:host([size='small']) {
height: 24px;
@loop $s, $v in $sizes {
:host([size='#{$s}']) {
height: map.get($v, 'h');
.dot {
width: map.get($v, 'f');
height: map.get($v, 'f');
}
.dot {
width: 12px;
height: 12px;
}
}
`,
@ -225,7 +207,7 @@ class CheckboxItem extends Component {
}
render() {
return html` <label
return html`<label
tabindex=${this.disabled || this.readOnly ? 'none' : 0}
@click=${this.#click}
@keydown=${this.#click}

38
src/form/radio.js
View File

@ -72,6 +72,7 @@ class RadioItem extends Component {
css`
:host {
display: inline-flex;
height: 32px;
cursor: pointer;
label {
@ -127,35 +128,16 @@ class RadioItem extends Component {
`,
// 尺寸
css`
@use 'sass:math';
@use 'sass:map';
$sizes: (
s: (
h: 20px,
f: 12px
),
m: (
h: 24px,
f: 12px
),
xl: (
h: 36px,
f: 16px
)
);
:host([size='small']) {
height: 24px;
@loop $s, $v in $sizes {
:host([size='#{$s}']) {
height: map.get($v, 'h');
.dot {
width: 12px;
height: 12px;
.dot {
width: map.get($v, 'f');
height: map.get($v, 'f');
&::after {
width: math.div(map.get($v, 'f'), 2);
height: math.div(map.get($v, 'f'), 2);
}
&::after {
width: 6px;
height: 6px;
}
}
}
@ -232,7 +214,7 @@ class RadioItem extends Component {
}
render() {
return html` <label
return html`<label
tabindex=${this.disabled || this.readOnly ? 'none' : 0}
@click=${this.#click}
@keydown=${this.#click}

22
src/form/star.js
View File

@ -63,25 +63,9 @@ class Star extends Component {
`,
// 尺寸
css`
@use 'sass:map';
$sizes: (
s: (
w: 52px,
h: 20px,
f: 12px
),
m: (
w: 72px,
h: 24px,
f: 12px
)
);
@loop $s, $v in $sizes {
:host([size='#{$s}']) {
--wc-icon-size: #{map.get($v, 'h')};
font-size: map.get($v, 'f');
}
:host([size='small']) {
--wc-star-size: 24px;
font-size: 12px;
}
`,
// 状态