feat: skeleton add block input
parent
44be8722f8
commit
208c7ac6de
|
@ -8,6 +8,7 @@ import omit from '../_util/omit';
|
||||||
|
|
||||||
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
|
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
|
||||||
size?: 'large' | 'small' | 'default';
|
size?: 'large' | 'small' | 'default';
|
||||||
|
block?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SkeletonInput = defineComponent({
|
const SkeletonInput = defineComponent({
|
||||||
|
@ -15,12 +16,14 @@ const SkeletonInput = defineComponent({
|
||||||
props: {
|
props: {
|
||||||
...omit(skeletonElementProps(), ['shape']),
|
...omit(skeletonElementProps(), ['shape']),
|
||||||
size: String as PropType<'large' | 'small' | 'default'>,
|
size: String as PropType<'large' | 'small' | 'default'>,
|
||||||
|
block: Boolean,
|
||||||
},
|
},
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const { prefixCls } = useConfigInject('skeleton', props);
|
const { prefixCls } = useConfigInject('skeleton', props);
|
||||||
const cls = computed(() =>
|
const cls = computed(() =>
|
||||||
classNames(prefixCls.value, `${prefixCls.value}-element`, {
|
classNames(prefixCls.value, `${prefixCls.value}-element`, {
|
||||||
[`${prefixCls.value}-active`]: props.active,
|
[`${prefixCls.value}-active`]: props.active,
|
||||||
|
[`${prefixCls.value}-block`]: props.block,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
return () => {
|
return () => {
|
||||||
|
|
|
@ -109,13 +109,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skeleton Block Button
|
// Skeleton Block Button, Input
|
||||||
&.@{skeleton-prefix-cls}-block {
|
&.@{skeleton-prefix-cls}-block {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.@{skeleton-button-prefix-cls} {
|
.@{skeleton-button-prefix-cls} {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.@{skeleton-input-prefix-cls} {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skeleton element
|
// Skeleton element
|
||||||
|
@ -238,7 +242,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-element-input-size(@size) {
|
.skeleton-element-input-size(@size) {
|
||||||
width: 100%;
|
width: @size * 5;
|
||||||
|
min-width: @size * 5;
|
||||||
.skeleton-element-common-size(@size);
|
.skeleton-element-common-size(@size);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue