Browse Source

[stdf]Update Placeholder compoent, demo and documents.

dufu1991 1 year ago
parent
commit
6926f78065

+ 11 - 11
doc/components/placeholder/api.md

@@ -1,15 +1,15 @@
 ## Placeholder Props
 
-| 属性     | 类型   | 默认值 | 可选值                                               | 必传 | 说明            |
-| -------- | ------ | ------ | ---------------------------------------------------- | ---- | --------------- |
-| py       | String | '4'    | '0'/'1'/'2'/'4'/'8'                                  | N    | 上下内边距。    |
-| height   | String | 'full' | 'full'/'1'/'2'/'4'/'8'/'16'/'24'/'32'/'48'/'64'/'96' | N    | 高度。          |
-| radius   | String | 'md'   | 'none'/'base'/'md'/'xl'/'2xl'/'3xl'/'full'           | N    | 圆角风格。      |
-| shadow   | String | 'none' | 'none'/'sm'/'md'/'lg'/'xl'/'2xl'                     | N    | 阴影风格。      |
-| injClass | String | ''     | Class                                                | N    | 注入 CSS 名称。 |
+| 名称     | 类型                                                             | 默认值   | 必传 | 说明            |
+| -------- | ---------------------------------------------------------------- | -------- | ---- | --------------- |
+| py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N    | 上下内边距。    |
+| height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N    | 高度。          |
+| radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N    | 圆角风格。      |
+| shadow   | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                          | `'none'` | N    | 阴影风格。      |
+| injClass | `string`                                                         | `''`     | N    | 注入 CSS 名称。 |
 
-## Placeholder Slots
+## Placeholder Snippets
 
-| 名称 | 说明               |
-| ---- | ------------------ |
-| -    | Placeholder 内容。 |
+| 名称     | 说明               |
+| -------- | ------------------ |
+| children | Placeholder 内容。 |

+ 11 - 11
doc/components/placeholder/api_en.md

@@ -1,15 +1,15 @@
 ## Placeholder Props
 
-| Name     | Type   | Default | Options                                              | Required | Description                     |
-| -------- | ------ | ------- | ---------------------------------------------------- | -------- | ------------------------------- |
-| py       | String | '4'     | '0'/'1'/'2'/'4'/'8'                                  | No       | Padding-top and Padding-bottom. |
-| height   | String | 'full'  | 'full'/'1'/'2'/'4'/'8'/'16'/'24'/'32'/'48'/'64'/'96' | No       | Height.                         |
-| radius   | String | 'md'    | 'none'/'base'/'md'/'xl'/'2xl'/'3xl'/'full'           | No       | Rounded corner style.           |
-| shadow   | String | 'none'  | 'none'/'sm'/'md'/'lg'/'xl'/'2xl'                     | No       | Shadow style.                   |
-| injClass | String | ''      | Class                                                | No       | Class name for custom CSS.      |
+| Name     | Type                                                             | Default  | Required | Description              |
+| -------- | ---------------------------------------------------------------- | -------- | -------- | ------------------------ |
+| py       | `'0'\|'1'\|'2'\|'3'\|'4'`                                        | `'4'`    | N        | Vertical padding.        |
+| height   | `'full'\|'1'\|'2'\|'4'\|'8'\|'16'\|'24'\|'32'\|'48'\|'64'\|'96'` | `'full'` | N        | Height.                  |
+| radius   | `'none'\|'base'\|'md'\|'xl'\|'2xl'\|'3xl'\|'full'`               | `'md'`   | N        | Border radius style.     |
+| shadow   | `'none'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`                          | `'none'` | N        | Shadow style.            |
+| injClass | `string`                                                         | `''`     | N        | Injected CSS class name. |
 
-## Placeholder Slots
+## Placeholder Snippets
 
-| Name | Description          |
-| ---- | -------------------- |
-| -    | Placeholder content. |
+| Name     | Description          |
+| -------- | -------------------- |
+| children | Placeholder content. |

+ 2 - 3
packages/stdf/components/placeholder/Placeholder.svelte

@@ -41,9 +41,8 @@
 </script>
 
 <div
-	class={`bg-black/5 dark:bg-white/5 flex flex-col justify-center text-center${heightObj[height] || heightObj.full}${
-		pyObj[py] || pyObj['4']
-	}${radiusObj[radius] || radiusObj.base}${shadowObj[shadow] || shadowObj.none}${injClass === '' ? '' : ` ${injClass}`}`}
+	class="bg-black/5 dark:bg-white/5 flex flex-col justify-center text-center{heightObj[height] || heightObj.full}{pyObj[py] ||
+		pyObj['4']}{radiusObj[radius] || radiusObj.base}{shadowObj[shadow] || shadowObj.none}{injClass === '' ? '' : ` ${injClass}`}"
 >
 	{@render children?.()}
 </div>