├── .gitignore ├── .npmrc ├── .prettierrc ├── LICENSE ├── README.md ├── base-components ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── breezr.config.js ├── docs │ └── CONTRIBUTING.md ├── fixtures │ └── breezr │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── breezr.config.js │ │ ├── package.json │ │ └── src │ │ ├── index.html │ │ ├── index.js │ │ └── index.less ├── fusion-theme │ ├── atomgit │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── b-design │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── hybridcloud-dark │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── hybridcloud │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── wind │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── xconsole-dark │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── xconsole │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── yunxiao-dark │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ ├── yunxiao-v5 │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css │ └── yunxiao │ │ ├── next-noreset.var.css │ │ ├── next.var.css │ │ └── variables.css ├── index.html ├── package.json ├── pages │ ├── 404$.tsx │ ├── _theme.tsx │ ├── declare.d.ts │ ├── dynamic-theme-base │ │ ├── wind.scss │ │ ├── xconsole-dark.scss │ │ └── xconsole.scss │ ├── index$.md │ ├── moment-locale.js │ ├── style.scss │ └── theme-vars │ │ ├── aone.scss │ │ ├── atomgit.scss │ │ ├── b-design.scss │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── teamix.scss │ │ ├── wind.scss │ │ ├── xconsole-dark.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-dark.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss ├── scripts │ ├── add-fusion-type-export.js │ ├── analyze-xconsole-vars.js │ ├── build-css.js │ ├── copy-comp.js │ ├── filter-css-var.js │ ├── gene-css-def.js │ ├── generate-css-var-reset.js │ ├── postinstall.js │ ├── publish-wind │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── index-noreset.scss │ │ ├── index.scss │ │ ├── package.json │ │ └── scripts │ │ │ └── prepare.js │ ├── publish-xconsole │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── package.json │ │ └── scripts │ │ │ ├── generate-intl-messages.js │ │ │ ├── locale │ │ │ ├── en-us.js │ │ │ └── zh-cn.js │ │ │ ├── prepare.js │ │ │ └── windIntlMessages │ │ │ ├── en-us.json │ │ │ └── zh-cn.json │ ├── sync-demo.js │ ├── sync-markdown.js │ ├── theme-data.js │ ├── update-theme.js │ └── utils.js ├── src │ ├── affix │ │ ├── demo │ │ │ ├── absolute-position.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom-container.tsx │ │ │ ├── custom-offset.tsx │ │ │ └── on-affix.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── animate │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── expand.tsx │ │ │ └── multiple.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── avatar │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── type.tsx │ │ │ └── with-badge.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── badge │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── clickable.tsx │ │ │ ├── content.tsx │ │ │ ├── dot.tsx │ │ │ ├── dynamic-content.tsx │ │ │ ├── no-wrapper.tsx │ │ │ └── overflowCount.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── balloon │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── alignment.tsx │ │ │ ├── basic.tsx │ │ │ ├── control.tsx │ │ │ ├── nested.tsx │ │ │ ├── onCloseClick.tsx │ │ │ ├── tooltip.tsx │ │ │ └── triggerType.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── box │ │ ├── demo │ │ │ ├── align&justify.tsx │ │ │ ├── basic.tsx │ │ │ ├── direction.tsx │ │ │ ├── padding&margin.tsx │ │ │ └── wrap.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── breadcrumb │ │ ├── demo │ │ │ ├── auto-more.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom-item.tsx │ │ │ ├── more.tsx │ │ │ └── separator.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── button │ │ ├── b-design.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── component.tsx │ │ │ ├── custom-icons.tsx │ │ │ ├── disabled.tsx │ │ │ ├── ghost.tsx │ │ │ ├── group.tsx │ │ │ ├── icon.tsx │ │ │ ├── loading.tsx │ │ │ ├── only-icon.tsx │ │ │ ├── size.tsx │ │ │ └── type.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── calendar │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── card.tsx │ │ │ ├── custom-cell.tsx │ │ │ ├── default-visible-month.tsx │ │ │ ├── disabled.tsx │ │ │ ├── locale.tsx │ │ │ ├── lunar.tsx │ │ │ └── panel.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── calendar2 │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── card.tsx │ │ │ ├── custom-cell.tsx │ │ │ ├── default-visible-month.tsx │ │ │ ├── disabled.tsx │ │ │ ├── lunar.tsx │ │ │ └── panel.tsx │ │ ├── index.tsx │ │ ├── main.scss │ │ └── xconsole.scss │ ├── card │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── collapsable-head.tsx │ │ │ ├── collapsable-tail.tsx │ │ │ ├── divider.tsx │ │ │ ├── free.tsx │ │ │ ├── header-actions.tsx │ │ │ └── media.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── cascader-select │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── change-on-select.tsx │ │ │ ├── check-strictyle.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── custom.tsx │ │ │ ├── disabled.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── expand-trigger.tsx │ │ │ ├── expanded-value.tsx │ │ │ ├── multiple.tsx │ │ │ ├── only-leaf.tsx │ │ │ └── search.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── cascader │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── check-strictly.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── expand-trigger.tsx │ │ │ ├── multiple.tsx │ │ │ └── only-leaf.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── checkbox │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── all-check.tsx │ │ │ ├── basic.tsx │ │ │ ├── control.tsx │ │ │ ├── dataSource.tsx │ │ │ ├── disbled.tsx │ │ │ ├── group.tsx │ │ │ ├── indeterminate.tsx │ │ │ ├── isPreview.tsx │ │ │ └── uncontrol.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── collapse │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── accordion.tsx │ │ │ ├── basic.tsx │ │ │ ├── datasource.tsx │ │ │ ├── disabled.tsx │ │ │ ├── event.tsx │ │ │ └── nested.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── common-var.scss │ ├── common.scss │ ├── config-provider │ │ ├── ctx.ts │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── consumer.tsx │ │ │ ├── error-boundary.tsx │ │ │ ├── interactive.tsx │ │ │ ├── locale.tsx │ │ │ └── rtl.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── utils.ts │ ├── date-picker │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom-range-picker.tsx │ │ │ ├── default-visible-month.tsx │ │ │ ├── default.tsx │ │ │ ├── disabled-date.tsx │ │ │ ├── disabled.tsx │ │ │ ├── field.tsx │ │ │ ├── footer.tsx │ │ │ ├── format.tsx │ │ │ ├── popup.tsx │ │ │ ├── show-time.tsx │ │ │ └── size.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ └── xconsole.scss │ ├── date-picker2 │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── default-panel.tsx │ │ │ ├── disabled.tsx │ │ │ ├── footer.tsx │ │ │ ├── format.tsx │ │ │ ├── noborder.tsx │ │ │ ├── preset.tsx │ │ │ ├── range-picker.tsx │ │ │ ├── show-time.tsx │ │ │ └── size.tsx │ │ ├── hybridcloud.scss │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── declare.d.ts │ ├── dialog │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── customize-footer.tsx │ │ │ ├── footer.tsx │ │ │ ├── height.tsx │ │ │ ├── large-content.tsx │ │ │ ├── promise.tsx │ │ │ ├── quick.tsx │ │ │ ├── should-update-position.tsx │ │ │ └── withContext.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── divider │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── direction.tsx │ │ │ └── orientation.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── drawer │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── customFooter.tsx │ │ │ ├── double.tsx │ │ │ ├── more.tsx │ │ │ ├── okAndCancel.tsx │ │ │ ├── placement.tsx │ │ │ ├── quick.tsx │ │ │ └── select.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ └── yunxiao-v5.scss │ ├── dropdown │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── controlled.tsx │ │ │ └── trigger-type.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── field │ │ ├── demo │ │ │ ├── autounmout.tsx │ │ │ ├── basic.tsx │ │ │ ├── custom.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── hooks.tsx │ │ │ ├── mix.tsx │ │ │ ├── normalize.tsx │ │ │ ├── onchange.tsx │ │ │ ├── redux.tsx │ │ │ ├── seterror.tsx │ │ │ ├── topath.tsx │ │ │ ├── validator.tsx │ │ │ ├── validatorPromise.tsx │ │ │ └── valuename.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── form │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── base.tsx │ │ │ ├── custom.tsx │ │ │ ├── field.tsx │ │ │ ├── layout.tsx │ │ │ ├── mix.tsx │ │ │ ├── mobile.tsx │ │ │ ├── nest.tsx │ │ │ ├── onsubmit.tsx │ │ │ ├── preview.tsx │ │ │ ├── register.tsx │ │ │ ├── responsive-grid.tsx │ │ │ ├── responsive.tsx │ │ │ ├── size.tsx │ │ │ ├── validate-basic.tsx │ │ │ ├── validate-label-as-name.tsx │ │ │ └── validate-static.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ └── yunxiao.scss │ ├── grid │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── align.tsx │ │ │ ├── basic.tsx │ │ │ ├── breakpoint.tsx │ │ │ ├── custom-elem-type.tsx │ │ │ ├── fixed.tsx │ │ │ ├── gutter.tsx │ │ │ ├── hidden.tsx │ │ │ ├── justify.tsx │ │ │ ├── nest.tsx │ │ │ ├── offset-fixed.tsx │ │ │ ├── offset.tsx │ │ │ ├── type.tsx │ │ │ └── wrap.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── icon │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── iconfont.tsx │ │ │ ├── size.tsx │ │ │ ├── style.tsx │ │ │ ├── type.tsx │ │ │ └── xconsole-icons.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── wind-icon-types.js │ │ └── xconsole-icon-types.js │ ├── index-console-components.ts │ ├── index-with-locale.ts │ ├── index.ts │ ├── input │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── addon.tsx │ │ │ ├── autoheight.tsx │ │ │ ├── basic.tsx │ │ │ ├── clear.tsx │ │ │ ├── disabled.tsx │ │ │ ├── group.tsx │ │ │ ├── inner.tsx │ │ │ ├── maxlen.tsx │ │ │ ├── passwd.tsx │ │ │ ├── state.tsx │ │ │ ├── style.tsx │ │ │ └── trim.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── judge-os.ts │ ├── list │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── complex.tsx │ │ │ ├── custom-loading.tsx │ │ │ ├── empty.tsx │ │ │ └── loading.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── loading │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── fullscreen.tsx │ │ │ ├── indicator.tsx │ │ │ ├── size.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── state.tsx │ │ │ └── tipAlign.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ └── index.tsx │ ├── locale │ │ ├── en-us.ts │ │ ├── it-it.ts │ │ ├── ja-jp.ts │ │ ├── vi-vn.ts │ │ ├── zh-cn.ts │ │ ├── zh-hk.ts │ │ └── zh-tw.ts │ ├── menu-button │ │ ├── b-design.scss │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── menu.tsx │ │ │ ├── select.tsx │ │ │ └── size.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── menu │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accordian.tsx │ │ │ ├── basic.tsx │ │ │ ├── context.tsx │ │ │ ├── csutom-select.tsx │ │ │ ├── custom-popup.tsx │ │ │ ├── hover.tsx │ │ │ ├── hoz.tsx │ │ │ ├── popup-align.tsx │ │ │ ├── popup.tsx │ │ │ ├── render-more.tsx │ │ │ ├── select.tsx │ │ │ └── selected.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── message │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── control.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── inline-close.tsx │ │ │ ├── size-shape.tsx │ │ │ ├── toast-quick.tsx │ │ │ ├── toast.tsx │ │ │ ├── type.tsx │ │ │ ├── update-message.tsx │ │ │ └── withContext.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── modal │ │ ├── demo │ │ │ ├── basic-yuxiao.tsx │ │ │ ├── basic.tsx │ │ │ ├── side-drawer.tsx │ │ │ └── title-editable.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── yunxiao-dark.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── nav │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── custom.tsx │ │ │ ├── fixed.tsx │ │ │ ├── group.tsx │ │ │ ├── icon-only.tsx │ │ │ ├── open-mode.tsx │ │ │ ├── popup-align.tsx │ │ │ ├── vertical-smart.tsx │ │ │ └── vertical.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── notification │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── duration.tsx │ │ │ ├── icon.tsx │ │ │ ├── position.tsx │ │ │ ├── style.tsx │ │ │ ├── type.tsx │ │ │ └── update.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── number-picker │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── disabled.tsx │ │ │ ├── editable.tsx │ │ │ ├── format.tsx │ │ │ ├── limit.tsx │ │ │ ├── mobile.tsx │ │ │ ├── precision.tsx │ │ │ ├── size.tsx │ │ │ ├── step.tsx │ │ │ └── trigger.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── overlay │ │ ├── demo │ │ │ ├── align.tsx │ │ │ ├── backdrop.tsx │ │ │ ├── baisc.tsx │ │ │ ├── controlled.tsx │ │ │ ├── nested.tsx │ │ │ ├── popup.tsx │ │ │ ├── scroll.tsx │ │ │ └── trigger-type.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── pagination │ │ ├── demo │ │ │ ├── control.tsx │ │ │ ├── dropdown-direction.tsx │ │ │ ├── link.tsx │ │ │ ├── more.tsx │ │ │ ├── page-size.tsx │ │ │ ├── shape.tsx │ │ │ ├── show-jump.tsx │ │ │ ├── show-total.tsx │ │ │ ├── size.tsx │ │ │ ├── type.tsx │ │ │ └── uncontrol.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ └── xconsole.scss │ ├── paragraph │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ └── type.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── progress │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── circle.tsx │ │ │ ├── color.tsx │ │ │ ├── controlled.tsx │ │ │ ├── percentrender.tsx │ │ │ ├── progressive.tsx │ │ │ ├── size.tsx │ │ │ └── state.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── radio │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── button.tsx │ │ │ ├── control.tsx │ │ │ ├── dataSource.tsx │ │ │ ├── direction.tsx │ │ │ ├── disabled.tsx │ │ │ ├── group.tsx │ │ │ ├── isPreview.tsx │ │ │ ├── uncontrol.tsx │ │ │ └── useWithGrid.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ └── yunxiao.scss │ ├── range │ │ ├── b-design.scss │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── change.tsx │ │ │ ├── control.tsx │ │ │ ├── fixedWidth.tsx │ │ │ ├── marks.tsx │ │ │ ├── reverse.tsx │ │ │ └── tipRender.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── rating │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── disabled.tsx │ │ │ ├── grade.tsx │ │ │ ├── half.tsx │ │ │ ├── render-preview.tsx │ │ │ └── size.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── yunxiao-v5.scss │ ├── responsive-grid │ │ ├── demo │ │ │ └── basic.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── search │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── base.tsx │ │ │ ├── combobox.tsx │ │ │ ├── custom.tsx │ │ │ ├── filter.tsx │ │ │ ├── size.tsx │ │ │ └── type.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── select │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── combobox-basic.tsx │ │ │ ├── combobox-remote.tsx │ │ │ ├── combobox.tsx │ │ │ ├── custom-menu-props.tsx │ │ │ ├── custom-menu.tsx │ │ │ ├── custom-overlay.tsx │ │ │ ├── custom-value.tsx │ │ │ ├── max-count.tsx │ │ │ ├── multiple.tsx │ │ │ ├── select-basic.tsx │ │ │ ├── select-cascader.tsx │ │ │ ├── select-label.tsx │ │ │ ├── select-options-group.tsx │ │ │ ├── select-scroll-load.tsx │ │ │ ├── select-search.tsx │ │ │ ├── tag.tsx │ │ │ ├── use-detail-value.tsx │ │ │ └── virtual-select.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── shell │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── complicated.tsx │ │ │ ├── header-global-local.tsx │ │ │ └── header-global.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── slider │ │ ├── demo │ │ │ ├── arrow-position.tsx │ │ │ ├── autoplay.tsx │ │ │ ├── basic.tsx │ │ │ ├── button-size.tsx │ │ │ ├── center-mode.tsx │ │ │ ├── custom-arrow.tsx │ │ │ ├── custom-slide.tsx │ │ │ ├── dots-direction.tsx │ │ │ ├── dots-render.tsx │ │ │ ├── dots-triggerType.tsx │ │ │ ├── fade.tsx │ │ │ ├── infinite.tsx │ │ │ ├── multiple.tsx │ │ │ ├── pause-on-hover.tsx │ │ │ ├── slick-goto.tsx │ │ │ ├── slide-change-hook.tsx │ │ │ ├── slide-direction.tsx │ │ │ ├── slider-with-dialog.tsx │ │ │ ├── slider-wrapper.tsx │ │ │ └── variable-width.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── split-button │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── composite.tsx │ │ │ ├── menu.tsx │ │ │ └── size.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ └── yunxiao-v5.scss │ ├── step │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── controlled.tsx │ │ │ ├── custom-step-item.tsx │ │ │ ├── direction.tsx │ │ │ ├── disable.tsx │ │ │ ├── percent.tsx │ │ │ ├── read-only.tsx │ │ │ └── step-process-failed.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── xconsole.scss │ │ └── yunxiao-v5.scss │ ├── switch │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── checked-children.tsx │ │ │ ├── disabled.tsx │ │ │ └── size.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── tab │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── closable.tsx │ │ │ ├── custom-style.tsx │ │ │ ├── custom-tab.tsx │ │ │ ├── disable-keyboard.tsx │ │ │ ├── disabled.tsx │ │ │ ├── editable-tab.tsx │ │ │ ├── excess-mode.tsx │ │ │ ├── extra.tsx │ │ │ ├── lazy-load.tsx │ │ │ ├── nested.tsx │ │ │ ├── position.tsx │ │ │ ├── shape.tsx │ │ │ ├── size.tsx │ │ │ ├── tab-in-grid.tsx │ │ │ └── trigger-type.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ ├── yunxiao-v5.scss │ │ └── yunxiao.scss │ ├── table │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── advanced.tsx │ │ │ ├── basic-columns.tsx │ │ │ ├── basic.tsx │ │ │ ├── clear-selection.tsx │ │ │ ├── colspan-lock-columns.tsx │ │ │ ├── colspan.tsx │ │ │ ├── column.tsx │ │ │ ├── crossline.tsx │ │ │ ├── crud.tsx │ │ │ ├── custom-loading.tsx │ │ │ ├── dragable.tsx │ │ │ ├── editable.tsx │ │ │ ├── expanded-complex.tsx │ │ │ ├── expanded-lock.tsx │ │ │ ├── expanded.tsx │ │ │ ├── filter&sort.tsx │ │ │ ├── fixed-header.tsx │ │ │ ├── get-row-props.tsx │ │ │ ├── list.tsx │ │ │ ├── lock-column.tsx │ │ │ ├── mix.tsx │ │ │ ├── multiple-header.tsx │ │ │ ├── pagination.tsx │ │ │ ├── resize.tsx │ │ │ ├── row-selection-config.tsx │ │ │ ├── selection.tsx │ │ │ ├── style.tsx │ │ │ └── virtual.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao.scss │ ├── tag │ │ ├── WindColorfulTag │ │ │ ├── Colored.tsx │ │ │ ├── ColoredGroup.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── b-design.scss │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── closable.tsx │ │ │ ├── colorful-tag.tsx │ │ │ ├── icon.tsx │ │ │ ├── selectable.tsx │ │ │ ├── size.tsx │ │ │ └── wind-colored-tag.tsx │ │ ├── hybridcloud-dark.scss │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ ├── xconsole.scss │ │ └── yunxiao.scss │ ├── theme │ │ ├── aone │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ ├── overwite-var.scss │ │ │ └── overwrite.scss │ │ ├── atomgit │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── b-design │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── hybridcloud-dark │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── global.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── hybridcloud │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── global.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── teamix │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ ├── overwite-var.scss │ │ │ └── overwrite.scss │ │ ├── wind │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom-reset.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── xconsole-dark │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom-reset.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── xconsole │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom-reset.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── icon.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ ├── legacy-icons.scss │ │ │ ├── overwrite.scss │ │ │ └── wind-icon.scss │ │ ├── yunxiao-dark │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ ├── yunxiao-v5 │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ │ └── yunxiao │ │ │ ├── css-var-all.scss │ │ │ ├── css-var-custom.scss │ │ │ ├── css-var-definition.scss │ │ │ ├── index-common.scss │ │ │ ├── index-no-reset.scss │ │ │ ├── index-no-var.scss │ │ │ ├── index.scss │ │ │ └── overwrite.scss │ ├── time-picker │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── default-value.tsx │ │ │ ├── disabled.tsx │ │ │ ├── field.tsx │ │ │ ├── format.tsx │ │ │ ├── render-menu.tsx │ │ │ ├── size.tsx │ │ │ ├── step.tsx │ │ │ └── value.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── time-picker2 │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── default-value.tsx │ │ │ ├── disabled.tsx │ │ │ ├── field.tsx │ │ │ ├── format.tsx │ │ │ ├── no-border.tsx │ │ │ ├── preset.tsx │ │ │ ├── render-menu.tsx │ │ │ ├── size.tsx │ │ │ ├── step.tsx │ │ │ └── value.tsx │ │ ├── hybridcloud.scss │ │ ├── index.tsx │ │ └── xconsole.scss │ ├── timeline │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── content.tsx │ │ │ ├── custom.tsx │ │ │ ├── fold.tsx │ │ │ ├── state.tsx │ │ │ └── timeLeft.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── transfer │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── control.tsx │ │ │ ├── custom-panel.tsx │ │ │ ├── custom.tsx │ │ │ ├── search.tsx │ │ │ ├── simple.tsx │ │ │ ├── sortable.tsx │ │ │ ├── table-transfer.tsx │ │ │ └── virtual-list.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.tsx │ │ ├── main.scss │ │ └── yunxiao-v5.scss │ ├── tree-select │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── basic.tsx │ │ │ ├── check.tsx │ │ │ ├── control.tsx │ │ │ ├── data.tsx │ │ │ ├── pro-search.tsx │ │ │ ├── search.tsx │ │ │ ├── select.tsx │ │ │ └── virtual-tree.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ ├── index.scss │ │ └── index.tsx │ ├── tree │ │ ├── custom.scss │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── control-check.tsx │ │ │ ├── control-select.tsx │ │ │ ├── data.tsx │ │ │ ├── draggable.tsx │ │ │ ├── dynamic.tsx │ │ │ ├── icon.tsx │ │ │ ├── line.tsx │ │ │ ├── node-block.tsx │ │ │ ├── render-child-nodes.tsx │ │ │ ├── search-tree.tsx │ │ │ └── virtual-tree.tsx │ │ ├── hybridcloud.scss │ │ ├── index.md │ │ └── index.tsx │ ├── tsconfig.json │ ├── typography │ │ ├── demo │ │ │ ├── basic.tsx │ │ │ ├── paragraph.tsx │ │ │ ├── text.tsx │ │ │ └── title.tsx │ │ ├── index.md │ │ └── index.tsx │ ├── upload │ │ ├── demo │ │ │ ├── accessibility.tsx │ │ │ ├── after-select.tsx │ │ │ ├── base.tsx │ │ │ ├── beforeupload.tsx │ │ │ ├── card.tsx │ │ │ ├── crop.tsx │ │ │ ├── data.tsx │ │ │ ├── directory.tsx │ │ │ ├── dragger.tsx │ │ │ ├── extra.tsx │ │ │ ├── image.tsx │ │ │ ├── limit.tsx │ │ │ ├── maxsize.tsx │ │ │ ├── oss.tsx │ │ │ ├── paste.tsx │ │ │ ├── submit.tsx │ │ │ ├── text.tsx │ │ │ └── with-form.tsx │ │ ├── index.md │ │ ├── index.tsx │ │ └── main.scss │ ├── utils │ │ ├── cnCharHoc.tsx │ │ ├── events.ts │ │ ├── index.ts │ │ ├── isReactFragment.ts │ │ ├── keycode.ts │ │ ├── locale │ │ │ ├── en-us.ts │ │ │ ├── index.ts │ │ │ ├── zh-cn.ts │ │ │ └── zh-tw.ts │ │ ├── popupHoc.tsx │ │ ├── useCssVar.tsx │ │ ├── withFusionConfig.tsx │ │ └── withThemeClass.tsx │ └── virtual-list │ │ ├── demo │ │ ├── basic.tsx │ │ ├── initial-index.tsx │ │ └── item-size-getter.tsx │ │ ├── index.md │ │ └── index.tsx ├── tsconfig.json ├── vite.config.ts └── xconsole.breezr.config.js ├── config ├── config.ts ├── configComponents.tsx ├── demoOpts.tsx ├── demoWrapper.tsx ├── dev-docs │ ├── README.md │ ├── contents │ │ ├── affix.md │ │ ├── animate.md │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── balloon.md │ │ ├── box.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── cascader-select.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── config-provider.md │ │ ├── date-picker.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── field.md │ │ ├── form.md │ │ ├── grid.md │ │ ├── icon.md │ │ ├── input.md │ │ ├── list.md │ │ ├── loading.md │ │ ├── menu-button.md │ │ ├── menu.md │ │ ├── message.md │ │ ├── nav.md │ │ ├── notification.md │ │ ├── number-picker.md │ │ ├── overlay.md │ │ ├── pagination.md │ │ ├── paragraph.md │ │ ├── progress.md │ │ ├── radio.md │ │ ├── range.md │ │ ├── rating.md │ │ ├── responsive-grid.md │ │ ├── search.md │ │ ├── select.md │ │ ├── shell.md │ │ ├── slider.md │ │ ├── split-button.md │ │ ├── step.md │ │ ├── switch.md │ │ ├── tab.md │ │ ├── table.md │ │ ├── tag.md │ │ ├── time-picker.md │ │ ├── timeline.md │ │ ├── transfer.md │ │ ├── tree-select.md │ │ ├── tree.md │ │ ├── typography.md │ │ ├── upload.md │ │ └── virtual-list.md │ └── script.js └── modifyCodesandbox.ts ├── extend-components ├── console-layout │ ├── .gitignore │ ├── README.md │ ├── breezr.config.js │ ├── declare.d.ts │ ├── demos │ │ ├── _theme.tsx │ │ ├── basic │ │ │ ├── 1$.tsx │ │ │ └── 2$.tsx │ │ ├── controlled │ │ │ └── index$.tsx │ │ ├── hybridcloud-dark │ │ │ └── basic$.tsx │ │ ├── hybridcloud-light │ │ │ └── basic$.tsx │ │ └── uncontrolled │ │ │ └── index$.tsx │ ├── index.html │ ├── package.json │ ├── src │ │ ├── AppLayout.tsx │ │ ├── Nav.tsx │ │ ├── NavCollapseTrigger.tsx │ │ ├── index.ts │ │ ├── styles │ │ │ ├── AppLayout.ts │ │ │ ├── Content.ts │ │ │ ├── Nav.ts │ │ │ └── index.ts │ │ ├── theme │ │ │ ├── context.ts │ │ │ ├── hybridcloud-dark.tsx │ │ │ └── hybridcloud-light.tsx │ │ └── tsconfig.json │ ├── tsconfig.json │ └── vite.demos.ts ├── console-menu │ ├── .gitignore │ ├── .npmignore │ ├── README.mdx │ ├── RoutableMenu.js │ ├── breezr.config.js │ ├── demos │ │ ├── _theme.tsx │ │ ├── basic$.tsx │ │ ├── controlled-menu$.tsx │ │ ├── default-open-all$.tsx │ │ ├── hybridcloud-dark │ │ │ └── basic$.tsx │ │ ├── hybridcloud-light │ │ │ └── basic$.tsx │ │ ├── routable-menu$.tsx │ │ ├── routable-menu-default-open.tsx │ │ ├── secondary$.tsx │ │ ├── switch-header$.tsx │ │ ├── with-divider$.tsx │ │ └── with-items-declaration$.tsx │ ├── package.json │ ├── src │ │ ├── ConsoleMenu.tsx │ │ ├── Header.tsx │ │ ├── ItemDescriptor.tsx │ │ ├── RoutableMenu.tsx │ │ ├── RoutableMenuTypes.tsx │ │ ├── index.ts │ │ ├── index.umd.ts │ │ ├── styles │ │ │ ├── Divider.tsx │ │ │ ├── DropMenu.tsx │ │ │ ├── Header.tsx │ │ │ ├── Item.tsx │ │ │ ├── Menu.tsx │ │ │ ├── SubMenu.tsx │ │ │ └── index.ts │ │ ├── theme │ │ │ ├── context.ts │ │ │ ├── hybridcloud-dark.tsx │ │ │ └── hybridcloud-light.tsx │ │ ├── tsconfig.json │ │ └── utils.tsx │ ├── tsconfig.json │ └── vite.demos.ts ├── console-page │ ├── .gitignore │ ├── README.md │ ├── breezr.config.js │ ├── declare.d.ts │ ├── demos │ │ ├── _theme.tsx │ │ ├── basic$.tsx │ │ ├── long-title$.tsx │ │ ├── width-overflow$.tsx │ │ ├── with-custom-back-arrow-render$.tsx │ │ ├── with-menu$.tsx │ │ ├── with-scenery-theme$.tsx │ │ └── without-title$.tsx │ ├── index.html │ ├── package.json │ ├── src │ │ ├── BackArrow.tsx │ │ ├── Breadcrumb.tsx │ │ ├── Content.tsx │ │ ├── Header.tsx │ │ ├── Menu.tsx │ │ ├── MenuContainer.tsx │ │ ├── Page.tsx │ │ ├── index.ts │ │ ├── styles │ │ │ ├── BackArrow.tsx │ │ │ ├── Content.tsx │ │ │ ├── Header.tsx │ │ │ ├── Menu.tsx │ │ │ ├── Page.tsx │ │ │ ├── Partial.tsx │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ └── tsconfig.json │ ├── tsconfig.json │ └── vite.demos.ts ├── fake-browser │ ├── .gitignore │ ├── README.md │ ├── breezr.config.js │ ├── declare.d.ts │ ├── demos │ │ ├── _theme.tsx │ │ ├── basic$.tsx │ │ └── withWrapper$.tsx │ ├── index.html │ ├── package.json │ ├── src │ │ ├── FakeBrowser.tsx │ │ ├── WithWrapper.tsx │ │ ├── index.ts │ │ └── tsconfig.json │ ├── tsconfig.json │ └── vite.demos.ts └── truncate │ ├── .gitignore │ ├── README.md │ ├── breezr.config.js │ ├── declare.d.ts │ ├── demos │ ├── _theme.tsx │ ├── auto-width$.tsx │ ├── basic$.tsx │ ├── custom-omission$.tsx │ ├── dynamic-children$.tsx │ ├── legacyProps$.tsx │ ├── multi-lines$.tsx │ ├── non-string$.tsx │ ├── popupStyle$.tsx │ └── tooltip-max-width$.tsx │ ├── index.html │ ├── package.json │ ├── src │ ├── MultiLines.tsx │ ├── Truncate.tsx │ ├── TruncateByLength.tsx │ ├── TruncateByWidth.tsx │ ├── constants.ts │ ├── index.tsx │ ├── styles.tsx │ ├── tsconfig.json │ └── utils.tsx │ ├── tsconfig.json │ └── vite.demos.ts ├── image └── dingtalk-group.jpg ├── lerna.json ├── package.json ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .vscode 4 | build 5 | doc-dist -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Use internal registry 2 | # @see http://web.npm.alibaba-inc.com/ 3 | # registry = https://registry.npm.taobao.org 4 | registry = https://registry.npm.alibaba-inc.com 5 | 6 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "printWidth": 80, 5 | "trailingComma": "none" 6 | } 7 | -------------------------------------------------------------------------------- /base-components/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | es 5 | lib 6 | docs-dist 7 | types -------------------------------------------------------------------------------- /base-components/.npmrc: -------------------------------------------------------------------------------- 1 | # Use internal registry 2 | # @see http://web.npm.alibaba-inc.com/ 3 | # registry = https://registry.npm.taobao.org 4 | # registry = https://registry.npm.alibaba-inc.com 5 | 6 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 7 | -------------------------------------------------------------------------------- /base-components/breezr.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@alicloud/console-toolkit-preset-component', 5 | { 6 | moduleName: 'AliCloudComponents', 7 | useTypescript: true, 8 | disableStyleRemove: true, 9 | externals: ['moment'], 10 | webpack(config) { 11 | config.entry['index-with-locale'] = './index-with-locale' 12 | return config 13 | } 14 | } 15 | ] 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /base-components/fixtures/breezr/.gitignore: -------------------------------------------------------------------------------- 1 | build -------------------------------------------------------------------------------- /base-components/fixtures/breezr/.npmrc: -------------------------------------------------------------------------------- 1 | # registry = http://registry.npm.alibaba-inc.com -------------------------------------------------------------------------------- /base-components/fixtures/breezr/breezr.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | // 请自己加入 wepback-merge 自定义 3 | // webpack: (config) => (webpack-merge(config, {})) 4 | analyze: true 5 | } 6 | 7 | module.exports = { 8 | presets: [['@alicloud/console-toolkit-preset-official', config]] 9 | } 10 | -------------------------------------------------------------------------------- /base-components/fixtures/breezr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "../../node_modules/.bin/breezr build --engine webpack --analyze" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /base-components/fixtures/breezr/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /base-components/fixtures/breezr/src/index.js: -------------------------------------------------------------------------------- 1 | import './index.less' 2 | import { Button } from '@alicloudfe/components' 3 | // import 4 | 5 | console.log(Button) 6 | 7 | // import * as all from '@alicloudfe/components' 8 | 9 | // console.log(all) 10 | -------------------------------------------------------------------------------- /base-components/fixtures/breezr/src/index.less: -------------------------------------------------------------------------------- 1 | @import '~@alicloudfe/components/dist/xconsole.css'; 2 | -------------------------------------------------------------------------------- /base-components/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | 11 | 📘阿里云组件库demo 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /base-components/pages/404$.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Redirect } from 'react-router-dom' 3 | 4 | const Page404: React.FC = (props) => { 5 | return 6 | } 7 | 8 | export default Page404 9 | -------------------------------------------------------------------------------- /base-components/pages/declare.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*?pureCSS' -------------------------------------------------------------------------------- /base-components/pages/dynamic-theme-base/wind.scss: -------------------------------------------------------------------------------- 1 | // 云组件库的自定义var要比fusionVar权重高 2 | $css-var-scope: '.theme-wind-dynamic.theme-wind-dynamic'; 3 | @import '../../src/theme/wind/css-var-custom.scss'; 4 | @import '../../src/theme/xconsole/index-no-var.scss'; 5 | -------------------------------------------------------------------------------- /base-components/pages/dynamic-theme-base/xconsole-dark.scss: -------------------------------------------------------------------------------- 1 | // 云组件库的自定义var要比fusionVar权重高 2 | $css-var-scope: '.theme-xconsole-dark-dynamic.theme-xconsole-dark-dynamic'; 3 | @import '../../src/theme/xconsole-dark/css-var-custom.scss'; 4 | @import '../../src/theme/xconsole/index-no-var.scss'; 5 | -------------------------------------------------------------------------------- /base-components/pages/dynamic-theme-base/xconsole.scss: -------------------------------------------------------------------------------- 1 | // 云组件库的自定义var要比fusionVar权重高 2 | $css-var-scope: '.theme-xconsole-dynamic.theme-xconsole-dynamic'; 3 | @import '../../src/theme/xconsole/css-var-custom.scss'; 4 | @import '../../src/theme/xconsole/index-no-var.scss'; 5 | -------------------------------------------------------------------------------- /base-components/pages/index$.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 开发环境说明 3 | --- 4 | 5 | # 开发环境说明 6 | 7 | 这是组件的本地开发环境。你可以开发用例将组件的 demo 目录下，这个目录下的每个 tsx/jsx/mdx 会成为一个页面。 8 | 9 | 在 demo 中，你可以 `import {xxx} from '@alicloudfe/components'`，从用户的视角来 import 组件库，而不应该用相对路径，以便我们将 demo 通过文档透出给用户。`@alicloudfe/components`会被映射到`src/index.ts` 10 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/aone.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-aone'; 2 | @import '../../src/theme/yunxiao/css-var-custom.scss'; 3 | @import '../../src/theme/yunxiao/css-var-definition.scss'; 4 | // 引入颜色覆盖变量 5 | @import '../../src/theme/aone/overwite-var.scss'; -------------------------------------------------------------------------------- /base-components/pages/theme-vars/atomgit.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-atomgit'; 2 | @import '../../src/theme/atomgit/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/b-design.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-b-design'; 2 | @import '../../src/theme/b-design/css-var-definition.scss'; 3 | @import '../../src/theme/b-design/css-var-custom.scss'; 4 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-hybridcloud-dark'; 2 | @import '../../src/theme/hybridcloud-dark/css-var-definition.scss'; 3 | @import '../../src/theme/hybridcloud-dark/css-var-custom.scss'; 4 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-hybridcloud'; 2 | @import '../../src/theme/hybridcloud/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/teamix.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-teamix'; 2 | @import '../../src/theme/yunxiao/css-var-custom.scss'; 3 | @import '../../src/theme/yunxiao/css-var-definition.scss'; 4 | // 引入颜色覆盖变量 5 | @import '../../src/theme/teamix/overwite-var.scss'; -------------------------------------------------------------------------------- /base-components/pages/theme-vars/wind.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-wind, .theme-wind *:before, .theme-wind *:after'; 2 | @import '../../src/theme/wind/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/xconsole-dark.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-xconsole-dark'; 2 | @import '../../src/theme/xconsole-dark/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/xconsole.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-xconsole, .theme-xconsole *:before, .theme-xconsole *:after'; 2 | @import '../../src/theme/xconsole/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/yunxiao-dark.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-yunxiao-dark'; 2 | @import '../../src/theme/yunxiao-dark/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-yunxiao-v5'; 2 | @import '../../src/theme/yunxiao-v5/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/pages/theme-vars/yunxiao.scss: -------------------------------------------------------------------------------- 1 | $css-var-scope: '.theme-yunxiao'; 2 | @import '../../src/theme/yunxiao/css-var-all.scss'; 3 | -------------------------------------------------------------------------------- /base-components/scripts/add-fusion-type-export.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra') 2 | const path = require('path') 3 | const { getComponentNames } = require('./utils') 4 | 5 | // 不是fusion组件 6 | const EXCLUDE = ['modal'] 7 | 8 | getComponentNames() 9 | .filter((name) => !EXCLUDE.includes(name)) 10 | .forEach((name) => { 11 | const dtsPath = path.resolve(__dirname, `../types/${name}/index.d.ts`) 12 | let content = fs.readFileSync(dtsPath, 'utf-8') 13 | content += `\nexport * from '@alifd/next/types/${name}'\n` 14 | fs.writeFileSync(dtsPath, content) 15 | }) 16 | -------------------------------------------------------------------------------- /base-components/scripts/publish-wind/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | esm 4 | lib 5 | 6 | -------------------------------------------------------------------------------- /base-components/scripts/publish-wind/.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliyun/cloud-design/525f156c3c68f8e8bd117c020558779bfd0cab69/base-components/scripts/publish-wind/.npmignore -------------------------------------------------------------------------------- /base-components/scripts/publish-wind/index-noreset.scss: -------------------------------------------------------------------------------- 1 | // 这个文件允许用户通过`import '@alicloud/console-components/index-noreset.scss'来导入样式` 2 | @import './dist/wind-noreset.css'; 3 | -------------------------------------------------------------------------------- /base-components/scripts/publish-wind/index.scss: -------------------------------------------------------------------------------- 1 | // 这个文件允许用户通过`import '@alicloud/console-components/index.scss'来全量导入样式` 2 | @import './dist/wind.css'; 3 | -------------------------------------------------------------------------------- /base-components/scripts/publish-xconsole/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | esm 4 | lib 5 | 6 | -------------------------------------------------------------------------------- /base-components/scripts/publish-xconsole/.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliyun/cloud-design/525f156c3c68f8e8bd117c020558779bfd0cab69/base-components/scripts/publish-xconsole/.npmignore -------------------------------------------------------------------------------- /base-components/src/affix/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本 3 | * @description 默认情况下，Affix 的默认目标容器元素是整个 `window`，并且 `offsetTop = 0`， 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Affix, Button } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 | 16 | 17 |
18 | Scroll window to see button affixed. 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div`` 24 | -------------------------------------------------------------------------------- /base-components/src/affix/demo/custom-offset.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 自定义偏移量 3 | * @description 可以通过 `offsetTop` 或 `offsetBottom` 自定义偏移量。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Affix, Button } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 | 14 | 15 | 16 | ) 17 | return 18 | } 19 | const Style = styled.div`` 20 | -------------------------------------------------------------------------------- /base-components/src/affix/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Affix as NextAffix } from '@alifd/next' 3 | 4 | export default NextAffix; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/animate/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Animate as NextAnimate } from '@alifd/next' 3 | 4 | export default NextAnimate; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/avatar/demo/with-badge.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 徽标 3 | * @description 通常用于消息提示。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Avatar, Badge } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | ) 26 | return 27 | } 28 | const Style = styled.div`` 29 | -------------------------------------------------------------------------------- /base-components/src/avatar/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Avatar as NextAvatar } from '@alifd/next' 3 | 4 | export default NextAvatar; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/badge/demo/clickable.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 徽标可点击 3 | * @description 用``标签包裹组件，实现徽标本身可点击。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Badge } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | return 20 | } 21 | const Style = styled.div` 22 | .basic-example { 23 | display: inline-block; 24 | width: 42px; 25 | height: 42px; 26 | border-radius: 8px; 27 | background: #eee; 28 | } 29 | 30 | .next-badge { 31 | margin-right: 16px; 32 | } 33 | ` 34 | -------------------------------------------------------------------------------- /base-components/src/badge/demo/dot.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 讨嫌的小红点 3 | * @description 没有具体的数字，仅展示小红点。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Badge, Icon } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | A Link 22 | 23 |
24 | ) 25 | return 26 | } 27 | const Style = styled.div` 28 | .next-badge { 29 | margin-right: 16px; 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /base-components/src/badge/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Badge as NextBadge } from '@alifd/next' 3 | 4 | export default NextBadge; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/badge/main.scss: -------------------------------------------------------------------------------- 1 | $badge-prefix: '.' + $css-prefix + 'badge'; 2 | 3 | #{$badge-prefix} { 4 | & &-count, & &-dot { 5 | box-shadow: 0 0 0 2px var(--badge-border-color, #fff); 6 | } 7 | } -------------------------------------------------------------------------------- /base-components/src/balloon/custom.scss: -------------------------------------------------------------------------------- 1 | .next-balloon-content.next-balloon-content { 2 | word-break: break-word; 3 | } -------------------------------------------------------------------------------- /base-components/src/balloon/xconsole.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}balloon { 2 | &-close { 3 | display: inline-flex; 4 | justify-content: center; 5 | align-items: center; 6 | width: 18px; 7 | height: 18px; 8 | border-radius: 50%; 9 | &:hover { 10 | background-color: var(--balloon-hover-bg, #f7f9fa); 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /base-components/src/box/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Box as NextBox } from '@alifd/next' 3 | 4 | type NextBoxProps = React.ComponentProps 5 | 6 | const Box: typeof NextBox = React.forwardRef((props: NextBoxProps, ref) => { 7 | return 8 | }) as any 9 | 10 | export default Box 11 | -------------------------------------------------------------------------------- /base-components/src/breadcrumb/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Breadcrumb as NextBreadcrumb } from '@alifd/next' 3 | 4 | export default NextBreadcrumb; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/breadcrumb/xconsole.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}breadcrumb-icon-sep { 2 | &::before { 3 | // 修复wind主题下的图标渲染问题 4 | // fusion会将这个icon的content写死为配置平台的配置结果 5 | // 这个content是NextIcon的字体码，而不是WindIcon的字体码 6 | font-family: NextIcon; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /base-components/src/breadcrumb/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}breadcrumb .#{$css-prefix}breadcrumb-item .#{$css-prefix}breadcrumb-text { 2 | height: var(--s-5, 20px); 3 | } -------------------------------------------------------------------------------- /base-components/src/breadcrumb/yunxiao.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}breadcrumb .#{$css-prefix}breadcrumb-item .#{$css-prefix}breadcrumb-text { 2 | line-height: var(--font-lineheight-2, 1.5); 3 | height: var(--s-5, 20px); 4 | } -------------------------------------------------------------------------------- /base-components/src/button/demo/only-icon.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 仅图标按钮 3 | * @description Button只有图标时，应该显示为正方形 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Button, Icon } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 17 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/button/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .next-btn.next-btn-normal.isOnlyIcon:not(:disabled) { 2 | &:not(.next-btn-text) { 3 | i { 4 | color: var(--color-text1-2, #5a5a5a); 5 | } 6 | } 7 | &.next-btn-text { 8 | i { 9 | color: var(--color-fill1-6, #848484); 10 | } 11 | } 12 | &:hover { 13 | &.next-btn-text { 14 | i { 15 | color: var(--color-brand1-5); 16 | } 17 | } 18 | } 19 | &:focus { 20 | &.next-btn-text { 21 | i { 22 | color: var(--color-brand1-7); 23 | } 24 | } 25 | } 26 | } 27 | 28 | -------------------------------------------------------------------------------- /base-components/src/button/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-btn { 2 | font-weight: var(--btn-font-weight, 500); 3 | } 4 | .next-btn-group { 5 | .next-btn.next-btn-primary:not(:first-child) { 6 | border-left-color: var(--color-line1-1, #e8e8e8); 7 | } 8 | .next-btn.next-btn-normal:not(:first-child) { 9 | border-left-color: var(--color-line1-1, #e8e8e8); 10 | } 11 | } -------------------------------------------------------------------------------- /base-components/src/calendar/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 全屏日历 3 | * @description 最简单的日历用法，用户可以切换年/月。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar } from '@alicloudfe/components' 10 | import moment from 'moment' 11 | 12 | function onDateChange(value) { 13 | console.log(value.format('L')) 14 | } 15 | 16 | export default function DemoComponent() { 17 | const content = ( 18 |
19 | 23 |
24 | ) 25 | return 26 | } 27 | const Style = styled.div`` 28 | -------------------------------------------------------------------------------- /base-components/src/calendar/demo/card.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 日历卡片 3 | * @description 可以将 `card` 形态的日历组件嵌套在宽高受限的容器中。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar } from '@alicloudfe/components' 10 | 11 | function onDateChange(value) { 12 | console.log(value) 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = ( 17 |
18 | 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div` 24 | .wrapped-calendar { 25 | width: 300px; 26 | border: 1px solid #c4c6cf; 27 | border-radius: 3px; 28 | padding: 8px; 29 | } 30 | ` 31 | -------------------------------------------------------------------------------- /base-components/src/calendar/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 禁用日期 3 | * @description 可以通过 `disabledDate` 属性禁止用户选择某些日期。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar } from '@alicloudfe/components' 10 | import moment from 'moment' 11 | 12 | const currentDate = moment() 13 | const disabledDate = function (date) { 14 | return date.valueOf() > currentDate.valueOf() 15 | } 16 | 17 | export default function DemoComponent() { 18 | const content = ( 19 |
20 | 21 |
22 | ) 23 | return 24 | } 25 | const Style = styled.div` 26 | .wrapped-calendar { 27 | width: 300px; 28 | border: 1px solid #c4c6cf; 29 | border-radius: 3px; 30 | padding: 8px; 31 | } 32 | ` 33 | -------------------------------------------------------------------------------- /base-components/src/calendar/demo/locale.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 多语言 3 | * @description 日期时间的多语言来源于 moment ，可以通过 `moment.locale('zh-cn')` 来设置显示中文。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar } from '@alicloudfe/components' 10 | import moment from 'moment' 11 | 12 | // Setting moment locale to Chinese 13 | moment.locale('zh-cn') 14 | 15 | export default function DemoComponent() { 16 | const content = 17 | return 18 | } 19 | const Style = styled.div`` 20 | -------------------------------------------------------------------------------- /base-components/src/calendar/demo/panel.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 日历面板 3 | * @description 日历面板通用用于嵌套在弹层容器中。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar } from '@alicloudfe/components' 10 | import moment from 'moment' 11 | 12 | export default function DemoComponent() { 13 | const content = ( 14 |
15 | 16 |
17 | ) 18 | return 19 | } 20 | const Style = styled.div`` 21 | -------------------------------------------------------------------------------- /base-components/src/calendar/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Calendar as NextCalendar } from '@alifd/next' 3 | 4 | export default NextCalendar; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/calendar/main.scss: -------------------------------------------------------------------------------- 1 | // 去掉选中日期动画，修复文字抖动的问题 2 | 3 | .next-calendar-card .next-calendar-cell.next-selected .next-calendar-date, 4 | .next-calendar-card .next-calendar-cell.next-selected .next-calendar-month, 5 | .next-calendar-card .next-calendar-cell.next-selected .next-calendar-year, 6 | .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date, 7 | .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month, 8 | .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year, 9 | .next-calendar-range .next-calendar-cell.next-selected .next-calendar-date, 10 | .next-calendar-range .next-calendar-cell.next-selected .next-calendar-month, 11 | .next-calendar-range .next-calendar-cell.next-selected .next-calendar-year { 12 | animation: none; 13 | } 14 | -------------------------------------------------------------------------------- /base-components/src/calendar2/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基础日历 3 | * @description 最简单的日历用法，用户可以切换年/月。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar2 } from '@alicloudfe/components' 10 | import dayjs from 'dayjs' 11 | 12 | function onDateChange(value) { 13 | console.log(value.format('L')) 14 | } 15 | 16 | export default function DemoComponent() { 17 | const content = ( 18 |
19 | 23 |
24 | ) 25 | return 26 | } 27 | const Style = styled.div`` 28 | -------------------------------------------------------------------------------- /base-components/src/calendar2/demo/card.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 卡片日历 3 | * @description 卡片日历通常用来被嵌套在宽高受限的容器中。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar2 } from '@alicloudfe/components' 10 | 11 | function onDateChange(value) { 12 | console.log(value) 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = ( 17 |
18 | 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div` 24 | .wrapped-calendar { 25 | width: 300px; 26 | border: 1px solid #eee; 27 | border-radius: 3px; 28 | } 29 | ` 30 | -------------------------------------------------------------------------------- /base-components/src/calendar2/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 禁用日期 3 | * @description 可以通过 `disabledDate` 属性禁止用户选择某些日期。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar2 } from '@alicloudfe/components' 10 | import dayjs from 'dayjs' 11 | 12 | const currentDate = dayjs() 13 | const disabledDate = function (date) { 14 | return date.valueOf() > currentDate.valueOf() 15 | } 16 | 17 | export default function DemoComponent() { 18 | const content = ( 19 |
20 | 21 |
22 | ) 23 | return 24 | } 25 | const Style = styled.div` 26 | .wrapped-calendar { 27 | width: 300px; 28 | border: 1px solid #f0f0f0; 29 | border-radius: 3px; 30 | padding: 8px; 31 | } 32 | ` 33 | -------------------------------------------------------------------------------- /base-components/src/calendar2/demo/panel.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 面板日历 3 | * @description 面板日历通常用来被嵌套在弹层容器中。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Calendar2 } from '@alicloudfe/components' 10 | import dayjs from 'dayjs' 11 | 12 | export default function DemoComponent() { 13 | const content = ( 14 |
15 | 16 |
17 | ) 18 | return 19 | } 20 | const Style = styled.div`` 21 | -------------------------------------------------------------------------------- /base-components/src/calendar2/index.tsx: -------------------------------------------------------------------------------- 1 | import { Calendar2 } from '@alifd/next' 2 | 3 | export default Calendar2 as any 4 | -------------------------------------------------------------------------------- /base-components/src/calendar2/main.scss: -------------------------------------------------------------------------------- 1 | .next-calendar2 { 2 | background: var(--date-picker-panel-background); 3 | } -------------------------------------------------------------------------------- /base-components/src/calendar2/xconsole.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}calendar2, 2 | .#{$css-prefix}calendar2-panel { 3 | --color-brand1-9: #0064c8; 4 | } 5 | -------------------------------------------------------------------------------- /base-components/src/card/demo/collapsable-head.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 收展框（向下推出） 3 | */ 4 | 5 | import React, { useState } from 'react' 6 | import { Card } from '@alicloudfe/components' 7 | 8 | interface IProps {} 9 | 10 | const Demo: React.FC = (props) => { 11 | const [collapsed, setCollapsed] = useState(true) 12 | return ( 13 | 14 | 18 | 项目标题 19 | 20 | {collapsed && ( 21 | 22 | 阿里云公共云控制台是一个包含了100+云产品的庞大产品集群，是一个结构复杂且庞大，目前仍在快速迭代更新的产品体系。我们通过大量实践、梳理和打磨，呈现出公共云控制台设计系统。将为阿里云公共云提供前沿创新、包容且智能的产品解决方案。提供轻松、可信赖的使用体验。呈现简洁有序、精致的视觉体验。 23 | 24 | )} 25 | 26 | ) 27 | } 28 | 29 | export default Demo 30 | -------------------------------------------------------------------------------- /base-components/src/card/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | .next-card-header { 2 | margin-top: 16px; 3 | } -------------------------------------------------------------------------------- /base-components/src/card/yunxiao.scss: -------------------------------------------------------------------------------- 1 | .yunxiao-card-dropdown-actions-icon.yunxiao-card-dropdown-actions-icon, 2 | .theme-yunxiao .yunxiao-card-dropdown-actions-icon, 3 | .theme-yunxiao-dark .yunxiao-card-dropdown-actions-icon { 4 | color: var(--color-fill1-6, #8B8B8B); 5 | cursor: pointer; 6 | margin-top: 2px; 7 | &::before { 8 | font-size: 16px; 9 | width: 16px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /base-components/src/cascader-select/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | $cascader-select-prefix: '.' + $css-prefix + 'cascader-select'; 2 | $menu-prefix: '.' + $css-prefix + 'menu'; 3 | 4 | #{$cascader-select-prefix} { 5 | &-dropdown { 6 | .#{$css-prefix}cascader-menu-wrapper { 7 | @include hybridcloud-scrollbar; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /base-components/src/cascader-select/index.tsx: -------------------------------------------------------------------------------- 1 | import { CascaderSelect as NextCascaderSelect } from '@alifd/next' 2 | import HOC from '../utils/popupHoc' 3 | 4 | export default HOC(NextCascaderSelect, false) 5 | -------------------------------------------------------------------------------- /base-components/src/cascader-select/main.scss: -------------------------------------------------------------------------------- 1 | $cascader-select-prefix: '.' + $css-prefix + 'cascader-select'; 2 | $menu-prefix: '.' + $css-prefix + 'menu'; 3 | 4 | #{$cascader-select-prefix} { 5 | &-dropdown { 6 | background-color: var(--dropdown-bg-color, #fff); 7 | 8 | .#{$css-prefix}cascader-menu-wrapper { 9 | border-left: none; 10 | overflow-y: scroll; 11 | @include alicloud-scrollbar; 12 | } 13 | 14 | #{$menu-prefix} { 15 | border: none; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /base-components/src/cascader/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | // 混合云主题滚动条样式覆盖 2 | $cascader-prefix: '.' + $css-prefix + 'cascader'; 3 | 4 | #{$cascader-prefix} { 5 | #{$cascader-prefix}-menu-wrapper { 6 | @include hybridcloud-scrollbar; 7 | } 8 | } -------------------------------------------------------------------------------- /base-components/src/cascader/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Cascader as NextCascader } from '@alifd/next' 3 | 4 | export default NextCascader; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/cascader/main.scss: -------------------------------------------------------------------------------- 1 | $cascader-prefix: '.' + $css-prefix + 'cascader'; 2 | 3 | #{$cascader-prefix} { 4 | &:not(.multiple) #{$cascader-prefix}-menu { 5 | // 可选择的menu，增加padding以便容纳勾选图标 6 | // 多选menu不需要额外的padding来容纳图标 7 | #{$menu-prefix}-item { 8 | --menu-padding-horizontal: var(--menu-padding-horizontal-selectable); 9 | padding: 0 var(--menu-padding-horizontal) 0 var(--menu-padding-horizontal); 10 | } 11 | } 12 | 13 | #{$cascader-prefix}-menu-wrapper { 14 | @include alicloud-scrollbar; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /base-components/src/checkbox/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本 3 | * @description 使用 `Checkbox` 渲染的基本组件。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Checkbox } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = Checkbox 13 | return 14 | } 15 | const Style = styled.div`` 16 | -------------------------------------------------------------------------------- /base-components/src/checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Checkbox as NextCheckbox } from '@alifd/next' 3 | 4 | export default NextCheckbox; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/checkbox/main.scss: -------------------------------------------------------------------------------- 1 | $checkbox-prefix: '.' + $css-prefix + 'checkbox'; 2 | $icon-prefix: '.' + $css-prefix + 'icon'; 3 | 4 | #{$checkbox-prefix} { 5 | &-inner { 6 | &#{&}#{&}#{&}#{&} > #{$icon-prefix} { 7 | transform: scale(var(--checkbox-icon-scale, 0.8)); 8 | margin-top: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /base-components/src/checkbox/xconsole.scss: -------------------------------------------------------------------------------- 1 | $checkbox-prefix: '.' + $css-prefix + 'checkbox'; 2 | $icon-prefix: '.' + $css-prefix + 'icon'; 3 | 4 | #{$checkbox-prefix} { 5 | &-inner { 6 | position: relative; 7 | &#{&}#{&}#{&}#{&}#{&}#{&} > #{$icon-prefix} { 8 | // icon垂直据中 9 | position: absolute; 10 | left: 50%; 11 | top: 50%; 12 | transform: translate(-50%, -50%) scale(var(--checkbox-icon-scale, 0.8)); 13 | margin: 0; 14 | &::before { 15 | display: inline-block; 16 | width: var(--checkbox-icon-size, 16px); 17 | height: var(--checkbox-icon-size, 16px); 18 | font-size: var(--checkbox-icon-size, 16px); 19 | line-height: inherit; 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /base-components/src/checkbox/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-checkbox-wrapper.disabled .next-checkbox >.next-checkbox-inner { 2 | border-color: var(--checkbox-disabled-border-color, #dae0e5); 3 | background: var(--checkbox-disabled-bg-color, #f2f5f7); 4 | } -------------------------------------------------------------------------------- /base-components/src/collapse/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .next-collapse .next-collapse-panel-icon { 2 | margin-top: -1px; 3 | } -------------------------------------------------------------------------------- /base-components/src/collapse/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Collapse as NextCollapse } from '@alifd/next' 3 | 4 | export default NextCollapse; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/collapse/main.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliyun/cloud-design/525f156c3c68f8e8bd117c020558779bfd0cab69/base-components/src/collapse/main.scss -------------------------------------------------------------------------------- /base-components/src/collapse/xconsole.scss: -------------------------------------------------------------------------------- 1 | $collapse-prefix: '.' + $css-prefix + 'collapse'; 2 | 3 | #{$collapse-prefix} { 4 | &-panel-expanded { 5 | > #{$collapse-prefix}-panel-content { 6 | padding-bottom: 8px; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /base-components/src/collapse/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-collapse-panel { 2 | border-radius: 4px; 3 | .next-collapse-panel-title { 4 | border-radius: 4px; 5 | } 6 | &.next-collapse-panel-expanded { 7 | .next-collapse-panel-title { 8 | background-color: var(--color-fill1-3, #e8e8e8); 9 | } 10 | } 11 | } 12 | 13 | .next-collapse{ 14 | .next-collapse-panel-icon { 15 | margin-top: -1px; 16 | } 17 | .next-collapse-panel:not(:last-child) { 18 | margin-bottom: 2px; 19 | } 20 | } -------------------------------------------------------------------------------- /base-components/src/config-provider/ctx.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react' 2 | import { getInitialRefElement } from './utils' 3 | 4 | export interface ICtxType { 5 | refElement: HTMLElement 6 | } 7 | 8 | const ctx = createContext({ refElement: getInitialRefElement() }) 9 | 10 | export default ctx 11 | -------------------------------------------------------------------------------- /base-components/src/config-provider/utils.ts: -------------------------------------------------------------------------------- 1 | export const getInitialRefElement = () => { 2 | if (typeof document === 'undefined') { 3 | // this is executed in SSR 4 | // document is not defined 5 | return null 6 | } 7 | return document.body as HTMLElement 8 | } -------------------------------------------------------------------------------- /base-components/src/date-picker/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 禁用状态 3 | * @description 当开启 `disabled` 属性时，选择框处于完全禁用状态。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { DatePicker } from '@alicloudfe/components' 10 | 11 | const { RangePicker } = DatePicker 12 | 13 | export default function DemoComponent() { 14 | const content = ( 15 |
16 | 17 |
18 |
19 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/date-picker/demo/popup.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 自定义日期选择器弹层 3 | * @description 组件对外透出了 `visible`, `defaultVisible`, `onVisibleChange`, `popupTriggerType`, `popupAlign`, `popupContainer`, `popupStyle`, `popupClassName` 等属性用于直接定制弹层。此外，如果这些属性仍然无法满足需求，可以通过 `popupProps` 进行透传。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { DatePicker } from '@alicloudfe/components' 10 | 11 | const { RangePicker } = DatePicker 12 | 13 | export default function DemoComponent() { 14 | const content = ( 15 |
16 |

Change popup align

17 | 18 |

Change popup container

19 | target.parentNode} /> 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/date-picker/demo/size.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 不同尺寸 3 | * @description 通过 `size` 属性可以改变 Input 组件的尺寸，默认为 `medium`。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { DatePicker, Box } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | return 20 | } 21 | const Style = styled.div`` 22 | -------------------------------------------------------------------------------- /base-components/src/date-picker/xconsole.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}range-picker { 2 | // https://github.com/alibaba-fusion/next/issues/2770 3 | width: auto; 4 | 5 | &-trigger-input { 6 | &.#{$css-prefix}input { 7 | min-width: 200px; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /base-components/src/date-picker2/demo/noborder.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 无边框 3 | * @description 无边框样式。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { DatePicker2 } from '@alicloudfe/components' 10 | 11 | const { RangePicker } = DatePicker2 12 | 13 | function App() { 14 | return ( 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | ) 24 | } 25 | 26 | export default function DemoComponent() { 27 | const content = 28 | return 29 | } 30 | const Style = styled.div` 31 | .app > div { 32 | margin-bottom: 20px; 33 | } 34 | ` 35 | -------------------------------------------------------------------------------- /base-components/src/date-picker2/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .next-date-picker2-wrapper { 2 | background: var(--date-picker-panel-background); 3 | .next-range-picker2-arrow { 4 | background: var(--date-picker-panel-background); 5 | } 6 | } 7 | .next-time-picker2-menu { 8 | ul li { 9 | background: var(--date-picker-panel-background); 10 | } 11 | ul li.next-selected { 12 | background: var(--date-picker2-time-bg, var(--color-brand1-1, #001A33)); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /base-components/src/date-picker2/index.tsx: -------------------------------------------------------------------------------- 1 | import { DatePicker2 } from '@alifd/next' 2 | 3 | export default DatePicker2 4 | -------------------------------------------------------------------------------- /base-components/src/date-picker2/xconsole.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}date-picker2, 2 | .#{$css-prefix}range-picker2-panel { 3 | --color-brand1-9: #0064c8; 4 | } 5 | 6 | .#{$css-prefix}date-picker2 { 7 | & &-input-range { 8 | .#{$css-prefix}input { 9 | box-shadow: none; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /base-components/src/date-picker2/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-time-picker2-menu ul:after { 2 | height: 0px; 3 | } -------------------------------------------------------------------------------- /base-components/src/declare.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.css' 2 | declare module '*.scss' 3 | -------------------------------------------------------------------------------- /base-components/src/dialog/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | .next-dialog-close { 2 | &:hover { 3 | background-color: var(--color-fill1-2, #383838); 4 | .next-dialog-close-icon { 5 | color: var(--color-fill1-8, #8a8a8a); 6 | } 7 | } 8 | 9 | &:active { 10 | background-color: var(--color-fill1-5, #4d4d4d) !important; 11 | .next-dialog-close-icon { 12 | color: var(--color-text1-3, #ccc); 13 | } 14 | } 15 | 16 | .next-dialog-close-icon { 17 | color: var(--color-fill1-6, #6b6b6b); 18 | } 19 | } -------------------------------------------------------------------------------- /base-components/src/dialog/main.scss: -------------------------------------------------------------------------------- 1 | $dialog-prefix: '.' + $css-prefix + 'dialog'; 2 | 3 | #{$dialog-prefix} { 4 | &-footer { 5 | .#{$css-prefix}btn { 6 | // 调整 footer 中的行动按钮间距 7 | margin-left: var(--s-2, 8px); 8 | &:first-child { 9 | margin-left: 0; 10 | } 11 | } 12 | } 13 | 14 | // Dialog.show的body是不包含Message组件的，所以padding应该按照正常的来， 15 | // 而不应该像Dialog.confirm一样 16 | // 这里覆盖掉fusion的这一行错误样式：https://github.com/alibaba-fusion/next/blob/c6139f50b50036872ce8ecc487cc80429abd93e6/src/dialog/main.scss#L124 17 | &#{$dialog-prefix}-quick.quick-show { 18 | #{$dialog-prefix}-body { 19 | padding: var(--dialog-content-padding-top, 0px) 20 | var(--dialog-content-padding-left-right, 24px) 21 | var(--dialog-content-padding-bottom, 16px) 22 | var(--dialog-content-padding-left-right, 24px); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /base-components/src/dialog/xconsole.scss: -------------------------------------------------------------------------------- 1 | $dialog-prefix: '.' + $css-prefix + 'dialog'; 2 | 3 | $dialog-prefix: '.' + $css-prefix + 'dialog'; 4 | 5 | #{$dialog-prefix} { 6 | &-header { 7 | padding-right: calc(var(--dialog-title-padding-left-right) + var(--dialog-close-right)) 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /base-components/src/divider/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云云效样式覆盖 2 | .next-divider-ver { 3 | top: 0; 4 | } -------------------------------------------------------------------------------- /base-components/src/divider/demo/direction.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 垂直展示 3 | * @description 通过`direction`设置垂直分隔符展示。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Divider } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | Add 15 | 16 | Edit 17 | 18 | Delete 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div`` 24 | -------------------------------------------------------------------------------- /base-components/src/divider/index.md: -------------------------------------------------------------------------------- 1 | # Divider 2 | 3 | ## 开发指南 4 | 5 | 区隔内容的分割线, 支持 1.19+ 6 | 7 | ### 何时使用 8 | 9 | 对不同章节的文本段落进行分割。 10 | 对行内文字/链接进行分割，例如表格的操作列。 11 | 12 | ## API 13 | 14 | ### Divider 15 | 16 | | 参数 | 说明 | 类型 | 默认值 | 17 | | ----------- | ----------------------------------------------------- | ------- | -------- | 18 | | dashed | 是否为虚线 | Boolean | false | 19 | | direction | 线是水平还是垂直类型

**可选值**:
'hoz', 'ver' | Enum | 'hoz' | 20 | | orientation | 分割线标题的位置

**可选值**:
'left', 'right', 'center' | Enum | 'center' | 21 | -------------------------------------------------------------------------------- /base-components/src/divider/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Divider as NextDivider } from '@alifd/next' 3 | 4 | export default NextDivider; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/drawer/custom.scss: -------------------------------------------------------------------------------- 1 | //混合云、云效主题样式覆盖 2 | .next-drawer-header { 3 | font-weight: var(--font-weight-medium, 500); 4 | } 5 | 6 | .next-drawer-close .next-drawer-close-icon.next-icon { 7 | margin-left: var(--drawer-close-icon-ml, -16px); 8 | margin-top: var(--drawer-close-icon-mt, -6px); 9 | } 10 | 11 | .next-drawer .next-drawer-header { 12 | .next-drawer-header-container { 13 | display: flex; 14 | align-items: center; 15 | justify-content: space-between; 16 | } 17 | .next-drawer-header-extra { 18 | display: flex; 19 | align-items: center; 20 | margin-right: 24px; 21 | } 22 | 23 | .next-drawer-header-line { 24 | width: 1px; 25 | height: 18px; 26 | background-color: var(--color-fill1-4); 27 | display: inline-block; 28 | margin-left: 12px; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /base-components/src/drawer/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | .next-drawer-header { 2 | .next-drawer-close { 3 | &:hover { 4 | background-color: var(--color-fill1-2, #383838); 5 | .next-drawer-close-icon { 6 | color: var(--color-fill1-8, #8a8a8a); 7 | } 8 | } 9 | 10 | &:active { 11 | background-color: var(--color-fill1-5, #4d4d4d); 12 | .next-drawer-close-icon { 13 | color: var(--color-text1-3, #ccc); 14 | } 15 | } 16 | 17 | .next-drawer-close-icon { 18 | color: var(--color-fill1-6, #6b6b6b); 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /base-components/src/drawer/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-drawer-has-sidebar { 2 | .next-drawer-body { 3 | display: flex; 4 | .next-drawer-sidebar { 5 | margin: -16px 20px -16px -20px; 6 | padding: 16px 20px; 7 | width: 160px; 8 | border-right: 1px solid var(--color-line1-1, #e8e8e8); 9 | } 10 | } 11 | } 12 | 13 | .next-drawer-header { 14 | line-height: 24px; 15 | } 16 | 17 | .next-drawer-large { 18 | min-width: 800px; 19 | } 20 | -------------------------------------------------------------------------------- /base-components/src/dropdown/demo/trigger-type.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 触发的事件类型 3 | * @description 使用 triggerType 设置触发的事件类型。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Dropdown, Menu } from '@alicloudfe/components' 10 | 11 | const menu = ( 12 | 13 | Option 1 14 | Option 2 15 | Option 3 16 | Option 4 17 | 18 | ) 19 | 20 | export default function DemoComponent() { 21 | const content = ( 22 | Click me} triggerType="click"> 23 | {menu} 24 | 25 | ) 26 | return 27 | } 28 | const Style = styled.div`` 29 | -------------------------------------------------------------------------------- /base-components/src/dropdown/index.tsx: -------------------------------------------------------------------------------- 1 | import { Dropdown as NextDropdown } from '@alifd/next' 2 | import { OverlayHOC } from '../utils/popupHoc' 3 | 4 | export default OverlayHOC(NextDropdown) 5 | -------------------------------------------------------------------------------- /base-components/src/field/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Field as NextField } from '@alifd/next' 3 | 4 | export default NextField; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/form/yunxiao.scss: -------------------------------------------------------------------------------- 1 | // 混合云form样式覆盖 2 | .next-form.next-medium .next-switch { 3 | margin-top: 3px; 4 | } 5 | .next-top.next-form-item { 6 | .next-form-item-label { 7 | line-height: 1.5; 8 | } 9 | } 10 | 11 | [class*="next-col-fixed-"] { 12 | &.next-form-item-label { 13 | label { 14 | word-break: break-all; 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /base-components/src/grid/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Grid as NextGrid } from '@alifd/next' 3 | 4 | export default NextGrid; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/icon/custom.scss: -------------------------------------------------------------------------------- 1 | // icon改成方形的，暂时先手动覆盖 2 | .next-icon.next-icon.next-icon.next-icon::before { 3 | line-height: 1em; 4 | } -------------------------------------------------------------------------------- /base-components/src/icon/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本用法 3 | * @description 展示图标基本使用方法。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Box, Icon } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) 20 | return 21 | } 22 | const Style = styled.div`` 23 | -------------------------------------------------------------------------------- /base-components/src/icon/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Icon as NextIcon } from '@alifd/next' 3 | 4 | export default NextIcon; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/input/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云&云效input覆盖样式 2 | .next-input { 3 | span.next-input-inner.next-before { 4 | color: var(--color-line1-5); 5 | padding-left: 8px; 6 | } 7 | span.next-input-inner.next-after { 8 | color: var(--color-line1-5); 9 | padding-right: 8px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /base-components/src/input/demo/accessibility.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 无障碍支持 3 | * @description 通过`aria-label`对`Input`组件进行描述。关于键盘操作请参考[#无障碍键盘操作指南](#无障碍键盘操作指南)。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Input } from '@alicloudfe/components' 10 | 11 | function onChange(v) { 12 | console.log(v) 13 | } 14 | function onKeyDown(v) { 15 | console.log(v) 16 | } 17 | 18 | export default function DemoComponent() { 19 | const content = ( 20 |
21 | 28 |
29 | ) 30 | return 31 | } 32 | const Style = styled.div`` 33 | -------------------------------------------------------------------------------- /base-components/src/input/demo/autoheight.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 自动高度 3 | * @description 设置 `Input` 为 多行文本域； 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Input } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | { 19 | console.log('onKeyDown', opts) 20 | }} 21 | /> 22 |
23 |
24 | 25 | 29 |
30 | ) 31 | return 32 | } 33 | const Style = styled.div`` 34 | -------------------------------------------------------------------------------- /base-components/src/input/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .next-input.next-input-textarea textarea { 2 | @include hybridcloud-scrollbar; 3 | } 4 | 5 | #password:-webkit-autofill, #username:-webkit-autofill { 6 | -webkit-text-fill-color: var(--input-text-color) !important; 7 | } -------------------------------------------------------------------------------- /base-components/src/input/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Input as NextInput } from '@alifd/next' 3 | 4 | export default NextInput; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/input/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | // 云效input样式覆盖 2 | .next-input-control .next-input-len { 3 | vertical-align: middle; 4 | } 5 | .next-input { 6 | &:hover { 7 | border-width: 1px; 8 | } 9 | &:active { 10 | border-width: 1px; 11 | } 12 | &:hover, 13 | &.#{$css-prefix}focus { 14 | box-shadow: none; 15 | } 16 | } 17 | 18 | .next-input-group:hover { 19 | box-shadow: none; 20 | } -------------------------------------------------------------------------------- /base-components/src/input/yunxiao.scss: -------------------------------------------------------------------------------- 1 | // 云效input样式覆盖 2 | .next-input-control .next-input-len { 3 | vertical-align: middle; 4 | } -------------------------------------------------------------------------------- /base-components/src/list/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { List as NextList } from '@alifd/next' 3 | 4 | export default NextList; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/loading/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本 3 | * @description 简单的 Loading 状态，包裹需要显示加载态的组件。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Loading } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 |
basic usage
16 | 17 |
18 | ) 19 | return 20 | } 21 | const Style = styled.div` 22 | .demo-title-basic { 23 | margin: 0 60px 0 60px; 24 | } 25 | 26 | .demo-basic { 27 | width: 120px; 28 | text-align: center; 29 | padding: 50px; 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /base-components/src/loading/demo/skeleton.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 骨架屏 3 | */ 4 | 5 | import React from 'react' 6 | import { Skeleton } from '@alicloudfe/components' 7 | 8 | interface IProps {} 9 | 10 | const Demo: React.FC = (props) => { 11 | return ( 12 |
13 |
14 | 15 |
16 |

17 | 本骨架屏组件导出自 18 | 22 | react-loading-skeleton 23 | 24 | ，更多用法请查阅它的文档。 25 |

26 |
27 | ) 28 | } 29 | 30 | export default Demo 31 | -------------------------------------------------------------------------------- /base-components/src/loading/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | .next-loading .next-loading-component { 2 | opacity: unset; 3 | filter: blur(2px); 4 | .next-loading-masker { 5 | background: #0A0A0A; 6 | opacity: 0.2; 7 | } 8 | } -------------------------------------------------------------------------------- /base-components/src/loading/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .react-loading-skeleton.react-loading-skeleton { 2 | background-color: var(--color-skeleton-bg-normal); 3 | background-image: linear-gradient(90deg, var(--color-skeleton-bg-normal), var(--color-skeleton-bg-light), var(--color-skeleton-bg-normal)); 4 | } 5 | 6 | .theme-hybridcloud-dark { 7 | .next-loading .next-loading-component { 8 | opacity: unset; 9 | filter: blur(2px); 10 | .next-loading-masker { 11 | background: #0A0A0A; 12 | opacity: 0.2; 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /base-components/src/loading/index.tsx: -------------------------------------------------------------------------------- 1 | import { Loading as NextLoading } from '@alifd/next' 2 | 3 | export default NextLoading 4 | 5 | import Skeleton from 'react-loading-skeleton' 6 | 7 | export { Skeleton } 8 | -------------------------------------------------------------------------------- /base-components/src/menu-button/b-design.scss: -------------------------------------------------------------------------------- 1 | // menu-button相关 2 | .next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow{ 3 | color: var(--btn-text-normal-color, #1B58F4) 4 | } 5 | .next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow{ 6 | color: var(--btn-text-primary-color, #1B58F4); 7 | } 8 | .next-menu-btn.next-btn-text.next-btn-secondary .next-menu-btn-arrow{ 9 | color: var(--btn-text-secondary-color, #595959); 10 | } 11 | .next-menu-btn.next-btn-text.next-btn-secondary:hover .next-menu-btn-arrow{ 12 | color: var(--btn-text-secondary-color-hover, #1B58F4); 13 | } -------------------------------------------------------------------------------- /base-components/src/menu-button/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云&云效menubutton样式覆盖 2 | 3 | .next-menu-btn.next-menu-btn.next-menu-btn { 4 | .next-menu-btn-arrow.next-icon { 5 | margin-left: 8px; 6 | margin-right: -4px; 7 | } 8 | } -------------------------------------------------------------------------------- /base-components/src/menu-button/index.tsx: -------------------------------------------------------------------------------- 1 | import { MenuButton as NextMenuButton } from '@alifd/next' 2 | import hoistNonReactStatics from 'hoist-non-react-statics' 3 | import HOC from '../utils/popupHoc' 4 | 5 | // type NextMenuButtonProps = React.ComponentProps 6 | 7 | // let MenuButton: typeof NextMenuButton = ((props: NextMenuButtonProps) => { 8 | // return 9 | // }) as any 10 | 11 | const MenuButton: typeof NextMenuButton = HOC(NextMenuButton) as any 12 | 13 | hoistNonReactStatics(MenuButton, NextMenuButton) 14 | 15 | export default MenuButton 16 | -------------------------------------------------------------------------------- /base-components/src/menu-button/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-menu-btn { 2 | .next-menu-btn-arrow { 3 | opacity: 0.5; 4 | } 5 | &.next-btn-primary { 6 | .next-menu-btn-arrow { 7 | color: var(--color-white, #fff); 8 | } 9 | } 10 | 11 | &.next-btn-text { 12 | .next-menu-btn-arrow { 13 | color: var(--color-fill1-6, #8b8b8b); 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /base-components/src/menu/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | // 混合云主题滚动条覆盖 2 | .next-menu.next-menu { 3 | @include hybridcloud-scrollbar; 4 | } 5 | .next-menu-item.next-menu-item[aria-haspopup="true"][aria-expanded] { 6 | padding-right: 16px; 7 | .next-menu-item-inner { 8 | width: 100%; 9 | } 10 | .next-menu-icon-arrow.next-icon { 11 | right: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /base-components/src/menu/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Menu as NextMenu } from '@alifd/next' 3 | 4 | export default NextMenu; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/menu/xconsole.scss: -------------------------------------------------------------------------------- 1 | $menu-prefix: '.' + $css-prefix + 'menu'; 2 | 3 | #{$menu-prefix} { 4 | padding: var(--menu-padding); 5 | &#{&}#{&}#{&}#{&} #{&}-symbol-icon-selected { 6 | color: var(--menu-icon-selected-color); 7 | } 8 | &-item:focus-visible { 9 | background-color: var(--menu-background-hover, #f7f9fa); 10 | } 11 | #{$menu-prefix}-group-label { 12 | color: var(--menu-group-label-color, #888888); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /base-components/src/menu/yunxiao-v5.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliyun/cloud-design/525f156c3c68f8e8bd117c020558779bfd0cab69/base-components/src/menu/yunxiao-v5.scss -------------------------------------------------------------------------------- /base-components/src/message/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云&云效样式覆盖 2 | .next-message.next-toast.next-medium { 3 | .next-message-title { 4 | --message-size-m-title-content-padding-right: 6px; 5 | } 6 | } 7 | 8 | .next-message.next-large .next-message-content, 9 | .next-message.next-medium .next-message-content { 10 | line-height: 1.5; 11 | } 12 | 13 | 14 | // loading 图标局中 15 | .next-message.next-message-loading { 16 | .next-message-symbol::before { 17 | font-size: 18px; 18 | width: 18px; 19 | } 20 | } 21 | 22 | // 调整关闭图标位置 23 | .next-message.next-message .next-message-close { 24 | top: 11px; 25 | } 26 | .next-message.next-large .next-message-close { 27 | top: 14px; 28 | } 29 | 30 | -------------------------------------------------------------------------------- /base-components/src/message/demo/accessibility.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 无障碍支持 3 | * @description 通过`Enter`键点击`button`时，自动聚焦到`Message`上读取信息。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Message, Button } from '@alicloudfe/components' 10 | 11 | const showSuccess = () => Message.success('success') 12 | 13 | export default function DemoComponent() { 14 | const content = ( 15 |
16 | 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div`` 24 | -------------------------------------------------------------------------------- /base-components/src/message/demo/inline-close.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 可关闭提示 3 | * @description 通过`closeable`设置用户手动关闭提示框。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Message } from '@alicloudfe/components' 10 | 11 | const onClose = () => console.log('onClose triggered!') 12 | const afterClose = () => console.log('afterClose triggered!') 13 | 14 | export default function DemoComponent() { 15 | const content = ( 16 |
17 | 24 | Content Content Content Content 25 | 26 |
27 | ) 28 | return 29 | } 30 | const Style = styled.div`` 31 | -------------------------------------------------------------------------------- /base-components/src/message/demo/update-message.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 更新消息内容 3 | * @description 通过唯一的 `key` 来动态更新内容。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Message, Button } from '@alicloudfe/components' 10 | 11 | const key = 'updatable' 12 | 13 | const openMessage = () => { 14 | Message.loading({ content: 'Loading...', key }) 15 | setTimeout(() => { 16 | Message.success({ content: 'Loaded!', key, duration: 2000 }) 17 | }, 1000) 18 | } 19 | 20 | export default function DemoComponent() { 21 | const content = ( 22 | 25 | ) 26 | return 27 | } 28 | const Style = styled.div`` 29 | -------------------------------------------------------------------------------- /base-components/src/message/demo/withContext.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title withContext 3 | * @description 此功能1.21.6版本添加。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | export default function DemoComponent() { 10 | const content = ( 11 | 16 | 点击查看 Message.withContext Demo 17 | 18 | ) 19 | return 20 | } 21 | const Style = styled.div`` 22 | -------------------------------------------------------------------------------- /base-components/src/message/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | // 无标题。只有一行content修正位置 2 | .next-message-content { 3 | margin-top: 0.5px; 4 | } 5 | // 有标题。取消content位置的修正 6 | .next-title-content { 7 | .next-message-content { 8 | margin-top: 0; 9 | } 10 | } 11 | // 修正标题 12 | // .next-message-title { 13 | // margin-top: -0.5px; 14 | // } 15 | 16 | // message content 局中 17 | .next-message.next-medium .next-message-symbol { 18 | font-size: 0; 19 | } -------------------------------------------------------------------------------- /base-components/src/message/main.scss: -------------------------------------------------------------------------------- 1 | $message-prefix: '.' + $css-prefix + 'message'; 2 | 3 | #{$message-prefix} { 4 | &-title { 5 | font-weight: var(--message-title-weight, 500); 6 | } 7 | #{$message-prefix}-close .#{$css-prefix}icon-close { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | &:before { 12 | width: var(--message-close-icon-size, 12px); 13 | height: var(--message-close-icon-size, 12px); 14 | font-size: var(--message-close-icon-size, 12px); 15 | line-height: var(--message-close-icon-size, 12px); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /base-components/src/message/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | // 调整关闭图标位置 2 | .next-message.next-message .next-message-close { 3 | top: 6.5px; 4 | } 5 | 6 | .next-message { 7 | .next-message-content, 8 | .next-message-title { 9 | .next-message-extra, 10 | .next-message-link { 11 | &.right { 12 | float: right; 13 | } 14 | } 15 | } 16 | .next-message-close + .next-message-symbol-icon + .next-message-title { 17 | .next-message-extra, 18 | .next-message-link { 19 | &.right { 20 | margin-right: 24px; 21 | } 22 | } 23 | } 24 | 25 | .next-message-close + .next-message-symbol-icon + .next-message-content { 26 | .next-message-extra, 27 | .next-message-link { 28 | &.right { 29 | margin-right: 24px; 30 | } 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /base-components/src/modal/hybridcloud-dark.scss: -------------------------------------------------------------------------------- 1 | .next-modal-header { 2 | .next-modal-close.next-modal-close.next-modal-close.next-modal-close { 3 | &:hover { 4 | background-color: var(--color-fill1-2, #383838); 5 | color: var(--color-fill1-8, #8a8a8a); 6 | } 7 | 8 | &:active { 9 | background-color: var(--color-fill1-5, #4d4d4d); 10 | color: var(--color-text1-3, #ccc); 11 | } 12 | 13 | .next-modal-close-icon { 14 | color: var(--color-fill1-6, #6b6b6b); 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /base-components/src/modal/hybridcloud.scss: -------------------------------------------------------------------------------- 1 | .next-modal-close.next-modal-close.next-modal-close.next-modal-close.next-modal-close { 2 | width: var(--modal-header-close-bg-width, 20px); 3 | height: var(--modal-header-close-bg-height, 20px); 4 | border-radius: var(--modal-header-close-border-radius, 2px); 5 | 6 | &:hover { 7 | background-color: var(--color-fill1-2, #f7f7f7); 8 | color: var(--color-text1-2, #5a5a5a); 9 | } 10 | 11 | &:active { 12 | background-color: var(--color-fill1-3, #eaeaea); 13 | color: var(--color-text1-5, #292929); 14 | } 15 | 16 | .next-dialog-close-icon { 17 | color: var(--color-fill1-6, #848484); 18 | } 19 | } 20 | .next-modal { 21 | .right-part { 22 | margin-right: var(--modal-header-close-margin-right, 18px); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /base-components/src/modal/yunxiao-dark.scss: -------------------------------------------------------------------------------- 1 | .next-modal-header { 2 | .next-modal-title-box { 3 | .next-modal-title-icon { 4 | &::before { 5 | font-size: var(--modal-title-icon-font-size, 20px); 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /base-components/src/nav/demo/fixed.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title fixed模式 3 | * @description 固定导航下的使用方式 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Nav } from '@alicloudfe/components' 10 | 11 | const { Item, SubNav } = Nav 12 | 13 | const header = FUSION 14 | const footer = ( 15 | 16 | Login in 17 | 18 | ) 19 | 20 | export default function DemoComponent() { 21 | const content = ( 22 | 32 | ) 33 | return 34 | } 35 | const Style = styled.div`` 36 | -------------------------------------------------------------------------------- /base-components/src/nav/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Nav as NextNav } from '@alifd/next' 3 | import hoistNonReactStatics from 'hoist-non-react-statics' 4 | 5 | type NavProps = React.ComponentProps 6 | 7 | const Nav: React.FC = ({ direction, activeDirection, ...rest }) => { 8 | if (!activeDirection && direction === 'ver') { 9 | activeDirection = 'right' 10 | } 11 | return ( 12 | 17 | ) 18 | } 19 | 20 | hoistNonReactStatics(Nav, NextNav) 21 | 22 | const exported: typeof NextNav = Nav as any 23 | 24 | export default exported 25 | -------------------------------------------------------------------------------- /base-components/src/nav/main.scss: -------------------------------------------------------------------------------- 1 | $nav-prefix: '.' + $css-prefix + 'nav'; 2 | $menu-prefix: '.' + $css-prefix + 'menu'; 3 | #{$nav-prefix} { 4 | &#{&}#{&}#{&}#{$menu-prefix} { 5 | // 去掉menu中的padding 6 | padding: 0; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /base-components/src/notification/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云&云效主题样式覆盖 2 | $message-prefix: '.' + $css-prefix + 'message'; 3 | $toast-prefix: '.' + $css-prefix + 'toast'; 4 | 5 | .next-notification { 6 | &#{$message-prefix}-success#{$toast-prefix} { 7 | border-left: 4px solid var(--message-success-border-color, #00a700); 8 | } 9 | &#{$message-prefix}-warning#{$toast-prefix} { 10 | border-left: 4px solid var(--message-warning-border-color, #fac800); 11 | } 12 | &#{$message-prefix}-error#{$toast-prefix} { 13 | border-left: 4px solid var(--message-error-border-color, #c80000); 14 | } 15 | &#{$message-prefix}-notice#{$toast-prefix} { 16 | border-left: 4px solid var(--message-notice-border-color, #0064c8); 17 | } 18 | &#{$message-prefix}-help#{$toast-prefix} { 19 | border-left: 4px solid var(--message-help-border-color, #888888); 20 | } 21 | } -------------------------------------------------------------------------------- /base-components/src/notification/index.tsx: -------------------------------------------------------------------------------- 1 | import { Notification as NextNotification } from '@alifd/next' 2 | 3 | export default NextNotification 4 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本用法 3 | * @description onChange 第二个参数 e.type 可以获取事件类型。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | function onChange(value, e) { 12 | console.log(value, e.type, e.triggerType) 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = ( 17 |
18 | 19 |
20 |
21 | 22 |
23 | ) 24 | return 25 | } 26 | const Style = styled.div`` 27 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 不可用 3 | * @description 不可用的 number picker。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 |
16 |
17 | 18 |
19 | ) 20 | return 21 | } 22 | const Style = styled.div`` 23 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/format.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 格式化 3 | * @description 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | const intlize = (val) => Intl.NumberFormat('en-US').format(val) 12 | 13 | export default function DemoComponent() { 14 | const content = ( 15 |
16 | 17 |
18 |
19 | `${val}%`} defaultValue={85} /> 20 |
21 |
22 | 23 |
24 | ) 25 | return 26 | } 27 | const Style = styled.div`` 28 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/limit.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 最大最小值 3 | * @description min max 来限制value的最大最小值。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | function onChange(value, e) { 12 | console.log('onChange', value, e) 13 | } 14 | 15 | function onCorrect(obj) { 16 | console.log('onCorrect', obj) 17 | } 18 | 19 | export default function DemoComponent() { 20 | const content = ( 21 |
22 | 31 |
32 | ) 33 | return 34 | } 35 | const Style = styled.div`` 36 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/precision.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 精度 3 | * @description 通过 precision 控制小数点位数 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | function onChange(value) { 12 | console.log('changed', value) 13 | } 14 | function onCorrect(obj) { 15 | console.log(obj) 16 | } 17 | 18 | export default function DemoComponent() { 19 | const content = ( 20 |
21 | 28 |
29 | ) 30 | return 31 | } 32 | const Style = styled.div`` 33 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/step.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 步长 3 | * @description 通过step控制每次加减步长 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | function onChange(value) { 12 | console.log('changed', value) 13 | } 14 | function onCorrect(obj) { 15 | console.log(obj) 16 | } 17 | 18 | export default function DemoComponent() { 19 | const content = ( 20 |
21 | 27 |
28 | ) 29 | return 30 | } 31 | const Style = styled.div`` 32 | -------------------------------------------------------------------------------- /base-components/src/number-picker/demo/trigger.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 按钮控制 3 | * @description 控制按钮一致显示、隐藏 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { NumberPicker } from '@alicloudfe/components' 10 | 11 | function onChange(value) { 12 | console.log('changed', value) 13 | } 14 | function onCorrect(obj) { 15 | console.log(obj) 16 | } 17 | 18 | export default function DemoComponent() { 19 | const content = ( 20 |
21 | 22 |
23 |
24 | 25 |
26 | ) 27 | return 28 | } 29 | const Style = styled.div`` 30 | -------------------------------------------------------------------------------- /base-components/src/number-picker/index.tsx: -------------------------------------------------------------------------------- 1 | import { NumberPicker as NextNumberPicker } from '@alifd/next' 2 | import { withThemeClass } from '../utils/withThemeClass' 3 | 4 | export default withThemeClass(NextNumberPicker) 5 | -------------------------------------------------------------------------------- /base-components/src/number-picker/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | // 云效主题numberpicker样式覆盖 2 | .next-number-picker-handler .next-icon.next-icon.next-icon::before { 3 | line-height: inherit; 4 | } 5 | 6 | .next-number-picker { 7 | .next-input-group { 8 | &:hover { 9 | border: 1px solid var(--color-brand1-6, #1b9aee); 10 | } 11 | .next-btn { 12 | background-color: var(--color-white, #fff); 13 | } 14 | } 15 | } -------------------------------------------------------------------------------- /base-components/src/number-picker/yunxiao.scss: -------------------------------------------------------------------------------- 1 | // 云效主题numberpicker样式覆盖 2 | .next-number-picker-handler .next-icon.next-icon.next-icon::before { 3 | line-height: inherit; 4 | } -------------------------------------------------------------------------------- /base-components/src/overlay/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Overlay as NextOverlay } from '@alifd/next' 3 | import { 4 | OverlayProps as NextOverlayProps, 5 | PopupProps as NextPopupProps 6 | } from '@alifd/next/types/overlay' 7 | 8 | const { Popup: NextPopup } = NextOverlay 9 | 10 | const Overlay: typeof NextOverlay = React.forwardRef( 11 | (props: NextOverlayProps, ref) => { 12 | return 13 | } 14 | ) as any 15 | 16 | const Popup: typeof NextPopup = React.forwardRef( 17 | (props: NextPopupProps, ref) => { 18 | return 19 | } 20 | ) as any 21 | 22 | Overlay.Popup = Popup 23 | 24 | export default Overlay 25 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/link.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 分页按钮链接 3 | * @description 可以通过指定 `link` 属性来设置页码按钮的跳转链接，方便 SEO，link 属性的值为一个包含 `{page}` 的模板字符串，Pagination 组件会将该占位符替换为具体的页码数字。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | const format = `${window.location.href}#/{page}` 12 | 13 | export default function DemoComponent() { 14 | const content = 15 | return 16 | } 17 | const Style = styled.div`` 18 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/more.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 更多分页 3 | * @description 当分页数大于5时，自动展示 `...` 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = 13 | return 14 | } 15 | const Style = styled.div`` 16 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/show-jump.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 跳转 3 | * @description 快速跳转到某一页，可以设置 `false` 来隐藏。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | const change = function (value) { 12 | console.log(value) 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = ( 17 |
18 |

Hide jump forcibly

19 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/show-total.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 显示总数 3 | * @description 分页组件默认不显示总数，你可以通过 totalRender 自定义总数的显示结果。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | const total = 50 12 | 13 | export default function DemoComponent() { 14 | const content = ( 15 | `Total: ${total}`} 19 | /> 20 | ) 21 | return 22 | } 23 | const Style = styled.div` 24 | .custom-pagination { 25 | display: inline-block; 26 | margin-left: 10px; 27 | } 28 | ` 29 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/size.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 分页尺寸 3 | * @description 可以通过指定 `size` 属性来设置分页的尺寸。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 |

small

15 | 16 |

medium

17 | 18 |

large

19 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/type.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 简洁/迷你 风格 3 | * @description 可以通过指定 `type` 属性来设置分页器的类型。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 |

normal

15 | 16 |

simple

17 | 18 |

mini

19 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/pagination/demo/uncontrol.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 非受控分页 3 | * @description 非受控分页，是指分页组件的状态由自己维护，组件值的改变可以通过 `onChange` 事件通知父组件，默认值由 `defaultCurrent` 初始化。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Pagination } from '@alicloudfe/components' 10 | 11 | const change = function (value) { 12 | console.log(value) 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = 17 | return 18 | } 19 | const Style = styled.div`` 20 | -------------------------------------------------------------------------------- /base-components/src/pagination/index.tsx: -------------------------------------------------------------------------------- 1 | import { Pagination as NextPagination } from '@alifd/next' 2 | import type { PaginationProps } from '@alifd/next/types/pagination' 3 | import { withThemeClass } from '../utils/withThemeClass' 4 | import React from 'react' 5 | import { useCssVar } from '../utils/useCssVar' 6 | 7 | const Pagination: typeof NextPagination = ((props: PaginationProps) => { 8 | const theme = useCssVar('--alicloudfe-components-theme').trim() 9 | // 混合云云效主题默认不显示下一页 10 | const shape = (() => { 11 | if (theme.startsWith('hybridcloud') || theme.startsWith('yunxiao')) { 12 | return 'arrow-only' 13 | } 14 | return 'normal' 15 | })() 16 | 17 | return 18 | }) as any 19 | 20 | export default withThemeClass(Pagination) 21 | -------------------------------------------------------------------------------- /base-components/src/paragraph/index.md: -------------------------------------------------------------------------------- 1 | # Paragraph 2 | 3 | ## Guide 4 | 5 | （已废弃，请使用Typography）段落用于控制页面整体的文本视觉，主要由行间距及文本大小体现。 6 | 7 | ## 何时使用 8 | 9 | - 页面文本展示需要一致体验。 10 | - 一般短文本和长文本的行间距是有差别的，短文本的行间距会更小(一般为三行以内) 11 | 12 | ## API 13 | 14 | ### Paragraph 15 | 16 | | 参数 | 说明 | 类型 | 默认值 | 17 | | ---- | ------------------------------------------------------------------ | ---- | -------- | 18 | | size | 组件大小。

**可选值**:
'medium'(中号)
'small'(小号) | Enum | 'medium' | 19 | | type | 什么方式展示段落

**可选值**:
'long'(展示所有文本)
'short'(展示三行以内（非强制）) | Enum | 'long' | 20 | -------------------------------------------------------------------------------- /base-components/src/paragraph/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Paragraph as NextParagraph } from '@alifd/next' 3 | 4 | export default NextParagraph; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/progress/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本进度条 3 | * @description 普通模式的进度条，通过 `percent` 属性指定进度，通过 `textRender` 控制右侧文本信息的展示， 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Progress } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | ''} /> 15 | 16 | 17 |
18 | ) 19 | return 20 | } 21 | const Style = styled.div`` 22 | -------------------------------------------------------------------------------- /base-components/src/progress/demo/circle.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 圆形进度条 3 | * @description 通过 `shape` 属性可以改变进度指示器的外观，当取值为 `circle` 时为圆形进度条。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Progress, Icon, Box } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 | 14 | 15 | ''} /> 16 | } 20 | /> 21 | 22 | ) 23 | return 24 | } 25 | const Style = styled.div`` 26 | -------------------------------------------------------------------------------- /base-components/src/progress/demo/progressive.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title Progressive 3 | * @description 当开启 `progressive` 模式时，Progress 组件会根据自身的进度自动设置展现的颜色值。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Progress } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 | 16 | 17 |
18 | ) 19 | return 20 | } 21 | const Style = styled.div`` 22 | -------------------------------------------------------------------------------- /base-components/src/progress/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Progress as NextProgress } from '@alifd/next' 3 | 4 | export default NextProgress; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/radio/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本 3 | * @description 使用 `Radio` 渲染的基本组件。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Radio } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = Fusion Radio 13 | return 14 | } 15 | const Style = styled.div`` 16 | -------------------------------------------------------------------------------- /base-components/src/radio/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Radio as NextRadio } from '@alifd/next' 3 | 4 | export default NextRadio; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/range/b-design.scss: -------------------------------------------------------------------------------- 1 | .next-range:not(.disabled) .next-range-selected{ 2 | background-image: linear-gradient(90deg, #7EA3FF 0%, #1B58F4 100%); 3 | } -------------------------------------------------------------------------------- /base-components/src/range/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云&云效主题覆盖样式 2 | .next-range .next-balloon-tooltip .next-balloon-content.next-balloon-content { 3 | word-break: normal; 4 | } -------------------------------------------------------------------------------- /base-components/src/range/demo/reverse.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 选择态反转 3 | * @description 设置 reverse 为true, 选中态会反转。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Range } from '@alicloudfe/components' 10 | 11 | const style = { 12 | marginBottom: '15px' 13 | } 14 | 15 | export default function DemoComponent() { 16 | const content = ( 17 |
18 | 19 | 20 |
21 | ) 22 | return 23 | } 24 | const Style = styled.div`` 25 | -------------------------------------------------------------------------------- /base-components/src/range/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Range as NextRange } from '@alifd/next' 3 | 4 | type NextRangeProps = React.ComponentProps 5 | 6 | const Range: React.FC = React.forwardRef( 7 | ({ marksPosition = 'below', ...restProps }, ref) => { 8 | return ( 9 | 14 | ) 15 | } 16 | ) 17 | 18 | export default Range 19 | -------------------------------------------------------------------------------- /base-components/src/range/main.scss: -------------------------------------------------------------------------------- 1 | .#{$css-prefix}range { 2 | &-scale-item { 3 | &#{&}#{&}#{&} { 4 | top: var(--range-scale-item-position-top, 0px); 5 | width: var(--range-scale-item-width, 1px); 6 | } 7 | } 8 | // &-track { 9 | // &#{&} { 10 | // width: calc(100% + 12px); 11 | // left: -6px; 12 | // } 13 | // } 14 | } 15 | .next-range { 16 | .next-range-slider-inner { 17 | &:hover { 18 | transform: scale(1.38); 19 | } 20 | } 21 | .next-range-slider-moving { 22 | .next-range-slider-inner.next-range-slider-inner.next-range-slider-inner { 23 | transform: scale(1.38); 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /base-components/src/rating/demo/basic.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 基本 3 | * @description 最简单的用法。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Rating } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | console.log('change:', val)} 17 | onHoverChange={(val) => console.log('hover:', val)} 18 | /> 19 |
20 | ) 21 | return 22 | } 23 | const Style = styled.div`` 24 | -------------------------------------------------------------------------------- /base-components/src/rating/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 只读模式 3 | * @description 设置 `disabled` 属性后，评分组件仅展示模式，不可选择。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Rating } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = 13 | return 14 | } 15 | const Style = styled.div`` 16 | -------------------------------------------------------------------------------- /base-components/src/rating/demo/grade.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 等级提示 3 | * @description 添加 `showGrade` 属性，使评分组件具有等级提示信息。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Rating } from '@alicloudfe/components' 10 | 11 | const starMap = { 12 | 1: 'Bad', 13 | 2: 'OK', 14 | 3: 'Good', 15 | 4: 'Great', 16 | 5: 'Perfect' 17 | } 18 | 19 | export default function DemoComponent() { 20 | const content = ( 21 | starMap[val]} /> 22 | ) 23 | return 24 | } 25 | const Style = styled.div`` 26 | -------------------------------------------------------------------------------- /base-components/src/rating/demo/half.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 半星评分 3 | * @description 默认情况下评分组件只支持整数评分，通过开启 `allowHalf` 属性可以支持半星评分。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Rating } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = 13 | return 14 | } 15 | const Style = styled.div`` 16 | -------------------------------------------------------------------------------- /base-components/src/rating/demo/size.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 尺寸 3 | * @description 通过 `size` 属性可以控制评分组件的大小，支持三种尺寸 `small`, `medium`, `large`。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Rating } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 | ) 23 | return 24 | } 25 | const Style = styled.div`` 26 | -------------------------------------------------------------------------------- /base-components/src/rating/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Rating as NextRating } from '@alifd/next' 3 | import RatingProps from '@alifd/next/types/rating' 4 | 5 | const Rating: typeof NextRating = ((props: RatingProps) => { 6 | return 7 | }) as any 8 | 9 | export default Rating; 10 | 11 | -------------------------------------------------------------------------------- /base-components/src/rating/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-rating-underlay .next-icon { 2 | color: var(--color-brand3-8, #494e54); 3 | opacity: 0.2; 4 | } -------------------------------------------------------------------------------- /base-components/src/responsive-grid/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { ResponsiveGrid as NextResponsiveGrid } from '@alifd/next' 3 | 4 | export default NextResponsiveGrid; 5 | 6 | -------------------------------------------------------------------------------- /base-components/src/search/demo/accessibility.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 无障碍支持 3 | * @description 按下Enter键调用`onSearch`事件去处理,请参考[无障碍键盘操作指南](#无障碍键盘操作指南)。 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Search } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | console.log(v)} 18 | searchText={search} 19 | style={{ width: '400px' }} 20 | /> 21 |
22 | ) 23 | return 24 | } 25 | const Style = styled.div`` 26 | -------------------------------------------------------------------------------- /base-components/src/search/demo/size.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 大小 3 | * @description 通过size进行大小设置，支持large、medium 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Search } from '@alicloudfe/components' 10 | 11 | export default function DemoComponent() { 12 | const content = ( 13 |
14 | 20 |
21 |
22 | 28 |
29 | ) 30 | return 31 | } 32 | const Style = styled.div`` 33 | -------------------------------------------------------------------------------- /base-components/src/search/xconsole.scss: -------------------------------------------------------------------------------- 1 | $search-prefix: '.' + $css-prefix + 'search'; 2 | $input-prefix: '.' + $css-prefix + 'input'; 3 | $next-normal: '.' + $css-prefix + 'normal'; 4 | 5 | #{$search-prefix} { 6 | &#{$next-normal},&#{$search-prefix}-normal { 7 | .#{$css-prefix}after { 8 | .#{$css-prefix}btn-normal { 9 | --btn-medium-min-width: 32px; 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /base-components/src/search/yunxiao-v5.scss: -------------------------------------------------------------------------------- 1 | .next-input { 2 | span.next-input-inner.next-before{ 3 | padding-left: 4px; 4 | } 5 | .next-input-inner.next-before+input { 6 | padding-left: 0; 7 | } 8 | } 9 | .next-search.next-search { 10 | .next-input-group { 11 | .next-input-inner.next-after { 12 | padding-left: 8px; 13 | padding-right: 4px; 14 | i { 15 | padding: 0; 16 | } 17 | } 18 | } 19 | } 20 | 21 | .next-search-simple.next-normal.next-medium .next-search-icon:before, .next-search-simple.next-normal.next-medium .next-search-icon .next-icon-remote { 22 | font-size: 18px; 23 | } 24 | 25 | .next-search.next-search.next-search { 26 | &:hover, 27 | &.focusing, 28 | &.visible { 29 | box-shadow: none; 30 | } 31 | } -------------------------------------------------------------------------------- /base-components/src/search/yunxiao.scss: -------------------------------------------------------------------------------- 1 | .next-input { 2 | span.next-input-inner.next-before{ 3 | padding-left: 4px; 4 | } 5 | .next-input-inner.next-before+input { 6 | padding-left: 0; 7 | } 8 | } 9 | .next-search.next-search { 10 | .next-input-group { 11 | .next-input-inner.next-after { 12 | padding-left: 8px; 13 | padding-right: 4px; 14 | i { 15 | padding: 0; 16 | } 17 | } 18 | } 19 | } 20 | 21 | .next-search-simple.next-normal.next-medium .next-search-icon:before, .next-search-simple.next-normal.next-medium .next-search-icon .next-icon-remote { 22 | font-size: 18px; 23 | } -------------------------------------------------------------------------------- /base-components/src/select/custom.scss: -------------------------------------------------------------------------------- 1 | // 混合云、云效主题样式覆盖 2 | 3 | .next-select-multiple .next-select-compact .next-select-tag-compact { 4 | color: var(--color-fill1-6); 5 | } 6 | 7 | .next-select-all { 8 | padding-left: 12px; 9 | } -------------------------------------------------------------------------------- /base-components/src/select/demo/select-label.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title 前后缀 3 | * @description Select 增加前后缀 4 | */ 5 | 6 | import * as React from 'react' 7 | import styled from 'styled-components' 8 | 9 | import { Select } from '@alicloudfe/components' 10 | 11 | const dataSource = [ 12 | { label: '1', value: 1 }, 13 | { label: '10', value: 10 }, 14 | { label: '50', value: 50 }, 15 | { label: '100', value: 100 } 16 | ] 17 | 18 | const handleChange = (value) => { 19 | console.log('handleChange: ', value) 20 | } 21 | 22 | export default function DemoComponent() { 23 | const content = ( 24 | setText(str)} /> 22 | 23 | 24 | ) 25 | } 26 | export default Demo 27 | -------------------------------------------------------------------------------- /extend-components/truncate/demos/multi-lines$.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { MultiLines } from '@alicloudfe/components-truncate' 3 | import { FakeBrowserWithWrapper as FakeBrowser } from '@alicloudfe/components-fake-browser' 4 | 5 | const longText = '毕竟西湖六月中，风光不与四时同。接天莲叶无穷碧，映日荷花别样红。'.repeat( 6 | 10 7 | ) 8 | 9 | const Demo = () => { 10 | return ( 11 | 12 | ...}> 13 | {longText} 14 | 15 | 16 | ) 17 | } 18 | 19 | export default Demo 20 | -------------------------------------------------------------------------------- /extend-components/truncate/demos/tooltip-max-width$.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Truncate from '@alicloudfe/components-truncate' 3 | 4 | const Demo = () => { 5 | return ( 6 |
7 | 8 | supercalifragilisticexpialidocious@supercalifragilisticexpialidocious.com 9 | 10 |
11 |
12 | 13 | superc alifragilis ticexpialidoc ous@supercal ifragil isticexpial idocio 14 | ussdfgds 15 | 16 |
17 | ) 18 | } 19 | export default Demo 20 | -------------------------------------------------------------------------------- /extend-components/truncate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 📘Vite Pages 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /extend-components/truncate/src/index.tsx: -------------------------------------------------------------------------------- 1 | export { default } from './Truncate' 2 | export * from './Truncate' 3 | export * from './constants' 4 | 5 | export { default as MultiLines } from './MultiLines' 6 | export * from './MultiLines' 7 | -------------------------------------------------------------------------------- /extend-components/truncate/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../lib", 5 | "rootDir": "." 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /extend-components/truncate/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@alicloudfe/components-truncate": ["./src"] 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /extend-components/truncate/vite.demos.ts: -------------------------------------------------------------------------------- 1 | import type { UserConfig } from 'vite' 2 | import * as vpr from 'vite-plugin-react' 3 | import pages from 'vite-plugin-react-pages' 4 | import mdx from 'vite-plugin-mdx' 5 | 6 | module.exports = { 7 | jsx: 'react', 8 | plugins: [vpr, mdx(), pages('demos')], 9 | optimizeDeps: { 10 | include: [ 11 | 'styled-components', 12 | '@alicloudfe/components', 13 | 'react-router-dom', 14 | 'lodash.truncate', 15 | '@alicloudfe/components-fake-browser' 16 | ] 17 | }, 18 | alias: { 19 | '@alicloudfe/components-truncate': '/src' 20 | }, 21 | minify: false 22 | } as UserConfig 23 | -------------------------------------------------------------------------------- /image/dingtalk-group.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliyun/cloud-design/525f156c3c68f8e8bd117c020558779bfd0cab69/image/dingtalk-group.jpg -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "command": { 4 | "publish": { 5 | "ignoreChanges": ["*.md"], 6 | "message": "chore(release): publish" 7 | } 8 | }, 9 | "packages": ["base-components", "extend-components/*"], 10 | "useWorkspaces": true, 11 | "version": "independent" 12 | } 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2019", 4 | "jsx": "react", 5 | "moduleResolution": "Node", 6 | "outDir": "./lib", 7 | "declaration": true, 8 | "skipLibCheck": true, 9 | "esModuleInterop": true, 10 | "resolveJsonModule": true 11 | } 12 | } 13 | --------------------------------------------------------------------------------