Message

기본 메세지 알림

-Text with icon / Text only 선택 사용 할 수 있다.

<div class="gn-message is-success has-arrange">
  <span class="gn-icon is-normal">
    <i class="fas fa-check"></i>
  </span>
  <p>Success! Your message has been sent successfully. <br/> Success! Your message has been sent successfully. </p>
</div>
<div class="gn-message is-warning has-arrange">
<span class="gn-icon is-normal">
    <i class="fas fa-exclamation-circle"></i>
  </span>
  <p>Warning! There was a problem with your network connection.</p>
  <span class="gn-icon is-close is-dark">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-message is-danger has-arrange">
  <span class="gn-icon is-normal">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <p>Error! A problem has been occurred while submitting your data.</p>
</div>
<div class="gn-message is-info has-arrange">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p>Info! Please read the comments carefully.</p>
  <span class="gn-icon is-close is-dark">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-message is-guide has-arrange">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p> 가이드 메시지 한글 폰드 테스트  Guide!</p>
</div>

일반 메세지

<div class="gn-message">
  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
</div>
<p class="gn-message">
  Velit laboris elit cillum quis velit. Ipsum veniam aute est ea aliquip aute eu mollit. Tempor tempor incididunt occaecat ullamco velit esse. Ex Lorem cupidatat non quis irure velit ut fugiat consequat. Velit deserunt irure proident irure id non mollit irure et esse magna. Sint incididunt consequat reprehenderit veniam ea mollit eu laborum ipsum sit magna voluptate.
</p>

색상

<div class="gn-message is-success">
  Success
</div>
<div class="gn-message is-warning">
  Warning
</div>
<div class="gn-message is-danger">
  Danger
</div>
<div class="gn-message is-info">
  Info
</div>
<div class="gn-message is-cancel">
  Cancel
</div>
<div class="gn-message is-dark">
  Dark
</div>
<div class="gn-message is-link">
  Link
</div>
<div class="gn-message is-secondary">
  Secondary
</div>
<div class="gn-message is-mono">
  Mono
</div>

크기

<div class="gn-message is-small">
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
</div>
<div class="gn-message is-normal">
  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
</div>
<div class="gn-message is-medium">
  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
</div>
<div class="gn-message is-large">
  Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
</div>

테두리 스타일

<div class="gn-message is-success has-arrange is-border">
  <span class="gn-icon is-normal">
    <i class="fas fa-check"></i>
  </span>
<p>Success! Your message has been sent successfully. </p>
</div>
<div class="gn-message is-warning has-arrange is-border">
<span class="gn-icon is-normal">
    <i class="fas fa-exclamation-circle"></i>
  </span>
  <p>Warning! There was a problem with your network connection.</p>
  <span class="gn-icon is-close is-dark">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-message is-danger has-arrange is-border">
  <span class="gn-icon is-normal">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <p>Error! A problem has been occurred while submitting your data.</p>
</div>
<div class="gn-message is-info has-arrange is-border">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p>Info! Please read the comments carefully.</p>
  <span class="gn-icon is-close is-dark">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-message is-help has-arrange is-border">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p> Help Info! (icon+닫기)</p>
  <span class="gn-icon is-close is-dark">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-message is-help has-arrange is-border">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p> Help Info! (icon)</p>
</div>
<div class="gn-message is-cancel is-border">
  Cancel
</div>
<div class="gn-message is-dark is-border">
  Dark
</div>
<div class="gn-message is-link is-border">
  Link
</div>
<div class="gn-message is-secondary is-border">
  Secondary
</div>
<div class="gn-message is-mono is-border">
  Mono
</div>

생성 옵션

  <div class="gn-container page-message"></div>
  <button class="gn-button new-message">Message 예제보기</button>

  Gn.create('message', {
    target: '.page-message', 
    textSets: { message: '메세지가 생성됩니다!<br>잠시만 기다려주세요.' }
  });

메소드