syncfusion-javascript-breadcrumb

用途

Syncfusion JavaScript Breadcrumb 组件是一个图形用户界面元素，用于帮助用户识别并高亮当前在网站层级结构中的位置。它让用户了解自己在网站链接层级中的当前位置，从而改善导航体验并降低认知负担。

该技能适用于以下情形：显示层级导航路径；在多级结构中展示当前位置；在单页应用中实现面包屑轨迹；以不同显示模式处理溢出项；自定义面包屑外观与行为；响应用户对面包屑项的交互；对面包屑项应用动态样式与模板。

主要能力

层级导航显示：展示从根节点到当前位置的导航路径。
多种溢出模式：Menu、Collapsed、Hidden、Scroll、Wrap、None。
项自定义：模板、图标、禁用状态。
事件处理：点击事件与渲染回调。
RTL 支持：从右到左方向渲染。
状态持久化：可选的组件状态保留。
基于 URL 生成：从 URL 自动创建面包屑。

使用方式

快速开始示例

// Create breadcrumb component
const breadcrumbObj = new Breadcrumb({
  items: [
    { text: 'Home', url: '/' },
    { text: 'Category', url: '/category' },
    { text: 'Product', url: '/product' }
  ],
  enableNavigation: true
});

// Append to DOM
breadcrumbObj.appendTo('#breadcrumb');

// Handle item click
breadcrumbObj.itemClick = (args) => {
  console.log('Clicked item:', args.item.text);
};

常见模式

模式 1：带图标的基础导航

const breadcrumb = new Breadcrumb({
  items: [
    { text: 'Dashboard', url: '/', iconCss: 'e-icons e-home' },
    { text: 'Products', url: '/products', iconCss: 'e-icons e-package' },
    { text: 'Electronics', url: '/products/electronics' }
  ]
});

模式 2：Menu 模式溢出

const breadcrumb = new Breadcrumb({
  items: [...manyItems],
  maxItems: 4,
  overflowMode: 'Menu'
});

模式 3：导航事件处理

const breadcrumb = new Breadcrumb({
  items: [...items],
  itemClick: (args) => {
    // Prevent default navigation
    args.cancel = false;
    // Navigate to item URL
    window.location.href = args.item.url;
  }
});

模式 4：动态更新项

breadcrumb.items = newItemsList;
breadcrumb.dataBind();

关键属性

属性	类型	默认值	用途
items	BreadcrumbItemModel[]	[]	要显示的面包屑项列表
activeItem	string	''	活动面包屑项的 URL
overflowMode	string	'Menu'	项超过 maxItems 时的处理方式
maxItems	number	-1	触发溢出行为前的最大项数
enableNavigation	boolean	true	是否允许项导航
disabled	boolean	false	禁用整个面包屑
cssClass	string	''	用于样式的自定义 CSS 类
enableRtl	boolean	false	从右到左渲染

文档导航

入门：references/getting-started.md（安装与包设置、基础初始化、创建并填充 items 数组、将组件追加到 DOM、最小可运行示例、CSS 导入与主题配置）。
组件属性概览：references/component-properties.md（核心属性、导航配置、状态管理、基于 URL 生成、默认值、配置模式与最佳实践）。
项配置：references/items-configuration.md（BreadcrumbItemModel 接口与属性、创建与配置项、管理启用/禁用状态、添加图标、动态更新、可访问性注意事项）。
模板与自定义：references/templates-and-customization.md（itemTemplate、separatorTemplate、模板函数模式、自定义渲染、分隔符自定义、CSS 类自定义策略）。
溢出模式与行为：references/overflow-modes.md（BreadcrumbOverflowMode 枚举的 6 种模式、各模式下的 maxItems 配置）。
事件与事件处理：references/events-handling.md（itemClick、beforeItemRender、created、事件处理模式、事件参数、取消事件、常见用例）。
方法与生命周期：references/methods-and-lifecycle.md（appendTo、destroy、dataBind、refresh、getRootElement、addEventListener/removeEventListener、Inject、方法最佳实践与时机）。

适用场景

网站导航面包屑：显示当前页面在站点层级中的位置，允许导航到父页面，高亮活动项。
电商分类导航：显示产品分类路径，以溢出方式处理深层嵌套分类，支持快速导航到父分类。
应用工作区导航：显示当前模块/功能路径，展示导航历史面包屑，实现动态路径更新。
文件系统浏览器：显示当前目录路径，在文件夹层级中导航，以溢出方式处理大型文件夹结构。

限制

资料未提供关于收费、价格、平台兼容性、性能效果或具体使用步骤的额外说明，相关内容暂未提供。