Back to Details

umbraco-kinds

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Kinds

Umbraco Kinds

What is it?

什么是Kinds？

A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties that multiple extensions can share. Kinds ensure standardized structures across extensions and simplify definitions by providing predefined properties that extensions automatically inherit.
Kind是一种预设配置，供扩展继承以保证一致性。它通过定义多个扩展可共享的默认属性来减少冗余。Kinds确保扩展之间的结构标准化，并通过提供扩展可自动继承的预定义属性来简化定义。

Documentation

文档

Always fetch the latest docs before implementing:
在实现前请务必获取最新文档：

Workflow

工作流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - What extension type? What default properties to share?
  3. Generate files - Create kind manifest + consuming extensions based on latest docs
  4. Explain - Show what was created and how to test
  1. 获取文档 - 使用WebFetch获取上述URL的内容
  2. 提出问题 - 要扩展的类型是什么？要共享哪些默认属性？
  3. 生成文件 - 根据最新文档创建Kind清单和使用该Kind的扩展
  4. 说明 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Registering a Kind

注册一个Kind

typescript
import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-api';

export const customButtonKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.HeaderAppButton',
  matchType: 'headerApp',
  matchKind: 'button',
  manifest: {
    elementName: 'umb-header-app-button',
  },
};
typescript
import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-api';

export const customButtonKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.HeaderAppButton',
  matchType: 'headerApp',
  matchKind: 'button',
  manifest: {
    elementName: 'umb-header-app-button',
  },
};

Using a Kind in an Extension

在扩展中使用Kind

typescript
const manifest = {
  type: 'headerApp',
  kind: 'button',  // Uses the 'button' kind
  name: 'My Header App',
  alias: 'My.HeaderApp',
  meta: {
    label: 'My App',
    icon: 'icon-heart',
    href: '/my-app',
  },
};
typescript
const manifest = {
  type: 'headerApp',
  kind: 'button',  // 使用'button' kind
  name: 'My Header App',
  alias: 'My.HeaderApp',
  meta: {
    label: 'My App',
    icon: 'icon-heart',
    href: '/my-app',
  },
};

Kind with Default Meta Properties

带有默认Meta属性的Kind

typescript
export const cardKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.DashboardCard',
  matchType: 'dashboard',
  matchKind: 'card',
  manifest: {
    elementName: 'my-dashboard-card',
    meta: {
      // Default meta properties
      size: 'medium',
      color: 'default',
    },
  },
};

// Extension inherits defaults, can override
const dashboard = {
  type: 'dashboard',
  kind: 'card',
  alias: 'My.Dashboard',
  name: 'My Dashboard',
  meta: {
    label: 'Stats',
    pathname: 'stats',
    // size and color inherited from kind
  },
};
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
typescript
export const cardKind: UmbExtensionManifestKind = {
  type: 'kind',
  alias: 'My.Kind.DashboardCard',
  matchType: 'dashboard',
  matchKind: 'card',
  manifest: {
    elementName: 'my-dashboard-card',
    meta: {
      // 默认Meta属性
      size: 'medium',
      color: 'default',
    },
  },
};

// 扩展继承默认属性，可覆盖
const dashboard = {
  type: 'dashboard',
  kind: 'card',
  alias: 'My.Dashboard',
  name: 'My Dashboard',
  meta: {
    label: 'Stats',
    pathname: 'stats',
    // size和color从kind继承
  },
};
就是这样！请始终获取最新文档，保持示例最简，生成完整可运行的代码。