@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/grid-item/grid-item.vue

@@ -0,0 +1,292 @@
+<template>
+  <view
+    :class="[
+      tools.cls(classPrefix, [['auto-size', column == 0]]),
+      tClass
+    ]"
+    :style="tools._style([gridItemStyle, customStyle])"
+    :hover-class="hover ? classPrefix + '--hover' : ''"
+    :hover-stay-time="200"
+    :aria-role="ariaRole || 'button'"
+    :aria-label="ariaLabel"
+    :aria-describedby="describedbyID"
+    @click="onClick"
+  >
+    <view
+      :class="tools.cls(classPrefix + '__wrapper', [layout])"
+      :style="gridItemWrapperStyle"
+    >
+      <view
+        :class="[
+          tools.cls(classPrefix + '__content', [align, layout]),
+          tClassContent
+        ]"
+        :style="gridItemContentStyle"
+      >
+        <slot />
+        <t-badge
+          v-if="badgeProps"
+          :color="badgeProps.color || ''"
+          :content="badgeProps.content || ''"
+          :count="badgeProps.count || 0"
+          :dot="badgeProps.dot || false"
+          :max-count="badgeProps.maxCount || 99"
+          :offset="badgeProps.offset || []"
+          :shape="badgeProps.shape || 'circle'"
+          :show-zero="badgeProps.showZero || false"
+          :size="badgeProps.size || 'medium'"
+          :t-class="badgeProps.tClass"
+          :t-class-content="badgeProps.tClassContent"
+          :t-class-count="badgeProps.tClassCount"
+        >
+          <view
+            :class="[
+              tools.cls(classPrefix + '__image', [getImageSize(column), ['icon', icon]]),
+              tClassImage
+            ]"
+          >
+            <block v-if="image && image != 'slot'">
+              <t-image
+                :t-class="tools.cls(classPrefix + '__image', [getImageSize(column)]) + ' ' + tClassImage"
+                :custom-style="tools._style([imageProps.style, imageProps.customStyle])"
+                :height="imageProps.height || ''"
+                :width="imageProps.width || ''"
+                :error="imageProps.error"
+                :lazy="imageProps.lazy"
+                :loading="imageProps.loading"
+                :shape="imageProps.shape || 'round'"
+                :src="imageProps.src || image"
+                :mode="imageProps.mode || 'widthFix'"
+                :webp="imageProps.webp"
+                :show-menu-by-longpress="imageProps.showMenuByLongpress"
+                :data-custom="imageProps.dataset"
+                @error="binderror($event, { custom: dataset || null })"
+                @load="bindload($event, { custom: dataset || null })"
+              />
+            </block>
+            <slot name="image" />
+            <block
+              v-if="iconName || tools.isNoEmptyObj(iconData)"
+              name="icon"
+            >
+              <t-icon
+                :custom-style="iconData.style || ''"
+                :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (iconData.activeIdx == iconData.index ? 'active ' : ' ')"
+                :prefix="iconData.prefix"
+                :name="iconName || iconData.name"
+                :size="iconData.size"
+                :color="iconData.color"
+                :aria-hidden="!!iconData.ariaHidden"
+                :aria-label="iconData.ariaLabel"
+                :aria-role="iconData.ariaRole"
+              />
+            </block>
+          </view>
+        </t-badge>
+        <view
+          :id="describedbyID"
+          :class="tools.cls(classPrefix + '__words', [layout])"
+          :aria-label="ariaLabel
+            || (
+              (badgeProps && (badgeProps.dot || badgeProps.count))
+                ? text + ',' + description + ',' + tools.getBadgeAriaLabel({ ...(badgeProps || {}) })
+                : '')"
+        >
+          <view
+            v-if="text"
+            :class="[
+              tools.cls(classPrefix + '__text', [getImageSize(column), layout]) + ' ',
+              tClassText
+            ]"
+          >
+            {{ text }}
+          </view>
+          <slot name="text" />
+          <view
+            v-if="description"
+            :class="[
+              tools.cls(classPrefix + '__description', [getImageSize(column), layout]) + ' ',
+              tClassDescription
+            ]"
+          >
+            {{ description }}
+          </view>
+          <slot name="description" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import TImage from '../image/image';
+import TIcon from '../icon/icon';
+import TBadge from '../badge/badge';
+
+import { uniComponent } from '../common/src/index';
+import { prefix } from '../common/config';
+import props from './props';
+import { uniqueFactory, setIcon } from '../common/utils';
+import { isObject } from '../common/validator';
+import tools from '../common/utils.wxs';
+import { ChildrenMixin, RELATION_MAP } from '../common/relation';
+
+
+const name = `${prefix}-grid-item`;
+const getUniqueID = uniqueFactory('grid_item');
+
+
+const LinkTypes = {
+  'redirect-to': 'redirectTo',
+  'switch-tab': 'switchTab',
+  relaunch: 'reLaunch',
+  'navigate-to': 'navigateTo',
+};
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  externalClasses: [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-image`,
+    `${prefix}-class-text`,
+    `${prefix}-class-description`,
+  ],
+  mixins: [ChildrenMixin(RELATION_MAP.GridItem)],
+  components: {
+    TImage,
+    TIcon,
+    TBadge,
+  },
+  props: {
+    ...props,
+  },
+  emits: [
+    'click',
+  ],
+  data() {
+    return {
+      prefix,
+      classPrefix: name,
+      gridItemStyle: '',
+      gridItemWrapperStyle: '',
+      gridItemContentStyle: '',
+      align: 'center',
+      column: 0,
+      describedbyID: '',
+      tools,
+
+      iconName: '',
+      iconData: {},
+
+      hover: false,
+    };
+  },
+  watch: {
+    icon: {
+      handler(t) {
+        const obj = setIcon('icon', t, '');
+
+        Object.keys(obj).forEach((key) => {
+          this[key] = obj[key];
+        });
+      },
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.describedbyID = getUniqueID();
+  },
+  methods: {
+    innerAfterLinked() {
+      this.updateStyle();
+      this.column = this[RELATION_MAP.GridItem].column;
+    },
+    binderror() {},
+    bindload() {},
+    getImageSize(column) {
+      if (!column || column == 4) return 'middle';
+      return column > 4 ? 'small' : 'large';
+    },
+    updateStyle() {
+      const { hover, align } = this[RELATION_MAP.GridItem];
+      const gridItemStyles = [];
+      const gridItemWrapperStyles = [];
+      const gridItemContentStyles = [];
+      const widthStyle = this.getWidthStyle();
+      const paddingStyle = this.getPaddingStyle();
+      const borderStyle = this.getBorderStyle();
+      widthStyle && gridItemStyles.push(widthStyle);
+      paddingStyle && gridItemWrapperStyles.push(paddingStyle);
+      borderStyle && gridItemContentStyles.push(borderStyle);
+
+      this.gridItemStyle = `${gridItemStyles.join(';')}`;
+      this.gridItemWrapperStyle = gridItemWrapperStyles.join(';');
+      this.gridItemContentStyle = gridItemContentStyles.join(';');
+      this.hover = hover;
+      this.align = align;
+    },
+
+    // 判断应该加在gridItem上的宽度
+    getWidthStyle() {
+      const { column } = this[RELATION_MAP.GridItem];
+      return column > 0 ? `width:${(1 / column) * 100}%` : '';
+    },
+
+    // 获取应该加在gridWrap上的padding
+    getPaddingStyle() {
+      const { gutter } = this[RELATION_MAP.GridItem];
+      if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
+      return '';
+    },
+
+    // 判断border在grid-item-content上的css属性
+    getBorderStyle() {
+      const { gutter } = this[RELATION_MAP.GridItem];
+      let { border } = this[RELATION_MAP.GridItem];
+
+      if (!border) {
+        // 如果border的值没传或者是border的值为false
+        return '';
+      }
+
+      if (!isObject(border)) {
+        border = {};
+      }
+      const { color = '#266FE8', width = 2, style = 'solid' } = border ;
+
+      if (gutter) {
+        return `border:${width}rpx ${style} ${color}`;
+      }
+
+      return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
+    },
+
+    onClick(e) {
+      const { item } = e.currentTarget.dataset;
+      this.$emit('click', item);
+      this.jumpLink();
+    },
+
+    jumpLink() {
+      const { url, jumpType } = this;
+      if (url && jumpType) {
+        if (LinkTypes[jumpType]) {
+          wx[LinkTypes[jumpType]]({ url });
+        }
+      }
+    },
+  },
+});
+</script>
+<style scoped>
+@import './grid-item.css';
+</style>
+<style scoped>
+.t-grid-item__content--left {
+  width: 100%;
+  box-sizing: border-box;
+}
+</style>

package/dist/grid-item/props.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdGridItemProps } from './type';
+export default {
+  /** 透传至 Badge 属性 */
+  badgeProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */
+  description: {
+    type: String,
+  },
+  /** 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` */
+  icon: {
+    type: [String, Object],
+  },
+  /** 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽 */
+  image: {
+    type: String,
+  },
+  /** 透传至 Image 组件 */
+  imageProps: {
+    type: Object,
+    default: () => ({}),
+  },
+  /** 链接跳转类型 */
+  jumpType: {
+    type: String,
+    default: 'navigate-to' as TdGridItemProps['jumpType'],
+    validator(val: TdGridItemProps['jumpType']): boolean {
+      if (!val) return true;
+      return ['redirect-to', 'switch-tab', 'relaunch', 'navigate-to'].includes(val);
+    },
+  },
+  /** 内容布局方式 */
+  layout: {
+    type: String,
+    default: 'vertical' as TdGridItemProps['layout'],
+    validator(val: TdGridItemProps['layout']): boolean {
+      if (!val) return true;
+      return ['vertical', 'horizontal'].includes(val);
+    },
+  },
+  /** 文本，可以通过 Props 传入文本，也可以自定义标题节点 */
+  text: {
+    type: String,
+  },
+  /** 点击后的跳转链接 */
+  url: {
+    type: String,
+    default: '',
+  },
+  /** 点击子项后触发 */
+  onClick: {
+    type: Function,
+    default: () => ({}),
+  },
+};

package/dist/grid-item/type.ts

@@ -0,0 +1,56 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import type { TdBadgeProps as BadgeProps } from '../badge/type';
+import type { TdImageProps as ImageProps } from '../image/type';
+
+export interface TdGridItemProps {
+  /**
+   * 透传至 Badge 属性
+   * @default {}
+   */
+  badgeProps?: BadgeProps;
+  /**
+   * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
+   */
+  description?: string;
+  /**
+   * 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`
+   */
+  icon?: string | object;
+  /**
+   * 图片，可以是图片地址，也可以自定义图片节点，值为 slot 的时候才能使用插槽
+   */
+  image?: string;
+  /**
+   * 透传至 Image 组件
+   * @default {}
+   */
+  imageProps?: ImageProps;
+  /**
+   * 链接跳转类型
+   * @default navigate-to
+   */
+  jumpType?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
+  /**
+   * 内容布局方式
+   * @default vertical
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * 文本，可以通过 Props 传入文本，也可以自定义标题节点
+   */
+  text?: string;
+  /**
+   * 点击后的跳转链接
+   * @default ''
+   */
+  url?: string;
+  /**
+   * 点击子项后触发
+   */
+  onClick?: () => void;
+}

package/dist/guide/README.en-US.md

@@ -0,0 +1,103 @@
+:: BASE_DOC ::
+
+## API
+
+### Guide Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+custom-style | Object | - | CSS(Cascading Style Sheets) | N
+back-button-props | Object | - | Typescript：`ButtonProps` | N
+counter | String / Function | - | Typescript：`string \| ((params: { total: number; current: number }) => string)` | N
+current | Number | - | `v-model:current` is supported | N
+default-current | Number | - | uncontrolled property | N
+finish-button-props | Object | - | Typescript：`ButtonProps` | N
+hide-back | Boolean | false | \- | N
+hide-counter | Boolean | false | \- | N
+hide-skip | Boolean | false | \- | N
+highlight-padding | Number | 16 | \- | N
+mode | String | popover | options: popover/dialog | N
+next-button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | N
+show-overlay | Boolean | true | \- | N
+skip-button-props | Object | - | Typescript：`ButtonProps` | N
+steps | Array | - | Typescript：`Array<GuideStep>` | N
+using-custom-navbar | Boolean | false | \- | N
+z-index | Number | 999999 | \- | N
+
+### Guide Events
+
+name | params | description
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | \-
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | \-
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | \-
+
+### Guide External Classes
+
+className | Description
+-- | --
+t-class | \-
+t-class-back | \-
+t-class-body | \-
+t-class-finish | \-
+t-class-footer | \-
+t-class-next | \-
+t-class-popover | \-
+t-class-reference | \-
+t-class-skip | \-
+t-class-title | \-
+t-class-tooltip | \-
+
+### GuideStep
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+back-button-props | Object | - | Typescript：`ButtonProps` | N
+body | String | - | \- | N
+element | Function | - | required。Typescript：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | Y
+finish-button-props | Object | - | Typescript：`ButtonProps` | N
+highlight-padding | Number | - | \- | N
+mode | String | - | options: popover/dialog | N
+next-button-props | Object | - | Typescript：`ButtonProps` | N
+offset | Array | - | this api is in discussing. do not use it。Typescript：`Array<string \| number>` | N
+placement | String | 'top' | Typescript：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | N
+show-overlay | Boolean | true | \- | N
+skip-button-props | Object | - | Typescript：`ButtonProps` | N
+title | String | - | title of current step | N
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-guide-body-color | @text-color-secondary | -
+--td-guide-dialog-body-font | @font-body-large | -
+--td-guide-dialog-body-margin-top | 16rpx | -
+--td-guide-dialog-body-text-align | center | -
+--td-guide-dialog-border-radius | @radius-extraLarge | -
+--td-guide-dialog-footer-button-padding | 0 @spacer-3 | -
+--td-guide-dialog-padding | @spacer-3 0 | -
+--td-guide-dialog-title-font | @font-title-large | -
+--td-guide-dialog-title-text-align | center | -
+--td-guide-dialog-width | 622rpx | -
+--td-guide-footer-button-space | @spacer-1 | -
+--td-guide-footer-margin-top | @spacer-3 | -
+--td-guide-footer-text-align | right | -
+--td-guide-popover-bg-color | @bg-color-container | -
+--td-guide-popover-body-font | @font-body-medium | -
+--td-guide-popover-body-margin-top | 8rpx | -
+--td-guide-popover-body-text-align | left | -
+--td-guide-popover-border | 2rpx solid @component-border | -
+--td-guide-popover-border-radius | @radius-large | -
+--td-guide-popover-max-width | 540rpx | -
+--td-guide-popover-min-width | 480rpx | -
+--td-guide-popover-padding | @spacer-2 | -
+--td-guide-popover-shadow | @shadow-3 | -
+--td-guide-popover-title-font | @font-title-medium | -
+--td-guide-popover-title-text-align | left | -
+--td-guide-reference-border | 4rpx solid @brand-color | -
+--td-guide-reference-border-radius | @radius-default | -
+--td-guide-reference-mask-color | @font-gray-2 | -
+--td-guide-title-color | @text-color-primary | -

package/dist/guide/README.md

@@ -0,0 +1,140 @@
+---
+title: Guide 按钮
+description: 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
+spline: base
+isComponent: true
+---
+
+
+
+## 引入
+
+可在 `main.ts` 或在需要使用的页面或组件中引入。
+
+```js
+import TGuide from '@tdesign/uniapp/guide/guide.vue';
+```
+
+### 01 组件类型
+
+#### 基础按钮
+
+{{ base }}
+
+#### 不带遮罩的引导
+
+{{ no-mask }}
+
+#### 弹窗形式的引导
+
+{{ dialog }}
+
+#### 气泡与弹窗混合的引导
+
+{{ multiple }}
+
+#### 自定义气泡
+
+{{ content }}
+
+## API
+
+### Guide Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+custom-style | Object | - | 自定义样式 | N
+back-button-props | Object | - | 透传 返回按钮 的全部属性，示例：`{ content: '返回', theme: 'default' }`。TS 类型：`ButtonProps` | N
+counter | String / Function | - | 用于自定义渲染计数部分。TS 类型：`string \| ((params: { total: number; current: number }) => string)` | N
+current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。支持语法糖 `v-model:current` | N
+default-current | Number | - | 当前步骤，即整个引导的进度。-1 则不展示，用于需要中断展示的场景。非受控属性 | N
+finish-button-props | Object | - | 透传 完成按钮 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+hide-back | Boolean | false | 是否隐藏返回按钮 | N
+hide-counter | Boolean | false | 是否隐藏计数 | N
+hide-skip | Boolean | false | 是否隐藏跳过按钮 | N
+highlight-padding | Number | 16 | 高亮框的内边距，单位rpx | N
+mode | String | popover | 引导框的类型。可选项：popover/dialog | N
+next-button-props | Object | - | 透传 下一步按钮 的全部属性，示例：{ content: '下一步', theme: 'primary' }。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | N
+show-overlay | Boolean | true | 是否出现遮罩层 | N
+skip-button-props | Object | - | 透传 跳过按钮 的全部属性，{ content: '跳过', theme: 'default' }。TS 类型：`ButtonProps` | N
+steps | Array | - | 用于定义每个步骤的内容，包括高亮的节点、相对位置和具体的文案内容等。TS 类型：`Array<GuideStep>` | N
+using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+z-index | Number | 999999 | 提示框的层级 | N
+
+### Guide Events
+
+名称 | 参数 | 描述
+-- | -- | --
+back | `(context: { e: MouseEvent, current: number, total: number  })` | 点击返回按钮时触发
+change | `(current: number, context?: { e: MouseEvent,  total: number })` | 当前步骤发生变化时触发
+finish | `(context: { e: MouseEvent, current: number, total: number  })` | 点击完成按钮时触发
+next-step-click | `(context: { e: MouseEvent, next: number, current: number, total: number  })` | 点击下一步时触发
+skip | `(context: { e: MouseEvent, current: number, total: number  })` | 点击跳过按钮时触发
+
+### Guide External Classes
+
+类名 | 描述
+-- | --
+t-class | 根节点样式类
+t-class-back | 返回按钮样式类
+t-class-body | 高亮框提示内容主体样式类
+t-class-finish | 结束按钮样式类
+t-class-footer | 高亮框底部操作区域样式类
+t-class-next | 下一步按钮样式类
+t-class-popover | 引导框样式类
+t-class-reference | 高亮框样式类
+t-class-skip | 跳过按钮样式类
+t-class-title | 高亮框提示内容标题样式类
+t-class-tooltip | 高亮框提示内容区域样式类
+
+### GuideStep
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+back-button-props | Object | - | 用于自定义当前引导框的返回按钮的内容。TS 类型：`ButtonProps` | N
+body | String | - | 当前步骤提示框的内容，支持插槽：slot="body-{{index}}" (1、当要显示body-{{index}}插槽时，请将body设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
+element | Function | - | 必需。高亮的节点。示例： `() => new Promise((resolve) => this.createSelectorQuery().select('#tdesign').boundingClientRect((rect) => resolve(rect)).exec())`。TS 类型：`StepElement` `type StepElement = () => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | Y
+finish-button-props | Object | - | 透传 完成 的全部属性，示例：`{ content: '完成', theme: 'primary' }`。TS 类型：`ButtonProps` | N
+highlight-padding | Number | - | 高亮框的内边距，单位rpx | N
+mode | String | - | 引导框的类型。可选项：popover/dialog | N
+next-button-props | Object | - | 用于自定义当前引导框的下一步按钮的内容。TS 类型：`ButtonProps` | N
+offset | Array | - | 相对于 placement 的偏移量[left, top]，默认单位rpx，示例：[-10, 20] 或 ['10px', '8px'] 或 ['20rpx', '16rpx'] (仅当 `mode` 为 `popover` 时生效)。TS 类型：`Array<string \| number>` | N
+placement | String | 'top' | 引导框相对于高亮元素出现的位置，(仅当 `mode` 为 `popover` 时生效)。TS 类型：`StepPopoverPlacement ` `type StepPopoverPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'\|'center'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/guide/type.ts) | N
+show-overlay | Boolean | true | 是否出现遮罩层 | N
+skip-button-props | Object | - | 用于自定义当前步骤引导框的跳过按钮的内容。TS 类型：`ButtonProps` | N
+title | String | - | 当前步骤的标题内容，支持插槽：slot="title-{{index}}" (1、当要显示body-{{index}}插槽时，请将title设置为空；2、当要显示content-{{index}}插槽完全自定义内容时，请将body和title都设置为空) | N
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-guide-body-color | @text-color-secondary | -
+--td-guide-dialog-body-font | @font-body-large | -
+--td-guide-dialog-body-margin-top | 16rpx | -
+--td-guide-dialog-body-text-align | center | -
+--td-guide-dialog-border-radius | @radius-extraLarge | -
+--td-guide-dialog-footer-button-padding | 0 @spacer-3 | -
+--td-guide-dialog-padding | @spacer-3 0 | -
+--td-guide-dialog-title-font | @font-title-large | -
+--td-guide-dialog-title-text-align | center | -
+--td-guide-dialog-width | 622rpx | -
+--td-guide-footer-button-space | @spacer-1 | -
+--td-guide-footer-margin-top | @spacer-3 | -
+--td-guide-footer-text-align | right | -
+--td-guide-popover-bg-color | @bg-color-container | -
+--td-guide-popover-body-font | @font-body-medium | -
+--td-guide-popover-body-margin-top | 8rpx | -
+--td-guide-popover-body-text-align | left | -
+--td-guide-popover-border | 2rpx solid @component-border | -
+--td-guide-popover-border-radius | @radius-large | -
+--td-guide-popover-max-width | 540rpx | -
+--td-guide-popover-min-width | 480rpx | -
+--td-guide-popover-padding | @spacer-2 | -
+--td-guide-popover-shadow | @shadow-3 | -
+--td-guide-popover-title-font | @font-title-medium | -
+--td-guide-popover-title-text-align | left | -
+--td-guide-reference-border | 4rpx solid @brand-color | -
+--td-guide-reference-border-radius | @radius-default | -
+--td-guide-reference-mask-color | @font-gray-2 | -
+--td-guide-title-color | @text-color-primary | -