import{_ as l,c as e,ag as h,j as a,a as i,G as n,w as k,B as p,o as d}from"./chunks/framework.C1C4sYC0.js";const A=JSON.parse('{"title":"배지","description":"","frontmatter":{},"headers":[],"relativePath":"ko/reference/default-theme-badge.md","filePath":"ko/reference/default-theme-badge.md","lastUpdated":1723200489000}'),r={name:"ko/reference/default-theme-badge.md"},E={id:"제목",tabindex:"-1"},g={id:"제목-1",tabindex:"-1"},o={id:"제목-2",tabindex:"-1"},y={id:"제목-3",tabindex:"-1"},F={id:"제목-커스텀-노드",tabindex:"-1"};function B(c,s,u,b,C,f){const t=p("Badge");return d(),e("div",null,[s[16]||(s[16]=h(`

배지

배지는 헤더에 상태를 추가할 수 있게 해줍니다. 예를 들어, 섹션의 타입을 지정하거나 지원되는 버전을 표시하는 데 유용할 수 있습니다.

사용법

Badge 컴포넌트는 전역으로 사용 가능합니다.

html

### 제목 <Badge type="info" text="default" />
### 제목 <Badge type="tip" text="^1.9.0" />
### 제목 <Badge type="warning" text="배타" />
### 제목 <Badge type="danger" text="주의" />

위 코드는 다음과 같이 렌더링됩니다:

`,6)),a("h3",E,[s[0]||(s[0]=i("제목 ")),n(t,{type:"info",text:"default"}),s[1]||(s[1]=i()),s[2]||(s[2]=a("a",{class:"header-anchor",href:"#제목","aria-label":'Permalink to "제목 "'},"",-1))]),a("h3",g,[s[3]||(s[3]=i("제목 ")),n(t,{type:"tip",text:"^1.9.0"}),s[4]||(s[4]=i()),s[5]||(s[5]=a("a",{class:"header-anchor",href:"#제목-1","aria-label":'Permalink to "제목 "'},"",-1))]),a("h3",o,[s[6]||(s[6]=i("제목 ")),n(t,{type:"warning",text:"배타"}),s[7]||(s[7]=i()),s[8]||(s[8]=a("a",{class:"header-anchor",href:"#제목-2","aria-label":'Permalink to "제목 "'},"",-1))]),a("h3",y,[s[9]||(s[9]=i("제목 ")),n(t,{type:"danger",text:"주의"}),s[10]||(s[10]=i()),s[11]||(s[11]=a("a",{class:"header-anchor",href:"#제목-3","aria-label":'Permalink to "제목 "'},"",-1))]),s[17]||(s[17]=h('

커스텀 하위 노드

<Badge>는 children을 받아서 배지 내부에 표시합니다.

html

### 제목 <Badge type="info">커스텀 노드</Badge>

',3)),a("h3",F,[s[13]||(s[13]=i("제목 ")),n(t,{type:"info"},{default:k(()=>s[12]||(s[12]=[i("커스텀 노드")])),_:1}),s[14]||(s[14]=i()),s[15]||(s[15]=a("a",{class:"header-anchor",href:"#제목-커스텀-노드","aria-label":'Permalink to "제목 커스텀 노드"'},"",-1))]),s[18]||(s[18]=h(`

타입 색상 커스터마이징

배지의 스타일은 CSS 변수를 재정의하여 커스터마이징 할 수 있습니다. 다음은 기본값입니다:

css

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-brand-1);
  --vp-badge-tip-bg: var(--vp-c-brand-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

`<Badge>`

<Badge> 컴포넌트는 다음과 같은 프로퍼티를 사용합니다:

interface Props {
  // \`<slot>\`이 전달되면, 이 값은 무시됨.
  text?: string

  // 기본값: \`tip\`.
  type?: 'info' | 'tip' | 'warning' | 'danger'
}

`,6))])}const m=l(r,[["render",B]]);export{A as __pageData,m as default};

배지 ​

사용법 ​

커스텀 하위 노드 ​

타입 색상 커스터마이징 ​

<Badge> ​

배지

사용법

커스텀 하위 노드

타입 색상 커스터마이징

`<Badge>`