0.31.0 升级至 0.32.0 版本 CSS BEM 规范改动列表

[xiaosansiji]

由于历史原因，之前的 CSS 类名没有很好地规范，为了以后可以更好更规范地推进，在 0.32.0 的版本中，我们把之前很多不规范的 CSS类名都进行了改动，具体改动如列表所示：

表格组件

组件	原类名	新类名
Table	table-body	t-table__body
Table	align-center	t-align-center
Table	align-left	t-align-left
Table	align-right	t-align-right
Table	text-ellipsis	t-text-ellipsis
Table	t-table-pagination	t-table__pagination
Table	t-table-sort-icon	t-table__sort-icon
Table	t-table-double-icons	t-table__double-icons
Table	t-table-sort-icon-active	t-table__sort-icon--active
Table	t-table-expand-box	t-table__expand-box
Table	t-table-sort-icon-active	t-table__sort-icon--active
Table	t-table-content	t-table__content
Table	t-table-expandable-icon-cell	t-table__expandable-icon-cell
Table	t-table--empty	t-table__empty
Table	t-table-valign__top	t-table--align-top
Table	t-table--loading-async	t-table__async-loading
Table	t-table--loading-status-loading	t-is-loading
Table	t-table--loading-status-load-more	t-is-load-more
Table	t-table-filter-icon	t-table__filter-icon
Table	t-table-filter-pop	t-table__filter-pop
Table	t-table-filter-pop-content	t-table__filter-pop-content
Table	t-table-filter-pop-content__inner	t-table__filter-pop-content-inner
Table	t-table-content--scrollable-to-left	t-table__content--scrollable-to-left
Table	t-table-content--scrollable-to-right	t-table__content--scrollable-to-right
Table	t-table-expanded-cell	t-table__expanded-cell

Menu 组件

组件	原类名	新类名
MenuGroup	t-menu-group-title	t-menu-group__title

Dropdown组件

组件	原类名	新类名
Dropdown	t-dropdown__menu__column	t-dropdown__menu-column
Dropdown	t-dropdown__item__content	t-dropdown__item-content
Dropdown	t-dropdown__item__content_text	t-dropdown__item-text
Dropdown	has-suffix	t-dropdown--suffix
Dropdown	children-suffix	t-dropdown__item-icon

Divider组件

组件	原类名	新类名
Divider 组件	t-divider-inner-text	t-divider__inner-text

Drawer组件

组件	原类名	新类名
Drawer	t-drawer-attach	t-drawer--attach
Drawer	t-drawer-left	t-drawer--left
Drawer	t-drawer-right	t-drawer--right
Drawer	t-drawer-top	t-drawer--top
Drawer	t-drawer-bottom	t-drawer--bottom
Drawer	t-drawer-open	t-drawer--open
Drawer	t-drawer-no-mask	t-drawer--without-mask
Drawer	t-drawer-confirm	t-drawer__confirm
Drawer	t-drawer-cancel	t-drawer__cancel

组件	原类名	新类名
Pagination	t-pagiantion__btn--prev	t-pagiantion__btn-prev
Pagination	t-pagiantion__btn--next	t-pagiantion__btn-next

Dialog 组件

组件	原类名	新类名
Dialog	t-dialog-ctx	t-dialog__ctx
Dialog	t-dialog-ctx--fixed	t-dialog__ctx--fixed
Dialog	t-not-visable	t-is-hidden
Dialog	t-dialog-mask	t-dialog__mask
Dialog	t-dialog-mask--hidden	t-is-hidden
Dialog	t-dialog-confirm	t-dialog__confirm
Dialog	t-dialog-cancel	t-dialog__cancel

Message

组件	原类名	新类名
Message	t-message-close	t-message__close
Message	t-message-list	t-message__list

Notification

组件	原类名	新类名
Notification	t-notification__detail--item	t-notification__detail-item

Anchor组件

组件	原类名	新类名
Anchor	t-anchor_line	t-anchor__line
Anchor	t-anchor-item	t-anchor__item
Anchor	t-anchor-item_link	t-anchor__item-link
Anchor	t-anchor-target	t-anchor__target
Anchor	cursor-wrapper	t-anchor__line-cursor-wrapper
Anchor	cursor	t-anchor__line-cursor
Anchor	t-copy	t-anchor__copy

Slider组件

组件	原类名	新类名
Slider	t-slider-contianer	t-slider__container
Slider	t-slider-input-container	t-slider__input-container
Slider	center-line	t-slider__center-line
Slider	t-slide-vertical	t-slide--vertical

Form 组件

组件	原类名	新类名
Form	t-form__controls--content	t-form__controls-content

Badge

组件	原类名	新类名
Badge	t-badge-static	t-badge--static

List

组件	原类名	新类名
List	t-list-items	t-list__inner

Cascader 组件

组件	原类名	新类名
Cascade	t-cascader-placeholder	t-cascader__placeholder
Cascade	t-cascader-content	t-cascader__content
Cascade	t-cascader-is-multiple	t-cascader--multiple
Cascade	t-cascader-dropdown	t-cascader__dropdown
Cascade	t-cascader-panel	t-cascader__panel
Cascade	t-cascader-menu	t-cascader__menu
Cascade	t-cascader-item	t-cascader__item
Cascade	t-cascader-item--highlight	t-cascader__item--highlight
Cascade	t-cascader-item-have-icon	t-cascader__item--with-icon
Cascade	t-cascader-item-is-leaf	t-cascader__item--leaf
Cascade	t-cascader-item__label	t-cascader__item-label
Cascade	t-cascader-item__label--filter	t-cascader__item-label--filter
Cascade	t-cascader-item__is-empty	t-cascader__empty
Cascade	t-cascader-menu__seperator	t-cascader__menu-seperator
Cascade	t-cascader-menu__filter	t-cascader__menu-filter
Cascade	t-cascader-search-input	t-cascader__search-input
Cascade	t-cascader-icon	t-cascader__icon
Cascade	t-cascader-item-icon	t-cascader__item-icon
Cascade	t-cascader-panel	t-cascader__panel

Calendar组件

组件	原类名	新类名
Calendar	t-is-now	t-calendar__table-body-cell--now
Calendar	t-calendar__table-body-cell-value	t-calendar__table-body-cell-display

DatePicker 组件

组件	原类名	新类名
DatePicker	t-date-picker-popup-reference	t-date-picker__popup-reference
DatePicker	t-date-picker--container	t-date-picker__container
DatePicker	t-date-picker--panels	t-date-picker__panels
DatePicker	t-date-picker-header	t-date-picker__header
DatePicker	t-date-picker-header-title	t-date-picker__header-title
DatePicker	t-date-header__btn	t-date-picker__header-btn
DatePicker	t-date-picker-header-controller	t-date-picker__header-controller
DatePicker	t-date-cell__wrapper	t-date-picker__cell-wrapper
DatePicker	t-date-picker-year	t-date-picker--year
DatePicker	t-date-picker-month	t-date-picker--month
DatePicker	t-date-picker-date	t-date-picker--date
DatePicker	t-date-picker-range	t-date-picker--range
DatePicker	t-date-cell__text	t-date-picker__cell-text
DatePicker	t-date-picker-presets	t-date-picker__presets
DatePicker	t-date	t-date-picker__panel
DatePicker	t-date-cell--now	t-date-picker__cell--now
DatePicker	t-date-cell--active	t-date-picker__cell--active
DatePicker	t-date-cell--disabled	t-date-picker__cell--disabled
DatePicker	t-date-cell--highlight	t-date-picker__cell--highlight
DatePicker	t-date-cell--active-start	t-date-picker__cell--active-start
DatePicker	t-date-cell--active-end	t-date-picker__cell--active-end
DatePicker	t-date-cell--additional	t-date-picker__cell--additional
DatePicker	t-date-cell--first-day-of-month	t-date-picker__cell--first-day-of-month
DatePicker	t-date-cell--last-day-of-month	t-date-picker__cell--last-day-of-month

Grid 组件

组件	原类名	新类名
Grid	t-row-start	r-row--start
Grid	t-row-center	r-row--center
Grid	t-row-end	r-row--end
Grid	t-row-space-between	t-row--space-between
Grid	t-row-space-around	t-row--space-around
Grid	t-row-top	t-row--top
Grid	t-row-middle	t-row--middle
Grid	t-row-bottom	t-row--bottom

Layout

组件	原类名	新类名
Layout	t-layout-has-sider	t-layout--with-sider
Layout	t-layout--header	t-layout__header
Layout	t-layout--content	t-layout__content
Layout	t-layout--sider	t-layout__sider
Layout	t-layout--footer	t-layout__footer

Popup

组件	原类名	新类名
Popup	t-popup-content	t-popup__content
Popup	t-popup-reference	t-popup__reference
Popup	t-popup_animation-enter	t-popup--animation-enter
Popup	t-popup_animation-enter-from	t-popup--animation-enter-from
Popup	t-popup_animation-exiting	t-popup--animation-exiting
Popup	t-popup_animation-leave-to	t-popup--animation-leave-to
Popup	t-popup_animation-enter-to	t-popup--animation-enter-to
Popup	t-popup_animation-entering	t-popup--animation-entering
Popup	t-popup_animation-leave-from	t-popup--animation-leave-from
Popup	t-popup_animation-leave	t-popup--animation-leave
Popup	t-popup_animation-enter-active	t-popup--animation-enter-active
Popup	t-popup_animation-leave-active	t-popup--animation-leave-active

Tooltip

组件	原类名	新类名
Tooltip	t-tooltip-light	t-tooltip--light
Tooltip	t-tooltip-default	t-tooltip--default
Tooltip	t-tooltip-primary	t-tooltip--primary
Tooltip	t-tooltip-success	t-tooltip--success
Tooltip	t-tooltip-danger	t-tooltip--danger
Tooltip	t-tooltip-warning	t-tooltip--warning

Tooltip

组件	原类名	新类名
Tooltip	t-tooltip-light	t-tooltip--light
Tooltip	t-tooltip-default	t-tooltip--default
Tooltip	t-tooltip-primary	t-tooltip--primary
Tooltip	t-tooltip-success	t-tooltip--success
Tooltip	t-tooltip-danger	t-tooltip--danger
Tooltip	t-tooltip-warning	t-tooltip--warning

Radio

组件	原类名	新类名
Radio	t-radio-group-outline	t-radio-group__outline
Radio	t-radio-group-filled	t-radio-group--filled
Radio	t-radio-group-filled-bg-block	t-radio-group__bg-block
Radio	t-radio-group-primary-filled	t-radio-group--primary-filled
Radio	t-radio-group-small	t-size-s
Radio	t-radio-group-medium	t-size-m
Radio	t-radio-group-large	t-size-l

TimePicker

组件	原类名	新类名
TimePicker	t-time-picker-panel__container	t-time-picker__panel-container
TimePicker	t-time-picker-panel	t-time-picker__panel
TimePicker	t-time-picker-panel__body	t-time-picker__panel-body
TimePicker	t-time-picker-panel-section	t-time-picker__panel-section
TimePicker	t-time-picker-panel-section__body	t-time-picker__panel-section-body
TimePicker	t-time-picker-panel-section__footer	t-time-picker__panel-section-footer

Tree

组件	原类名	新类名
Tree	t-tree--fx	t-tree--transition
Tree	t-tree-toggle-enter-active	t-tree__item--enter-active
Tree	t-tree-toggle-leave-active	t-tree__item--leave-active

Upload

组件	原类名	新类名
Upload	t-upload-icon-delete	t-upload__icon-delete
Upload	t-upload-list__file	t-upload__list-file
Upload	t-upload-list__item	t-upload__list-item
Upload	t-upload-list__name	t-upload__list-name
Upload	t-upload-list__content	t-upload__list-content
Upload	t-upload-list__controll	t-upload__list-controll
Upload	t-upload-list__img	t-upload__list-img
Upload	t-upload__highlight	t-upload--highlight
Upload	t-upload-dialog	t-upload__dialog
Upload	t-upload-card__mask-disabled	t-is-disabled
Upload	t-upload__small	t-size-s
Upload	t-display-text--margin	t-upload__display-text--margin
Upload	t-upload-card-container	t-upload__card-container
Upload	t-upload-card	t-upload__card
Upload	t-upload-card__item	t-upload__card-item
Upload	t-upload-card__name	t-upload__card-name
Upload	t-upload-card__content	t-upload__card-content
Upload	t-upload-card__mask__item	t-upload__card-mask-item
Upload	t-upload-card__status-wrap	t-upload__card-status-wrap
Upload	t-upload-card__content-border	t-is-bordered
Upload	t-upload-card__status	t-upload__card-status
Upload	t-upload-card__mask	t-upload__card-mask
Upload	t-upload-dialog__body-img-box	t-upload__dialog-body-img-box

Transfer

组件	原类名	新类名
Transfer	t-transfer-list	t-transfer__list
Transfer	t-transfer-list-source	t-transfer__list-source
Transfer	t-transfer-list-target	t-transfer__list-target
Transfer	t-transfer-list__header	t-transfer__list-header
Transfer	t-transfer-list__body	t-transfer__list-body
Transfer	t-transfer-list-with-search	t-transfer__list--with-search
Transfer	t-transfer-list-search-wrapper	t-transfer__search-wrapper
Transfer	t-transfer-list__content	t-transfer__list-content
Transfer	t-transfer-list__item	t-transfer__list-item
Transfer	t-transfer-list__wrapper	t-transfer__list-wrapper
Transfer	t-transfer-list__pagination	t-transfer__list-pagination
Transfer	t-transfer-list__footer	t-transfer__list-footer
Transfer	t-transfer-operations	t-transfer__operations
Transfer	t-transfer-search	t-transfer__search
Transfer	t-transfer-with-tree	t-transfer--with-tree
Transfer	t-transfer-pagination	t-transfer__pagination
Transfer	t-transfer-footer	t-transfer__footer
Transfer	t-transfer-wrapper	t-transfer__wrapper

Select组件

组件	原类名	新类名
Select	t-select-wrap	t-select__wrap
Select	t-select-right-icon	t-select__right-icon
Select	t-select-left-icon	t-select__left-icon
Select	t-select-placeholder	t-select__placeholder
Select	t-select-input	t-select__input
Select	t-select-popup-reference	t-select__popup-reference
Select	t-select-dropdown	t-select__dropdown
Select	t-select-empty	t-select__empty
Select	t-select-loading-tips	t-select__loading-tips
Select	t-select-selectedSingle	t-select__single
Select	t-option-group	t-select-option-group
Select	t-option-group__divider	t-select-option-group__divider
Select	t-option-group-header	t-select-option-group__header
Select	t-select-right-icon__clear	t-select__right-icon-clear
Select	t-select-active-icon	t-select__active-icon

Steps

组件	原类名	新类名
Steps	t-steps-item-content	t-steps-item__content
Steps	t-steps-item-title	t-steps-item__title
Steps	t-steps-item-icon	t-steps-item__icon
Steps	t-steps-item-description	t-steps-item__description
Steps	t-steps-item-canclick	t-steps-item--clickable

[chaishi]

published in v0.32.0