SuperAPI AI 工具集

kendo-angular-layout

前端与建站

查看项目

更新于 10-16 06:56

技能介绍

用途

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 的布局工具类、构建仪表盘或响应式网格等场景。

限制

资料未提供该技能的收费、价格、平台支持范围或具体效果等信息。