메시지

메시지 (Message)

Bulma message는 여러 부분으로 구성된 컴포넌트입니다:

• message 컨테이너
• (선택) 제목과 delete 요소를 담을 수 있는 message-header
• 메시지의 긴 본문을 담는 message-body

출처: 문서

본문

<article class="message">
  <div class="message-header">
    <p>Hello World</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
    diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
    <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
    neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

색상 (Colors)

메시지 컴포넌트는 $colors Sass 맵에 정의된 모든 색상을 지원합니다. is-dark, is-link, is-primary, is-info, is-success, is-warning, is-danger 수식어를 붙이면 됩니다.

<article class="message is-primary">
  <div class="message-header">
    <p>Primary</p>
    <button class="delete" aria-label="delete"></button>
  </div>
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
    diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
    <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
    neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

메시지 본문만 사용 (Message body only)

필요 없다면 message-header를 제거할 수 있어요. 이 경우 message-body에 왼쪽 테두리가 생깁니다.

<article class="message">
  <div class="message-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
    diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
    <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
    neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
  </div>
</article>

크기 (Sizes)

message 컴포넌트에는 3가지 크기 수식어를 추가할 수 있어요: is-small, is-medium, is-large. (메시지 크기가 달라지면 delete 버튼에도 같은 크기 수식어를 붙여주면 좋아요.)

<article class="message is-large">
  <div class="message-header">
    <p>Large message</p>
    <button class="delete is-large" aria-label="delete"></button>
  </div>
  <div class="message-body">
    <!-- 본문 내용 -->
  </div>
</article>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Notification 요소
• Card 컴포넌트