Tag
Tag (태그)
작지만 다재다능한 요소예요. 블록이나 다른 컴포넌트에 정보를 붙일(attach) 때 아주 유용해요. 크기가 작아서 숫자로도 표시하기 좋고, 긴 항목 목록에도 잘 어울려요.
출처: 문서
본문
Bulma의 tag는 작지만 다재다능한 요소예요. 블록이나 다른 컴포넌트에 정보를 붙일 때 아주 유용하며, 크기가 작아 긴 항목 목록에 숫자처럼 표시하기에도 적합해요.
기본적으로 tag는 높이 1.5rem인 라벨이에요.
Example
<span class="tag"> Tag label </span>
색상 (Colors)
버튼과 마찬가지로 10가지 색상을 사용할 수 있어요.
Example
<span class="tag is-black">Black</span>
<span class="tag is-dark">Dark</span>
<span class="tag is-light">Light</span>
<span class="tag is-white">White</span>
<span class="tag is-primary">Primary</span>
<span class="tag is-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
<span class="tag is-danger">Danger</span>
색상의 라이트 버전도 선택할 수 있어요.
Example
<span class="tag is-primary is-light">Primary</span>
<span class="tag is-link is-light">Link</span>
<span class="tag is-info is-light">Info</span>
<span class="tag is-success is-light">Success</span>
<span class="tag is-warning is-light">Warning</span>
<span class="tag is-danger is-light">Danger</span>
크기 (Sizes)
tag는 3가지 크기로 제공돼요.
기본 크기는 normal이지만, tag를 normal 크기로 되돌려야 할 때를 위해 is-normal 수정자도 있어요.
Example
<span class="tag is-link is-normal">Normal</span>
<span class="tag is-primary is-medium">Medium</span>
<span class="tag is-info is-large">Large</span>
모든 tag의 크기를 한 번에 바꿀 수도 있어요.
Example
<div class="tags are-medium">
<span class="tag">All</span>
<span class="tag">Medium</span>
<span class="tag">Size</span>
</div>
Example
<div class="tags are-large">
<span class="tag">All</span>
<span class="tag">Large</span>
<span class="tag">Size</span>
</div>
일부 tag는 원래 크기를 유지하고 싶다면, 해당 tag에만 수정자 클래스를 적용하면 돼요.
Example
<div class="tags are-medium">
<span class="tag">Medium</span>
<span class="tag is-normal">Normal</span>
<span class="tag">Medium</span>
<span class="tag is-large">Large</span>
<span class="tag">Medium</span>
</div>
Hover/Active 상태
tag 요소는 다음 조건에서 :hover와 :active 상태에 반응해요.
- 앵커 요소(
<a>)일 때 - 버튼 요소(
<button>)일 때 is-hoverable수정자 클래스를 가질 때
Example
<a class="tag">Hover me</a>
<button class="tag">Hover me</button>
<div class="tag is-hoverable">Hover me</div>
수정자 (Modifiers)
is-rounded 수정자를 붙이면 둥근 tag를 만들 수 있어요.
<span class="tag is-rounded">Rounded</span>
is-delete 수정자를 붙이면 tag를 삭제 버튼으로 바꿀 수 있어요.
<a class="tag is-delete"></a>
조합 (Combinations)
hoverable한 색상 tag를 만들 수 있어요.
Example
<a class="tag is-link">Hover me</a>
<button class="tag is-primary">Hover me</button>
<div class="tag is-hoverable is-success">Hover me</div>
<a class="tag is-info">Hover me</a>
<button class="tag is-warning">Hover me</button>
<div class="tag is-hoverable is-danger">Hover me</div>
delete 버튼을 붙일 수도 있어요.
Example
<span class="tag is-success">
Bar
<button class="delete is-small"></button>
</span>
<span class="tag is-warning is-medium">
Hello
<button class="delete is-small"></button>
</span>
<span class="tag is-danger is-large">
World
<button class="delete"></button>
</span>
tag 목록 (List of tags)
tags 컨테이너로 tag 목록을 만들 수 있어요.
Example
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
</div>
목록이 매우 길면 여러 줄로 자동 줄바꿈되며, 모든 tag 사이의 간격은 균일하게 유지돼요.
Example
<div class="tags">
<span class="tag">One</span>
<span class="tag">Two</span>
<span class="tag">Three</span>
<span class="tag">Four</span>
<span class="tag">Five</span>
<span class="tag">Six</span>
<span class="tag">Seven</span>
<span class="tag">Eight</span>
<span class="tag">Nine</span>
<span class="tag">Ten</span>
<span class="tag">Eleven</span>
<span class="tag">Twelve</span>
<span class="tag">Thirteen</span>
<span class="tag">Fourteen</span>
<span class="tag">Fifteen</span>
<span class="tag">Sixteen</span>
<span class="tag">Seventeen</span>
<span class="tag">Eighteen</span>
<span class="tag">Nineteen</span>
<span class="tag">Twenty</span>
</div>
tag addons
has-addons 수정자로 tag들을 서로 붙일 수 있어요.
Example
<div class="tags has-addons">
<span class="tag">Package</span>
<span class="tag is-primary">Bulma</span>
</div>
텍스트 tag와 delete tag를 함께 붙일 수 있어요.
Example
<div class="tags has-addons">
<span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a>
</div>
tags 컨테이너들을 서로 붙이려면 field 요소에 is-grouped와 is-grouped-multiline 수정자를 사용하면 돼요.
Example
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">npm</span>
<span class="tag is-info">1.0.4</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">build</span>
<span class="tag is-success">passing</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">chat</span>
<span class="tag is-primary">on gitter</span>
</div>
</div>
</div>
이 패턴은 긴 블로그 tag 목록에 유용해요.
Example
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Technology</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">CSS</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Flexbox</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Web Design</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Open Source</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Community</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<a class="tag is-link">Documentation</a>
<a class="tag is-delete"></a>
</div>
</div>
</div>
Sass와 CSS 변수
| Sass Variable | CSS Variable | Value |
|---|---|---|
$tag-radius |
var(--bulma-tag-radius) |
var(--bulma-radius) |
$tag-delete-margin |
var(--bulma-tag-delete-margin) |
1px |