跳到主要内容

从 v0.2.x 升级到 v2.x

本文档将帮助你从 Titian 0.2.x 版本升级到 Titian 2.x 版本

设计规范调整​

  • 部分组件间距、行高等微整
  • 移除部分组件的固定高度，由行高和内间距撑开

技术调整​

  • 引入 Design Tokens ，更精细化地支持主题设置，底层使用了 @titian/token 作为解决方案

  • 弃用 --base-radius-size 的方式调整组件，统一使用 Design Tokens 的方式设置组件的圆角

  • 弃用 --capsule-radius-size 的方式设置胶囊型组件，统一使用 Design Tokens 的方式单独设置组件为胶囊型

  • 增加 TiConfigProvider 组件，用于设置整体主题皮肤、多语言切换、反黑反白模式设置等

  • 对于 Vue 框架增加了 useTheme() 、useToken() 的 Hook

    <template>
        <TiButton type="primary">按钮</TiButton>
    </template>

    <script lang="ts" setup>
    import { useTheme, useToken, TiButton } from '@titian-design/mobile-vue';

    const theme = useTheme();
    console.log(theme);
    const token = useToken();
    console.log(token);
    </script>

  • 弹窗型组件挂载节点变更，弹窗型组件的默认挂载从 body 改动到 TiConfigProvider 节点下，如果 TiConfigProvider 不存在则挂载到 body上

    • TiPopup 组件
    • TiDialog 组件
    • TiToast 组件
    • TiCalendar 组件
    • TiActionSheet 组件
    • TiShareSheet 组件

  • TiButton 、TiCascade 组件不在固定各个尺寸的高度，而是由 padding 和 line-height 撑开高度

组件 API 调整​

  • 所有组件中与 color、fontSize、space、fontWeight、lineHeight、borderRadius 相关的属性、样式均可使用 token 字段表示，具体参考相对应的组件文档

    <template>
        <TiButton type="primary">按钮</TiButton>
      + <TiButton color="theme.color.brand.1000">按钮</TiButton>
    </template>

    <script lang="ts" setup>
    import { TiButton } from '@titian-design/mobile-vue';
    </script>

  • TiCheckboxButton 组件新增 tagClass 属性

  • TiImage 组件移除 useGlobalStyle , 组件圆角默认使用统一的 token 值

  • TiInputNumber 组件 size 属性新增 small 选项，也支持用户传入指定大小

全局 CSS 变量修改​

  • 移除 --neutral-color-1 ，使用 theme.color.gray.texticon.900 代替
  • 移除 --neutral-color-2 ，使用 color.gray.texticon.550 代替
  • 移除 --neutral-color-3 ，使用 color.gray.texticon.400 代替
  • 移除 --neutral-color-4 ，使用 color.gray.texticon.250 或者 color.gray.border.250 代替
  • 移除 --neutral-color-5 ，使用 color.gray.background.100 或者 color.gray.border.100 代替
  • 移除 --neutral-color-6 ，使用 color.gray.border.50 或者 color.gray.background.40 代替
  • 移除 --neutral-color-7 ，使用 color.gray.background.40 代替
  • 移除 --neutral-color-8
  • 移除 --neutral-color-9 ，使用 color.gray.background.default 或者 color.gray.texticon.invert 代替
  • 移除 --theme-tag, --theme-tr，--theme-tg ，--theme-tg

组件 CSS 变量调整​

action-sheet 组件​

  • 新增 --action-sheet-title-padding-v ，未设置时使用 --action-sheet-padding-v
  • 新增 --action-sheet-title-padding-h ，未设置时使用 --action-sheet-padding-h
  • 新增 --action-sheet-title-bg-color ，未设置时使用 --action-sheet-button-bg-color
  • 新增 --action-sheet-title-line-height ，未设置时使用 --action-sheet-line-height
  • 新增 --action-sheet-title-font-weight ，未设置时使用 --action-sheet-font-weight
  • 新增 --action-sheet-button-line-height ，未设置时使用 --action-sheet-line-height
  • 新增 --action-sheet-icon-font-size
  • 新增 --action-sheet-button-font-weight
  • 新增 --action-sheet-cancel-padding-v ，未设置时使用 --action-sheet-padding-v
  • 新增 --action-sheet-cancel-padding-h ，未设置时使用 --action-sheet-padding-h
  • 新增 --action-sheet-cancel-line-height ，未设置时使用 --action-sheet-line-height
  • --action-sheet-icon-margin-right 修改为 --action-sheet-icon-padding-right

back-top 组件​

  • 新增 --back-top-text-color

badge 徽标​

  • 新增 --badge-bg-color

button 组件​

  • 新增 --button-line-height
  • 新增 --button-font-weight
  • 新增 --button-icon-gap
  • 新增 --button-icon-size
  • 移除 --button-height

calendar 组件​

  • 新增 --calendar-date-text-font-size
  • 新增 --calendar-date-text-font-weight
  • 新增 --calendar-date-select-font-weight

cascade 组件​

  • 新增 --cascade-tab-line-height
  • 新增 --cascade-tab-text-align
  • 新增 --cascade-item-line-height
  • 新增 --cascade-item-checkbox-checked-color
  • 移除 --cascade-item-height

cell-group 组件​

  • 新增 --cell-group-title-font-weight

cell 组件​

  • 新增 --cell-icon-line-height
  • 新增 --cell-required-font-size
  • 新增 --cell-required-color
  • 新增 --cell-sub-desc-font-size
  • 新增 --cell-sub-desc-font-weight
  • 新增 --cell-sub-desc-line-height
  • 移除 --cell-line-height
  • --cell-icon-margin-right 修改为 --cell-icon-padding-right
  • --cell-icon-padding-right 的默认值修改为 0，图标与标题之间的距离切换为使用 --cell-title-wrap-gap

checkbox-button 组件​

  • 新增 --checkbox-button-font-size
  • 新增 --checkbox-button-line-height
  • 新增 --checkbox-button-font-weight
  • 新增 --checkbox-button-disabled-text-color
  • 新增 --checkbox-button-disabled-checked-text-color

checkbox 组件​

  • 新增 --checkbox-label-font-size
  • 新增 --checkbox-label-font-weight
  • 新增 --checkbox-label-line-height

circle-progress 组件​

  • 新增 --progress-pivot-color

countdown 组件​

  • 新增 --countdown-small-font-size ，未设置时使用 --countdown-font-size
  • 新增 --countdown-medium-font-size ，未设置时使用 --countdown-font-size
  • 新增 --countdown-big-font-size ，未设置时使用 --countdown-font-size
  • 新增 --countdown-large-font-size ，未设置时使用 --countdown-font-size
  • 新增 --countdown-small-day-font-size ，未设置时使用 --countdown-day-font-size
  • 新增 --countdown-medium-day-font-size ，未设置时使用 --countdown-day-font-size
  • 新增 --countdown-big-day-font-size ，未设置时使用 --countdown-day-font-size
  • 新增 --countdown-large-day-font-size ，未设置时使用 --countdown-day-font-size
  • 新增 --countdown-small-dot-font-size ，未设置时使用 --countdown-dot-size
  • 新增 --countdown-medium-dot-font-size ，未设置时使用 --countdown-dot-size
  • 新增 --countdown-big-dot-font-size ，未设置时使用 --countdown-dot-size
  • 新增 --countdown-large-dot-font-size ，未设置时使用 --countdown-dot-size
  • 新增 --datetime-picker-row-selected-font-size
  • 新增 --datetime-picker-row-selected-line-height
  • 新增 --datetime-picker-row-selected-font-weight
  • 新增 --datetime-picker-row-font-size
  • 新增 --datetime-picker-row-line-height
  • 新增 --datetime-picker-row-font-weight

dialog 组件​

  • 新增 --dialog-inner-padding-top
  • 新增 --dialog-inner-padding-bottom
  • 新增 --dialog-title-margin-bottom
  • 新增 --dialog-title-font-weight
  • 新增 --dialog-title-line-height
  • 新增 --dialog-content-color
  • 新增 --dialog-content-font-size
  • 新增 --dialog-content-font-weight
  • 新增 --dialog-content-line-height
  • 移除 --dialog-inner-content-color ，使用 --dialog-content-color 代替
  • 移除 --dialog-inner-title-color ，使用 --dialog-title-color 代替
  • 移除 --dialog-actions-space ，使用 --dialog-actions-space-horizontal 和 --dialog-actions-space-bottom 代替

empty 组件​

  • 移除 --empty-medium-title-margin-top ，使用 --empty-middle-gap 代替
  • 移除 --empty-big-title-margin-top ，使用 --empty-middle-gap 代替

image 组件​

  • 新增 --image-radius

input-number 组件​

  • 新增 --input-number-radius
  • 新增 --input-number-plus-color
  • 文字的颜色由 --input-number-color 修改为 --input-number-text-color
  • 文字的禁用颜色由 --input-number-disabled-input-color 修改为 --input-number-disabled-text-color
  • 文字填充颜色由 --input-number-disabled-input-color 修改为 --input-number-disabled-text-color
  • 减号的背景色由 --input-number-background 修改为 --input-number-minus-background
  • 加号的背景色由 --input-number-background 修改为 --input-number-plus-background

input 组件​

  • 新增 --input-font-weight
  • 新增 --input-required-gap
  • 新增 --input-required-color
  • 新增 --input-required-font-size
  • 新增 --input-required-line-height

loading 组件​

  • 新增 --loading-font-size
  • 新增 --loading-font-weight
  • 新增 --loading-line-height
  • 新增 --loading-text-column-padding-v
  • 新增 --loading-text-column-padding-h

notice-bar 组件​

  • 新增 --notice-bar-padding-v
  • 新增 --notice-bar-padding-h
  • 新增 --notice-bar-font-size
  • 新增 --notice-bar-line-height
  • 新增 --notice-bar-left-icon-color
  • 新增 --notice-bar-left-icon-size
  • 新增 --notice-bar-right-icon-color
  • 新增 --notice-bar-right-icon-size

picker 组件​

  • 新增 --picker-row-font-size
  • 新增 --picker-row-font-weight
  • 新增 --picker-row-line-height
  • 新增 --picker-row-selected-font-size
  • 新增 --picker-row-selected-font-weight
  • 新增 --picker-row-selected-line-height
  • 新增 --popup-title-bar-title-color
  • 新增 --popup-title-bar-subtitle-color

progress 组件​

  • 新增 --progress-pivot-font-size
  • 新增 --progress-pivot-font-weight
  • 新增 --progress-pivot-line-height

radio button 组件​

  • 新增 --radio-button-font-size
  • 新增 --radio-button-line-height
  • 新增 --radio-button-font-weight

radio 组件​

  • 新增 --radio-label-font-size
  • 新增 --radio-label-font-weight
  • 新增 --radio-label-line-height

search 组件​

  • 新增 --search-line-height
  • 新增 --input-placeholder-color
  • 新增 --input-title-color
  • 新增 --search-icon-size
  • 移除 --search-out-height
  • 移除 --search-inner-height

share-sheet 组件​

  • 新增 --share-sheet-item-text-font-weight
  • 新增 --share-sheet-item-text-line-height
  • 新增 --share-sheet-item-text-font-size
  • 新增 --share-sheet-cancel-font-size
  • 新增 --share-sheet-cancel-line-height
  • 新增 --share-sheet-cancel-padding-v
  • 新增 --share-sheet-cancel-top-gap
  • 内容区域的左右内边距由 --share-sheet-content-margin-h 修改为 --share-sheet-content-padding-h
  • 内容区域的上下内边距由 --share-sheet-content-margin-v 修改为 --share-sheet-content-padding-v
  • 移除 --share-sheet-cancel-height
  • 新增 --sidebar-font-weight
  • 新增 --sidebar-active-font-weight
  • 新增 --sidebar-width

slider 组件​

  • 新增 --slider-thumb-size

steps 组件​

  • --steps-icon-margin-right 修改为 --steps-icon-padding-right

tabbar-item 组件​

  • 新增 --tabbar-item-title-font-weight
  • 新增 --tabbar-item-title-line-height

tag 组件​

  • 新增 --tag-line-height
  • 新增 --tag-icon-font-size
  • 移除 --tag-color-10
  • 移除 --tag-theme
  • 移除 --tag-height
  • --tag-color 修改为 --tag-prop-color

textarea 组件​

  • 新增 --textarea-font-weight
  • 新增 --textarea-color
  • 新增 --textarea-count-color
  • 新增 --textarea-placeholder-color

toast 组件​

  • 新增 --toast-text-font-weight
  • 新增 --toast-text-font-size
  • 新增 --toast-text-line-height
  • 新增 --toast-icon-size

tooltip 组件​

  • 新增 --tooltip-inner-font-weight

tree-select​

  • 移除 --tree-select-cell-h

uploader​

  • --uploader-large-radius / --uploader-small-radius 改为 --uploader-radius
  • --uploader-lage-size / --uploader-small-size 改为 --uploader-size
  • --uploader-large-margin / --uploader-small-margin 改为 --uploader-margin
  • 新增 --uploader-action-font-weight
  • 新增 --uploader-action-line-height
  • 新增 --uploader-icon-font-size