Breadcrumb 브레드크럼

현재 페이지의 계층 위치를 보여 주는 컴포넌트예요.

출처: 문서

본문

현재 페이지의 계층을 표시하는 컴포넌트예요.

언제 사용하나요?

1. 사용자가 현재 어떤 계층에 있는지 알아야 할 때;
2. 사용자가 이전 계층으로 빠르게 돌아가고 싶을 때;
3. 사용자가 지정한 계층과 같은 위치의 임의 페이지로 이동해야 할 때.

기본 브레드크럼

:::demo

<template>
  <d-breadcrumb>
    <d-breadcrumb-item to="{ path: '/' }">Homepage</d-breadcrumb-item>
    <d-breadcrumb-item>
      <a href="/">DevUI</a>
    </d-breadcrumb-item>
    <d-breadcrumb-item>
      <span>Breadcrumb</span>
    </d-breadcrumb-item>
  </d-breadcrumb>
</template>

:::

source 전달하기

:::demo

<template>
  <d-breadcrumb :source="source"></d-breadcrumb>
</template>
<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'DBreadcrumbDemoSourceConfig',
  setup() {
    const source = reactive([
      { title: 'DevUI', link: '/', linkType: 'routerLink', replace: true },
      { title: 'Breadcrumb', link: 'components/breadcrumb/', noNavigation: true },
    ]);
    return {
      source,
    };
  },
});
</script>

:::

구분 기호 커스텀 브레드크럼

:::demo

<template>
  <div>
    <d-breadcrumb separator-icon=">">
      <d-breadcrumb-item>
        <a routerLink="/components/zh-cn/get-start">DevUI</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>
        <span>Breadcrumb</span>
      </d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div>
    <d-breadcrumb>
      <template v-slot:separatorIcon>
        <span style="color: red">></span>
      </template>
      <d-breadcrumb-item>
        <a routerLink="/components/zh-cn/get-start">DevUI</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>
        <span>Breadcrumb</span>
      </d-breadcrumb-item>
    </d-breadcrumb>
  </div>
</template>

:::

드롭다운 메뉴가 있는 브레드크럼

:::demo

<template>
  <d-breadcrumb :source="source"></d-breadcrumb>
</template>
<script>
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'DBreadcrumbDemoDropdown',
  setup() {
    const source = reactive([
      { title: 'Homepage', link: '/', linkType: 'routerLink', replace: true },
      { title: 'DevUI', link: '/', noNavigation: true },
      { title: 'breadcrumb', showMenu: true, link: '/components/breadcrumb/', target: '_blank', children: [
        {
          title: '基础面包屑',
          link: '/components/breadcrumb/#基础面包屑'
        },
        {
          title: '传入source'
        },
        {
          title: '带下拉菜单的面包屑'
        }
      ]}
    ]);
    return {
      source,
    };
  },
});
</script>

:::

Breadcrumb 파라미터

BreadcrumbItem 파라미터

타입 정의

breadcrumbChildren

export interface breadcrumbChildren {
  title: string; // 표시할 이름
  link: string; // 이동할 경로. 절대 경로와 상대 경로 모두 가능하고, 라우트 설정과 일치해야 해요
  target?: string; // 링크 문서를 어디서 열지 정해요
}

SourceConfig

export interface SourceConfig {
  title: string; // 표시할 이름
  link?: string; // 이동할 경로
  target?: string; // 링크 문서를 어디서 열지 정해요
  noNavigation?: boolean; // 링크를 이동할 수 없게 할지 여부. 보통 현재 위치를 이동할 수 없게 설정할 때 사용해요
  linkType?: 'hrefLink' | 'routerLink'; // 링크 유형. 기본은 'hrefLink' 방식이고 'hrefLink' 또는 'routerLink'를 고를 수 있어요
  replace: Boolean; // to로 라우트를 이동할 때 replace를 켜면 history에 새 기록을 추가하지 않아요
  children?: breadcrumbChildren[]; // 드롭다운 안의 내용
  showMenu?: boolean; // 선택, 드롭다운 화살표와 드롭다운 목록 내용을 표시할지 여부
}

더 알아보기 (Learn more)

d-breadcrumb은 현재 위치를 보여 주고 상위 계층으로 돌아가는 길을 열어 주는 내비게이션 요소예요. 계층 구조가 깊어질수록 source 설정 방식이 반복 마크업보다 관리가 편하고, showMenu로 드롭다운까지 얹을 수 있어요.