Quellcode durchsuchen

[doc&demo]Remove 'slot'

dufu1991 vor 1 Jahr
Ursprung
Commit
bf99835f52

+ 2 - 2
demo/src/routes/en_US/button/+page.svelte

@@ -94,7 +94,7 @@
 		<Button loading={{ inverse: true, height: '6', width: '6' }} disabledLoading={false}>Loading</Button>
 	</div>
 	<div>
-		<div class="p-4 font-bold">With icon (passed through slots)</div>
+		<div class="p-4 font-bold">With icon (passed through Snippet)</div>
 		<Button>
 			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
 			Throw the two way foil
@@ -105,7 +105,7 @@
 		</Button>
 	</div>
 	<div>
-		<div class="p-4 font-bold">Load (passed through slots)</div>
+		<div class="p-4 font-bold">Load (passed through Snippet)</div>
 		<Button>
 			<Loading inverse height="6" width="6" />
 		</Button>

+ 1 - 1
demo/src/routes/en_US/input/+page.svelte

@@ -209,7 +209,7 @@
 	clear
 />
 
-<div class="px-4 pt-8 font-bold text-xl">label1 and label4 Using Slots</div>
+<div class="px-4 pt-8 font-bold text-xl">label1 and label4 Using Snippet</div>
 <Input title="Verification Code">
 	{#snippet label1Child()}
 		<div>

+ 1 - 1
demo/src/routes/en_US/switch/+page.svelte

@@ -68,7 +68,7 @@
 						</div>
 					{/snippet}
 					{#snippet trueChild()}
-						<div slot="true">
+						<div>
 							<Icon name="ri-sun-line" size={16} top={-1} />
 						</div>
 					{/snippet}

+ 2 - 2
demo/src/routes/zh_CN/button/+page.svelte

@@ -94,7 +94,7 @@
 		<Button loading={{ inverse: true, height: '6', width: '6' }} disabledLoading={false}>加载中</Button>
 	</div>
 	<div>
-		<div class="p-4 font-bold">带图标(通过插槽传入)</div>
+		<div class="p-4 font-bold">带图标(通过 Snippet 传入)</div>
 		<Button>
 			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
 			投掷二向箔
@@ -105,7 +105,7 @@
 		</Button>
 	</div>
 	<div>
-		<div class="p-4 font-bold">加载(通过插槽传入)</div>
+		<div class="p-4 font-bold">加载(通过 Snippet 传入)</div>
 		<Button>
 			<Loading inverse height="6" width="6" />
 		</Button>

+ 1 - 1
demo/src/routes/zh_CN/input/+page.svelte

@@ -202,7 +202,7 @@
 	clear
 />
 
-<div class="px-4 pt-8 font-bold text-xl">label1 和 label4 使用插槽</div>
+<div class="px-4 pt-8 font-bold text-xl">label1 和 label4 使用 Snippet</div>
 <Input title="验证码">
 	{#snippet label1Child()}
 		<div>

+ 1 - 1
demo/src/routes/zh_CN/switch/+page.svelte

@@ -68,7 +68,7 @@
 						</div>
 					{/snippet}
 					{#snippet trueChild()}
-						<div slot="true">
+						<div>
 							<Icon name="ri-sun-line" size={16} top={-1} />
 						</div>
 					{/snippet}

+ 1 - 1
doc/components/badge/guide.md

@@ -1,6 +1,6 @@
 ## 搭配使用
 
-Badge 组件一般位于内容的右上角,所以常规使用时请将主体内容作为默认插槽传入。同时 Badge 是相对于主体内容定位的,所以不会影响主体内容的布局。
+Badge 组件一般位于内容的右上角,所以常规使用时请将主体内容作为默认 Snippet 传入。同时 Badge 是相对于主体内容定位的,所以不会影响主体内容的布局。
 
 但是一些特殊组件如 Cell,Badge 有可能位于组件内部指定位置,这时候可以使用 `isInner` 属性将 Badge 作为内部元素,放置位置由组件内部决定,请参考示例。
 

+ 1 - 1
doc/components/badge/guide_en.md

@@ -1,6 +1,6 @@
 ## Usage
 
-The `Badge` component is usually placed in the upper right corner of the content, so when used conventionally, please pass the main content as the default slot. Since the `Badge` is positioned relative to the main content, it will not affect the layout of the main content.
+The `Badge` component is usually placed in the upper right corner of the content, so when used conventionally, please pass the main content as the default Snippet. Since the `Badge` is positioned relative to the main content, it will not affect the layout of the main content.
 
 However, for some special components, such as `Cell`, the `Badge` may be placed in a specific position within the component. In this case, you can use the `isInner` attribute to position the `Badge` as an inner element, with the placement determined by the component itself. See the example for reference.
 

+ 1 - 1
doc/components/button/guide.md

@@ -26,7 +26,7 @@
 
 ## 按钮组
 
-要使用按钮组可以直接通过在内部插槽放入多个元素,结合 heightOut 与 heightIn 就可以实现。需要注意的是此时点击事件就需要绑定在内部独立元素之上,另外需要通过将 Props 的 group 设置为 true,将不显示整个按钮区域的点击效果。可参考示例。
+要使用按钮组可以直接通过在内部 Snippet放入多个元素,结合 heightOut 与 heightIn 就可以实现。需要注意的是此时点击事件就需要绑定在内部独立元素之上,另外需要通过将 Props 的 group 设置为 true,将不显示整个按钮区域的点击效果。可参考示例。
 
 ## 带图标或加载
 

+ 1 - 1
doc/components/button/guide_en.md

@@ -26,7 +26,7 @@ If the injected class does not take effect, please add "!" before the injected c
 
 ## Button group
 
-To use the button group, you can directly put multiple elements in the inner slot, which can be achieved by combining heightOut and heightIn. It should be noted that the click event needs to be bound to the internal independent element at this time. In addition, by setting the group of Props to true, the click effect of the entire button area will not be displayed. Examples are available.
+To use the button group, you can directly put multiple elements in the inner Snippet, which can be achieved by combining heightOut and heightIn. It should be noted that the click event needs to be bound to the internal independent element at this time. In addition, by setting the group of Props to true, the click effect of the entire button area will not be displayed. Examples are available.
 
 ## With icon or loading
 

+ 1 - 1
doc/components/cell/guide.md

@@ -8,7 +8,7 @@ Cell 作为移动端使用频率较高的组件,承载的使用场景也比较
 
 ## Snippet
 
-Cell 组件支持 leftChild、rightChild 和 detailChild 三种插槽,当传入 leftChild 时 Cell 最左侧内容会被 leftChild 插槽渲染,可参考示例自定义左侧图片;当传入 rightChild 时 Cell 最右侧内容会被 rightChild 渲染,可参考示例自定义右侧图片;当传入 detailChild 时 Cell 右侧详情内容会被 detailChild 渲染,可参考示例自定义右侧详情内容。
+Cell 组件支持 leftChild、rightChild 和 detailChild 三种 Snippet,当传入 leftChild 时 Cell 最左侧内容会被 leftChild 渲染,可参考示例自定义左侧图片;当传入 rightChild 时 Cell 最右侧内容会被 rightChild 渲染,可参考示例自定义右侧图片;当传入 detailChild 时 Cell 右侧详情内容会被 detailChild 渲染,可参考示例自定义右侧详情内容。
 
 ## left & right
 

+ 1 - 1
doc/components/cell/guide_en.md

@@ -8,7 +8,7 @@ As a frequently used component in mobile applications, Cell supports many use ca
 
 ## Snippet
 
-Cell component supports three slots: leftChild, rightChild and detailChild. When leftChild is provided, the leftmost content of Cell will be rendered by the leftChild slot, refer to examples for customizing left images; when rightChild is provided, the rightmost content will be rendered by rightChild, refer to examples for customizing right images; when detailChild is provided, the right detail content will be rendered by detailChild, refer to examples for customizing right detail content.
+Cell component supports three Snippet: leftChild, rightChild and detailChild. When leftChild is provided, the leftmost content of Cell will be rendered by the leftChild, refer to examples for customizing left images; when rightChild is provided, the rightmost content will be rendered by rightChild, refer to examples for customizing right images; when detailChild is provided, the right detail content will be rendered by detailChild, refer to examples for customizing right detail content.
 
 ## left & right
 

+ 1 - 1
doc/components/icon/guide.md

@@ -30,7 +30,7 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 
 ## 图标颜色
 
-如果 theme 不传或传入 false,图标颜色将继承自父级文字颜色,传入 true 图标颜色会根据主题色变化(包含亮暗模式);如果要实现自定义颜色,而颜色又同时包含亮暗模式,建议使用 CSS 注入或插槽渲染,在 injClass 或插槽中分别配置亮暗模式,请查看示例。
+如果 theme 不传或传入 false,图标颜色将继承自父级文字颜色,传入 true 图标颜色会根据主题色变化(包含亮暗模式);如果要实现自定义颜色,而颜色又同时包含亮暗模式,建议使用 CSS 注入或 Snippet 渲染,在 injClass 或 Snippet 中分别配置亮暗模式,请查看示例。
 
 ## 颜色优先级
 

+ 1 - 1
doc/components/icon/guide_en.md

@@ -30,7 +30,7 @@ When a Snippet is passed, the icon renders using the passed element. Other strin
 
 ## Icon Colors
 
-Without theme prop or when set to false, icons inherit parent text color. When true, icons follow theme colors (including light/dark modes). For custom colors with light/dark mode support, use CSS injection or slot rendering with injClass or slots configured for both modes. See examples.
+Without theme prop or when set to false, icons inherit parent text color. When true, icons follow theme colors (including light/dark modes). For custom colors with light/dark mode support, use CSS injection or Snippet rendering with injClass or Snippet configured for both modes. See examples.
 
 ## Color Priority
 

+ 13 - 13
doc/components/input/api.md

@@ -51,16 +51,16 @@
 
 ## Input Snippets
 
-| 名称        | 类型                                                                | 参数 | 说明                |
-| ----------- | ------------------------------------------------------------------- | ---- | ------------------- |
-| titleChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标题插槽内容。      |
-| data1Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 1 插槽内容。 |
-| data2Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 2 插槽内容。 |
-| data3Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 3 插槽内容。 |
-| label1Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 1 插槽内容。   |
-| label2Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 2 插槽内容。   |
-| label3Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 3 插槽内容。   |
-| label4Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 4 插槽内容。   |
-| label5Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 5 插槽内容。   |
-| label6Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 6 插槽内容。   |
-| tipChild    | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 提示信息插槽内容。  |
+| 名称        | 类型                                                                | 参数 | 说明                    |
+| ----------- | ------------------------------------------------------------------- | ---- | ----------------------- |
+| titleChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标题 Snippet 内容。     |
+| data1Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 1 Snippet 内容。 |
+| data2Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 2 Snippet 内容。 |
+| data3Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 数据项 3 Snippet 内容。 |
+| label1Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 1 Snippet 内容。   |
+| label2Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 2 Snippet 内容。   |
+| label3Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 3 Snippet 内容。   |
+| label4Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 4 Snippet 内容。   |
+| label5Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 5 Snippet 内容。   |
+| label6Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 标签 6 Snippet 内容。   |
+| tipChild    | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -    | 提示信息 Snippet 内容。 |

+ 13 - 13
doc/components/input/api_en.md

@@ -51,16 +51,16 @@
 
 ## Input Snippets
 
-| Name        | Type                                                                | Parameters | Description               |
-| ----------- | ------------------------------------------------------------------- | ---------- | ------------------------- |
-| titleChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Title slot content.       |
-| data1Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 1 slot content. |
-| data2Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 2 slot content. |
-| data3Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 3 slot content. |
-| label1Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 1 slot content.     |
-| label2Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 2 slot content.     |
-| label3Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 3 slot content.     |
-| label4Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 4 slot content.     |
-| label5Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 5 slot content.     |
-| label6Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 6 slot content.     |
-| tipChild    | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Tip message slot content. |
+| Name        | Type                                                                | Parameters | Description                  |
+| ----------- | ------------------------------------------------------------------- | ---------- | ---------------------------- |
+| titleChild  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Title Snippet content.       |
+| data1Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 1 Snippet content. |
+| data2Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 2 Snippet content. |
+| data3Child  | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Data item 3 Snippet content. |
+| label1Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 1 Snippet content.     |
+| label2Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 2 Snippet content.     |
+| label3Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 3 Snippet content.     |
+| label4Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 4 Snippet content.     |
+| label5Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 5 Snippet content.     |
+| label6Child | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Label 6 Snippet content.     |
+| tipChild    | [`Snippet`](https://svelte.dev/docs/svelte/snippet#Typing-snippets) | -          | Tip message Snippet content. |

+ 1 - 1
doc/components/navBar/guide.md

@@ -2,7 +2,7 @@
 
 ## 说明
 
-移动端的 NavBar 一般用于页面顶部显示当前页面与路由跳转操作。STDF 的 NavBar 由左中右三个部分组成,且每个部分都支持插槽渲染,而最外层元素的 Class 支持 injClass(class 注入)。
+移动端的 NavBar 一般用于页面顶部显示当前页面与路由跳转操作。STDF 的 NavBar 由左中右三个部分组成,且每个部分都支持 Snippet 渲染,而最外层元素的 Class 支持 injClass(class 注入)。
 
 ## 拓展
 

+ 1 - 1
doc/components/navBar/guide_en.md

@@ -2,7 +2,7 @@
 
 ## Explanation
 
-On mobile devices, the NavBar is generally used to display the current page and to perform routing operations at the top of the page. STDF's NavBar consists of three parts: left, center, and right, and each part supports slot rendering. The class of the outermost element also supports injClass (class injection).
+On mobile devices, the NavBar is generally used to display the current page and to perform routing operations at the top of the page. STDF's NavBar consists of three parts: left, center, and right, and each part supports Snippet rendering. The class of the outermost element also supports injClass (class injection).
 
 ## Extension
 

+ 1 - 1
doc/components/rate/guide_en.md

@@ -19,4 +19,4 @@ Control click animation through animation, `'current'` means only the clicked it
 
 ## Special attention
 
-When custom content is needed, it can be achieved by passing in Slots. At this time, **be sure to pass in the width and height of the custom content**.
+When custom content is needed, it can be achieved by passing in Snippet. At this time, **be sure to pass in the width and height of the custom content**.

+ 1 - 1
doc/guide/faq.md

@@ -4,4 +4,4 @@
 
 ## 问:部分组件的 Props 需要传入 String 类型,但传入 Number 类型也完全正常使用?
 
-答:由于组件内部这些 Props 作为 Object 的 key,严格来说应该传入 String 类型,若传入数字也会被转为 String,所以传入 Number 或者 String 类型都是可以的,根据个人习惯选择即可。需要注意的是,未来会使用 JSDoc 对组件的 Props 增加类型声明,虽然可以正常使用,但还是建议传入规定的类型。
+答:由于组件内部这些 Props 作为 Object 的 key,严格来说应该传入 String 类型,若传入数字也会被转为 String,所以传入 Number 或者 String 类型都是可以的,开启类型检查的时候会有类型报错。虽然可以正常使用,但还是建议传入规定的类型。

+ 1 - 1
doc/guide/faq_en.md

@@ -4,4 +4,4 @@ A: Using CSS Flexbox directly can easily and quickly achieve rasterization layou
 
 ## Q: Some components require props to be of type string, but passing number types is completely normal?
 
-A: Because these props are used as keys in the object within the component, strictly speaking, they should be of type string. If you pass a number, it will be converted to string, so passing a number or string type is possible. Choose according to personal preference. It should be noted that in the future, JSDoc will be used to add type declarations to the props of the component. Although it can be used normally, it is still recommended to pass the specified type.
+A: Because these Props inside the component are used as keys of an Object, strictly speaking, they should be passed in as String type. If a number is passed in, it will also be converted to String. Therefore, passing in Number or String types are both acceptable. When type checking is enabled, there will be a type error. Although it can still function normally, it is recommended to pass in the specified types.