Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ko-KR): update components.mdx #1970

Merged
merged 3 commits into from
Jun 6, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions docs/src/content/docs/ko/guides/components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,36 @@ import { Steps } from '@astrojs/starlight/components';

</Steps>

### 배지

import { Badge } from '@astrojs/starlight/components';

상태나 라벨과 같은 작은 정보를 표시하려면 `<Badge>` 컴포넌트를 사용하세요.

표시하려는 콘텐츠를 `<Badge>` 컴포넌트의 `text` 속성에 전달하세요.

기본적으로 배지는 사이트의 테마 강조 색상을 사용합니다. 내장 배지 색상을 사용하려면 `variant` 속성의 값을 `note` (파란색), `tip` (보라색), `danger` (빨간색), `caution` (주황색), 'success'(녹색) 중 하나로 설정하세요.

`size` 속성 (기본값: `small`)은 배지의 텍스트 크기를 제어합니다. 더 큰 배지를 표시하기 위해 `medium` 및 `large` 옵션도 사용할 수 있습니다.

맞춤 설정이 더 필요하다면 사용자 정의 CSS와 함께 `class` 또는 `style`과 같은 다른 `<span>` 속성을 사용하세요.

```mdx title="src/content/docs/example.mdx"
import { Badge } from '@astrojs/starlight/components';

<Badge text="New" variant="tip" size="small" />
<Badge text="Deprecated" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />
```

위의 코드는 페이지에 다음을 생성합니다.

<Badge text="New" variant="tip" size="small" />
<Badge text="Deprecated" variant="caution" size="medium" />
<Badge text="Starlight" variant="note" size="large" />
<Badge text="Custom" variant="success" style={{ fontStyle: 'italic' }} />
jsparkdev marked this conversation as resolved.
Show resolved Hide resolved

### 아이콘

import { Icon } from '@astrojs/starlight/components';
Expand Down
Loading