Browse Source

feat: skeleton add block input

pull/5820/head
tangjinzhou 3 years ago
parent
commit
208c7ac6de
  1. 3
      components/skeleton/Input.tsx
  2. 9
      components/skeleton/style/index.less

3
components/skeleton/Input.tsx

@ -8,6 +8,7 @@ import omit from '../_util/omit';
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
size?: 'large' | 'small' | 'default';
block?: boolean;
}
const SkeletonInput = defineComponent({
@ -15,12 +16,14 @@ const SkeletonInput = defineComponent({
props: {
...omit(skeletonElementProps(), ['shape']),
size: String as PropType<'large' | 'small' | 'default'>,
block: Boolean,
},
setup(props) {
const { prefixCls } = useConfigInject('skeleton', props);
const cls = computed(() =>
classNames(prefixCls.value, `${prefixCls.value}-element`, {
[`${prefixCls.value}-active`]: props.active,
[`${prefixCls.value}-block`]: props.block,
}),
);
return () => {

9
components/skeleton/style/index.less

@ -109,13 +109,17 @@
}
}
// Skeleton Block Button
// Skeleton Block Button, Input
&.@{skeleton-prefix-cls}-block {
width: 100%;
.@{skeleton-button-prefix-cls} {
width: 100%;
}
.@{skeleton-input-prefix-cls} {
width: 100%;
}
}
// Skeleton element
@ -238,7 +242,8 @@
}
.skeleton-element-input-size(@size) {
width: 100%;
width: @size * 5;
min-width: @size * 5;
.skeleton-element-common-size(@size);
}

Loading…
Cancel
Save