Alert

기본 Alert 확장

• 가로 사이즈 400이하 일 때 버튼은 가운데 정렬 선택
• 가로 사이즈 400이상 일 때 버튼은 오른쪽 정력 선택
• 백그라운드 컬러가 적용된 Alert은 투명 버튼 사용

<div class="gn-alert" 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
  <div class="alert-controls">
    <button type="button" class="gn-button">확인</button>
    <button type="button" class="gn-button is-cancel">취소</button>
  </div>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
  <div class="alert-controls has-text-right">
    <button type="button" class="gn-button is-outline is-trans">확인</button>
    <button type="button" class="gn-button is-cancel">취소</button>
  </div>
</div>

기본 사용

<div class="gn-alert">
  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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>

크기

<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>

색상

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

<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>
<div class="gn-alert 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.
  <span class="gn-icon is-close">
    <i class="fas fa-times"></i>
  </span>
</div>

생성 옵션

  <button class="gn-button new-alert">Alert 예제보기</button>

  Gn.create('alert', {
    textSets : { alertText: 'alert이 생성됩니다.' },
    hasClose: false,
    hasConfirm: true,
    hasCancel: true,
    onConfirm: function(){
      console.log('확인 되었습니다.')
    },
    onClose: function(){
      console.log('취소 되었습니다.')
    }
  });

메소드