@duskmoon-dev/el-breadcrumbs (日语)

由Web组件所构建的面包屑导航组件.

安装

bun add @duskmoon-dev/el-breadcrumbs

使用量

自动注册

import '@duskmoon-dev/el-breadcrumbs/register';

<el-dm-breadcrumbs></el-dm-breadcrumbs>

手工登记

import { ElDmBreadcrumbs, register } from '@duskmoon-dev/el-breadcrumbs';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-breadcrumbs', ElDmBreadcrumbs);

通过 JavaScript 设置项目

const breadcrumbs = document.querySelector('el-dm-breadcrumbs');
breadcrumbs.items = [
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Category', href: '/products/category' },
  { label: 'Current Page' }, // No href = current page
];

属性

槽数

CSS 组件

活动

实例

基础

<el-dm-breadcrumbs id="crumbs"></el-dm-breadcrumbs>
<script>
  document.querySelector('#crumbs').items = [
    { label: 'Home', href: '/' },
    { label: 'Library', href: '/library' },
    { label: 'Data' },
  ];
</script>

自定义分隔符

<el-dm-breadcrumbs separator=">"></el-dm-breadcrumbs>
<el-dm-breadcrumbs separator="→"></el-dm-breadcrumbs>
<el-dm-breadcrumbs separator="|"></el-dm-breadcrumbs>

自定义分隔符元素

<el-dm-breadcrumbs>
  <span slot="separator">›</span>
</el-dm-breadcrumbs>

处理导航

const breadcrumbs = document.querySelector('el-dm-breadcrumbs');
breadcrumbs.addEventListener('navigate', (e) => {
  e.preventDefault();
  console.log('Navigate to:', e.detail.item.href);
  // Handle navigation (e.g., with router)
});

动态更新

// Update breadcrumbs based on route
function updateBreadcrumbs(path) {
  const parts = path.split('/').filter(Boolean);
  const items = [{ label: 'Home', href: '/' }];

  let href = '';
  parts.forEach((part, index) => {
    href += `/${part}`;
    items.push({
      label: part.charAt(0).toUpperCase() + part.slice(1),
      href: index === parts.length - 1 ? undefined : href,
    });
  });

  document.querySelector('el-dm-breadcrumbs').items = items;
}

许可证

麻省理工学院