@bagaar/ember-breadcrumbs (英语)

Ember应用程序基于模板的面包crumb管理.

兼容性

• Ember.js v5.8或以上 (中文(简体) )
• 嵌入或嵌入自动导入 v2

安装

npm install -D @bagaar/ember-breadcrumbs

pnpm add -D @bagaar/ember-breadcrumbs

yarn add -D @bagaar/ember-breadcrumbs

使用量

登记 breadcrumbs 服务

经典应用不需要做任何事情: breadcrumbs 服务被再出口到 自动应用树.

使用严格解析器的应用程序必须自己注册服务,因为没有 app-tree再出口 解决他们:

// app/app.js

import BreadcrumbsService from '@bagaar/ember-breadcrumbs/services/breadcrumbs';

export default class App extends Application {
  modules = {
    './services/breadcrumbs': BreadcrumbsService,
    // ...
  };
}

见 demo-app/app.gts 以实例为例.

严格模式示例( GJS)

如果您使用严格的模式模板,请导入组件,并在模板块中直接使用。 同样的模式适用于GTS文件.

// app/components/breadcrumbs-demo.gjs

import Component from '@glimmer/component';
import { LinkTo } from '@ember/routing';
import { BreadcrumbsContainer, BreadcrumbsItem } from '@bagaar/ember-breadcrumbs/components';

export default class BreadcrumbsDemo extends Component {
  <template>
    <BreadcrumbsContainer
      @itemClass="breadcrumbs__item"
      @linkClass="breadcrumbs__link"
      class="breadcrumbs"
    />

    <BreadcrumbsItem as |linkClass|>
      <LinkTo @route="foo" class={{linkClass}}>
        Foo
      </LinkTo>
    </BreadcrumbsItem>

    <BreadcrumbsItem as |linkClass|>
      <LinkTo @route="foo.bar" class={{linkClass}}>
        Bar
      </LinkTo>
    </BreadcrumbsItem>
  </template>
}

1. 界定您想要将面包屑放入何处

{{! app/templates/application.hbs }}

<BreadcrumbsContainer
  @itemClass="breadcrumbs__item"
  @linkClass="breadcrumbs__link"
  class="breadcrumbs"
/>

注: 也可以制造出多个实例 <BreadcrumbsContainer /> 组件.

2. 离开面包屑后

{{! app/templates/foo.hbs }}

<BreadcrumbsItem as |linkClass|>
  <LinkTo @route="foo" class={{linkClass}}>
    Foo
  </LinkTo>
</BreadcrumbsItem>

{{! app/templates/foo/bar.hbs }}

<BreadcrumbsItem as |linkClass|>
  <LinkTo @route="foo.bar" class={{linkClass}}>
    Bar
  </LinkTo>
</BreadcrumbsItem>

注: 这个 <BreadcrumbsItem /> 构成部分负责提供 <LinkTo /> 包含到所有实例中 <BreadcrumbsContainer /> 使用 Ember 组件 {{in-element}} 帮手.

优点

留下这样的面包屑 可能看起来非常动词, 但实际上相当灵活 并有一些优点:

1. 因为你把面包屑留在模板里 添加剂不必考虑Aync模型钩
2. 因为你用Ember的 <LinkTo /> 用于定义面包屑链接的组件,您可以完全控制:
   • 如何定义它们 (内行对块
   • 他们应该如何工作 (路由,动态段,查询参数,
   • 他们应该是什么样子 (文字,图标,额外的CSS类名称,

渲染输出

产出如下:

<ul class="breadcrumbs">
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/foo">Foo</a>
  </li>
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="/foo/bar">Bar</a>
  </li>
</ul>

3. 面包屑的造型

外加剂没有默认型号的发货,这应该在消耗项目内进行.

4.四. <BreadcrumbsContainer /> 参数

引擎内用法

1. 添加 @bagaar/ember-breadcrumbs 到你的发动机 dependencies

这样就够了 @bagaar/ember-breadcrumbs 引擎内可用的组件.

{
  "dependencies": {
    "@bagaar/ember-breadcrumbs": "*"
  }
}

2. 制定 breadcrumbs 引擎内可用的服务

这将确保同一实例表明 breadcrumbs 服务在引擎内部和主机应用程序内部使用.

// app/app.js

export default class App extends Application {
  engines = {
    'engine-name': {
      dependencies: {
        services: ['breadcrumbs'],
      },
    },
  };
}

// lib/engine-name/addon/engine.js

export default class EngineName extends Engine {
  dependencies = {
    services: ['breadcrumbs'],
  };
}

就这样! 现在你应该可以把面包屑留在引擎内部, 并将其制成主机应用程序内部.

捐款

见 捐款 详细指南.

许可证

本项目根据以下规定获得许可证: MIT 许可证。 。 。 .