用途
Kendo UI for Angular — Layout Assistant 是一个面向 Angular 应用的布局辅助技能,用于检索 Kendo Design System 的 CSS 工具类,帮助开发者构建页面布局。当用户需要搭建页面布局时,可借助该技能获取与布局需求相关的工具类,而不必从零编写自定义 CSS。
主要能力
- 根据自然语言描述的布局需求,返回 Kendo Design System 中相关的 CSS 工具类。
- 支持通过参数 includeBuildingBlockExamples 控制是否附带示例构建块。
- 覆盖常见布局场景,如仪表盘布局(页头、侧边导航、带卡片的主内容区、页脚)以及响应式卡片网格(移动端堆叠、平板 2 列、桌面 3 列)。
- 支持针对响应式调整单独发起调用。
使用方式
使用前需先阅读 layout-conventions.md,其中包含安装说明、关键的 Angular 尺寸规则以及可直接使用的布局组件。
通过 kendo_layout_assistant MCP 工具调用,示例:
kendo_layout_assistant({
prompt="<Detailed description of the layout: sections, structure, responsive needs, component types>",
includeBuildingBlockExamples=true // Set to true to include example building blocks
})
示例一:
kendo_layout_assistant({
prompt="Provide Kendo Design System utility classes for a dashboard layout with a header, sidebar navigation, main content area with cards, and a footer. Needs to be responsive across mobile and desktop.",
includeBuildingBlockExamples=true
})
示例二:
kendo_layout_assistant({
prompt="Provide Kendo Design System utility classes to make a 3-column card grid responsive — stacked on mobile, 2 columns on tablet, 3 columns on desktop."
})
查询建议:
- 描述要具体,包含所有区块(页头、侧边栏、内容区、页脚)、所用组件类型以及响应式要求。
- 如果各区块需求不同,可对每个主要区块单独发起一次布局调用。
- 在编写自定义布局 CSS 之前,始终先调用该工具,因为工具类已覆盖大多数布局场景。
- 如需响应式调整,请单独发起一次调用并描述响应式要求。
- 查阅 layout-conventions.md 了解 Angular 特定规则(例如 flex 子元素上的 min-width: 0,Grid 与 Chart 的显式 [height] 绑定)。
适用场景
适用于使用 Kendo UI for Angular 构建页面布局的开发者,尤其是需要快速获得符合 Kendo Design System 的布局工具类、构建仪表盘或响应式网格等场景。
限制
资料未提供该技能的收费、价格、平台支持范围或具体效果等信息。