feat(style-provider): support custom tag

varletjs · Sep 18, 2022 · ed653e6 · ed653e6
1 parent d4353b5
commit ed653e6
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/packages/varlet-ui/src/style-provider/StyleProvider.vue b/packages/varlet-ui/src/style-provider/StyleProvider.vue
@@ -14,11 +14,15 @@ export default defineComponent({
       type: Object as PropType<StyleVars>,
       default: () => ({}),
     },
+    tag: {
+      type: String,
+      default: 'div',
+    },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.tag,
         {
           class: n(),
           style: formatStyleVars(props.styleVars),

diff --git a/packages/varlet-ui/src/style-provider/docs/en-US.md b/packages/varlet-ui/src/style-provider/docs/en-US.md
@@ -113,9 +113,10 @@ const toggleRootTheme = () => {
 
 ### Props
 
-| Prop | Description | Type | Default | 
-| --- | --- | --- | --- | 
-| `style-vars` | CSS variables | _Record<string, string>_ | `{}` |
+| Prop         | Description   | Type                     | Default | 
+|--------------|---------------|--------------------------|---------| 
+| `style-vars` | CSS variables | _Record<string, string>_ | `{}`    |
+| `tag`        | Tag name      | _string_                 | `div`   |
 
 ### Slots
 

diff --git a/packages/varlet-ui/src/style-provider/docs/zh-CN.md b/packages/varlet-ui/src/style-provider/docs/zh-CN.md
@@ -110,9 +110,10 @@ const toggleRootTheme = () => {
 
 ### 属性
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 参数           | 说明 | 类型                       | 默认值 |
+|--------------| --- |--------------------------| -- |
 | `style-vars` | css 变量 | _Record<string, string>_ | `{}` |
+| `tag`        | 自定义标签名 | _string_                 | `div` |
 
 ### 插槽
 

diff --git a/packages/varlet-ui/types/styleProvider.d.ts b/packages/varlet-ui/types/styleProvider.d.ts
@@ -6,6 +6,7 @@ export type StyleVars = Record<string, string>
 
 export interface StyleProviderProps extends BasicAttributes {
   styleVars?: StyleVars
+  tag?: string
 }
 
 export class StyleProviderComponent extends VarComponent {