从 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 组件，用于设置整体主题皮肤、多语言切换、反黑反白模式设置等

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

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

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

组件 API 调整

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

  <div>
      <ti-button color="#ff0000">按钮</ti-button>
  +   <ti-button color="theme.color.brand.1000">按钮</ti-button>
  </div>

• 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-titlebar 组件

• 新增 --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-item 组件

• 新增 --sidebar-font-weight
• 新增 --sidebar-active-font-weight

sidebar 组件

• 新增 --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