瀏覽代碼

[stdf]Update the vertical padding and dark mode shadow style of the Placeholder component.

dufu1991 1 年之前
父節點
當前提交
1b5e40461b

+ 1 - 1
docs/mds/components/placeholder/api.md

@@ -2,7 +2,7 @@
 
 | 名称     | 类型                                                             | 默认值   | 必传 | 说明            |
 | -------- | ---------------------------------------------------------------- | -------- | ---- | --------------- |
-| py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N    | 上下内边距。    |
+| py       | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                   | `'4'`    | N    | 上下内边距。    |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N    | 高度。          |
 | radius   | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                 | `'md'`   | N    | 圆角风格。      |
 | shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                    | `'none'` | N    | 阴影风格。      |

+ 1 - 1
docs/mds/components/placeholder/api_en.md

@@ -2,7 +2,7 @@
 
 | Name     | Type                                                             | Default  | Required | Description              |
 | -------- | ---------------------------------------------------------------- | -------- | -------- | ------------------------ |
-| py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N        | Vertical padding.        |
+| py       | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                                   | `'4'`    | N        | Vertical padding.        |
 | height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N        | Height.                  |
 | radius   | `'none'\|'sm'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`                 | `'md'`   | N        | Border radius style.     |
 | shadow   | `'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                    | `'none'` | N        | Shadow style.            |

+ 9 - 11
packages/stdf/src/lib/components/placeholder/Placeholder.svelte

@@ -5,18 +5,18 @@
 
 	// 上下内边距样式
 	// up down padding style
-	const pyObj = { '0': ' py-0', '1': ' py-1', '2': ' py-2', '4': ' py-4', '8': ' py-8' };
+	const pyObj = { '0': ' py-0', '1': ' py-1', '2': ' py-2', '3': ' py-3', '4': ' py-4', '8': ' py-8' };
 
 	// 阴影样式
 	// shadow style
 	const shadowObj = {
 		none: ' shadow-none',
-		xs: ' shadow-xs',
-		sm: 'shadow-sm',
-		md: ' shadow-md',
-		lg: ' shadow-lg',
-		xl: ' shadow-xl',
-		'2xl': ' shadow-2xl'
+		xs: ' shadow-xs dark:shadow-white/5',
+		sm: 'shadow-sm dark:shadow-white/10',
+		md: ' shadow-md dark:shadow-white/10',
+		lg: ' shadow-lg dark:shadow-white/10',
+		xl: ' shadow-xl dark:shadow-white/10',
+		'2xl': ' shadow-2xl dark:shadow-white/20'
 	};
 
 	// 圆角样式
@@ -49,10 +49,8 @@
 </script>
 
 <div
-	class="flex flex-col justify-center bg-black/5 dark:bg-white/5 text-center{heightObj[height as keyof typeof heightObj] ||
-		heightObj.full}{pyObj[py as keyof typeof pyObj] || pyObj['4']}{radiusObj[radius as keyof typeof radiusObj] || radiusObj.md}{shadowObj[
-		shadow as keyof typeof shadowObj
-	] || shadowObj.none}{injClass === '' ? '' : ` ${injClass}`}"
+	class="flex flex-col justify-center bg-black/5 dark:bg-white/5 text-center{heightObj[height] || heightObj.full}{pyObj[py] ||
+		pyObj['4']}{radiusObj[radius] || radiusObj.md}{shadowObj[shadow] || shadowObj.none}{injClass === '' ? '' : ` ${injClass}`}"
 >
 	{@render children?.()}
 </div>

+ 1 - 1
packages/stdf/src/lib/types/index.ts

@@ -496,7 +496,7 @@ export type PickerProps = {
 };
 
 export type PlaceholderProps = {
-	py?: '0' | '1' | '2' | '3' | '4';
+	py?: '0' | '1' | '2' | '3' | '4' | '8';
 	height?: 'full' | '1' | '2' | '4' | '8' | '16' | '24' | '32' | '48' | '64' | '96';
 	radius?: 'none' | 'sm' | 'md' | 'xl' | '2xl' | '3xl' | 'full';
 	shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';