SuperAPI AI 工具集

kendo-themes

通用与其它

查看项目

更新于 10-16 05:42

技能介绍

用途:为 Kendo 与 Telerik 组件(Angular、React、Vue、jQuery、Blazor)提供样式层参考,说明主题包、设计令牌、CSS 自定义属性、Sass 变量/映射、配色方案与组件选择器的使用。

主题包:提供 Meridian、Bootstrap、Material、Fluent、Default、Classic 六种主题,对应包名分别为 @progress/kendo-theme-meridian、@progress/kendo-theme-bootstrap、@progress/kendo-theme-material、@progress/kendo-theme-fluent、@progress/kendo-theme-default、@progress/kendo-theme-classic。各主题共享同一套设计令牌基础(颜色、间距、圆角、阴影、动效、排版、图标),令牌定制可跨主题移植。

安装:npm install --save @progress/kendo-theme-meridian(将 meridian 替换为所需主题名)。

导入:在应用入口导入一次。CSS 方式为 import "@progress/kendo-theme-meridian/dist/all.css";Sass 方式为 @use "@progress/kendo-theme-meridian/scss/all.scss" as *。仅按需包含组件时用 scss/index.scss,并显式调用 mixin,如 @include kendo-button--styles(); @include kendo-grid--styles(); @include kendo-combobox--styles();,每个组件提供 kendo-{component}--styles() mixin。

定制:一是全局设计令牌,可用 CSS 自定义属性(:root { --kendo-<token>: <value>; })或 Sass(@use ... with (...));二是按组件用 CSS 选择器覆盖。选择器遵循可预测的类组合:基础 .k-{component}、子部件 .k-{component}-{part}、变体 .k-{modifier}、状态 .k-{state}。建议在覆盖中使用设计令牌变量而非硬编码值。

令牌分组:颜色 --kendo-color-{name}($kendo-colors)、间距 --kendo-spacing-{step}($kendo-spacing)、圆角 --kendo-border-radius-{size}($kendo-border-radii)、阴影 --kendo-elevation-{level}($kendo-elevation)、半透明 --kendo-translucency-base、动效 --kendo-duration-{name} 与 --kendo-easing-{name}、排版 --kendo-font-size、--kendo-font-family 等、图标尺寸类 .k-icon-{xs..xxxl}。

扩展与集成:可与自有设计系统对齐(覆盖 Kendo 令牌或直接对组件选择器应用自有令牌);自建 UI 时复用 Kendo 令牌;可与 Tailwind CSS 并存(Tailwind 管布局、Kendo 主题管组件样式),分为外部共享变量、Tailwind 优先、Kendo 优先三种方式。更多细节见相关参考文档。限制与具体价格、适用平台等资料未提供。