Growl

기본 사용

<div class="gn-growl" style="width: 400px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-primary" style="width: 500px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>

크기

<div class="gn-growl is-small">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-normal">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-medium">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-large">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>

색상

• 백그라운드 컬러 알림창 이용 시 가로 사이즈 400이상 넘지 않는다.

<div class="gn-growl is-success" style="width: 400px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-warning" style="width: 400px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-danger" style="width: 400px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>
<div class="gn-growl is-info" style="width: 400px">
  Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
</div>

타입

<div class="gn-growl has-arrange is-success" style="width: 400px">
  <span class="gn-icon is-normal">
    <i class="fas fa-check"></i>
  </span>
  <p>
    Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
  </p>
</div>
<div class="gn-growl has-arrange is-warning" style="width: 400px">
  <span class="gn-icon is-normal">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <p>
    Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
  </p>
</div>
<div class="gn-growl has-arrange is-danger" style="width: 400px">
  <span class="gn-icon is-normal">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <p>
    Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
  </p>
</div>
<div class="gn-growl has-arrange is-info" style="width: 400px">
  <span class="gn-icon is-normal">
    <i class="fas fa-info-circle"></i>
  </span>
  <p>
    Non et elit ea Lorem. Sit dolor id irure cillum ad eu velit duis mollit proident ad et. Anim nisi culpa elit deserunt eiusmod. Pariatur anim ipsum sunt exercitation pariatur. Nulla laboris amet minim eu et. Elit aliquip amet anim elit non eu sit duis nulla. Laboris nulla laboris in officia eiusmod irure.
  </p>
</div>

생성 옵션

  <button class="gn-button new-growl1">Growl 예제보기</button>
  <button class="gn-button new-growl2">Growl 예제보기</button>

  Gn.create('growl', {
    textSets : {message: '메세지가 생성됩니다!'},
    duration: 3000,
    positionX: 'right',
    positionY: 'top',
    color: 'danger'
  });
  Gn.create('growl', {
    textSets : {message: '메세지가 생성됩니다!'},
    duration: 3000
  });