Button

기본 사용

• 사용 태그 : a, button, input[submit], input[reset]

<button type="button" class="gn-button">확인</button>
<button type="button" class="gn-button is-dark">확인</button>
<button type="button" class="gn-button">수정</button>
<button type="button" class="gn-button is-dark">수정</button>
<button type="button" class="gn-button">목록</button>
<button type="button" class="gn-button is-cancel is-outline">취소</button>

Buttons with icons

• 사용 태그 :

<button type="button" class="gn-button"><i class="fa fa-cog"></i> Settings</button>
<button type="submit" class="gn-button"><i class="fa fa-shopping-cart fa-lg"></i> Checkout</button>
<button type="button" class="gn-button is-cancel"><i class="fa fa-cog"></i> Settings</button>
<button type="button" class="gn-button is-cancel"><i class="fa fa-shopping-cart fa-lg"></i> Checkout</button>
<button type="button" class="gn-button is-cancel"><i class="fa fa-download" aria-hidden="true"></i></button>

크기

• small, normal, medium, large, full

<p>
<button type="button" class="gn-button is-small">Small</button>
<button type="button" class="gn-button is-normal">Normal</button>
<button type="button" class="gn-button is-medium">Medium</button>
<button type="button" class="gn-button is-large">Large</button>
</p><p>
<button type="button" class="gn-button is-full">Full</button>
</p><p>
<button type="button" class="gn-button is-full is-large">Large Full</button>
</p>

색상

• success,warning,danger,info,cancel,dark,link,trans,secondary,mono

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

스타일

• outline, invert

<button type="button" class="gn-button is-outline is-success">Success</button>
<button type="button" class="gn-button is-outline is-warning">Warning</button>
<button type="button" class="gn-button is-outline is-danger">Danger</button>
<button type="button" class="gn-button is-outline is-info">Info</button>

<button type="button" class="gn-button is-invert is-success">Success</button>
<button type="button" class="gn-button is-invert is-warning">Warning</button>
<button type="button" class="gn-button is-invert is-danger">Danger</button>
<button type="button" class="gn-button is-invert is-info">Info</button>

상태

• hover, focus, active, disabled, invalid, loading

<button type="button" class="gn-button is-hover">Hover</button>
<button type="button" class="gn-button is-focus">Focus</button>
<button type="button" class="gn-button is-active">Active</button>
<button type="button" class="gn-button is-disabled">Disabled</button>
<button type="button" class="gn-button is-invalid">Invalid</button>
<button type="button" class="gn-button is-loading">Loading</button>

확장

• with icon

<button type="button" class="gn-button">
  <span class="gn-icon is-small">
    <i class="fas fa-bold"></i>
  </span>
</button>
<button type="button" class="gn-button is-info">
  <span class="gn-icon is-small">
    <i class="fas fa-home"></i>
  </span>
  HOME
</button>

• button arrange

<div class="gn-control has-arrange">
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-left"></i>
    </span>
    Left
  </button>
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-center"></i>
    </span>
    Center
  </button>
  <button type="button" class="gn-button">
    <span class="gn-icon">
      <i class="fas fa-align-right"></i>
    </span>
    Right
  </button>
</div>

생성 옵션

  <button class="gn-button" name="new-button">new button</button>

  Gn.create('button', {
    target: 'button[name=new-button]', 
    size: 'medium',
    icon: 'home',
    onClick: function(){
      console.log('버튼을 클릭했습니다.');
    }
  });

name		type	default	description
target		string		버튼을 생성할 대상의 선택자(selector)
textSets	buttonText	string		버튼에 표기할 문구
disabled		boolean	false	버튼 비활성화 여부
color		string		'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'
size		string		'small','normal','medium','large'
style		string		'outline','invert'
status		string		'hover','focus', 'active', 'disabled', 'invalid', 'loading'
icon		string		font awesome solid icon name
onClick		function		버튼 클릭 시 수행될 이벤트

메소드

name	return	description
click()	void	버튼을 클릭을 동작한다.
disable()	void	Disabled 처리한다.
enable()	void	Enabled 처리한다.