Component
Icon
Basic
Icon 컴포넌트를 통해 Alopex UI에서 제공하는 아이콘을 활용할 수 있습니다.
span 태그로 구성되어 class="Icon Icon-classname"
속성을 통하여 원하는 아이콘을 설정할 수 있습니다.
<span class="Icon Plus-sign"></span>
Supported icons
Alopex UI에서 지원하는 아이콘들입니다.
Icon Buttons
Icon 컴포넌트가 버튼 내에 포함된 예제입니다. 이경우 data-position을 사용하여 아이콘의 위치를 지정할 수 있습니다.
<button class="Button"><span class="Icon Plus-sign" data-position="left"></span>Add</button>
Custom icons
새로운 아이콘을 정의하고자 할 경우, Icon 클래스 뒤에 새로운 을 입력하고 그에 해당하는 스타일을 정의하면 새로운 아이콘을 사용할 수 있습니다.
<span class="Icon Bluetooth"></span>
.Icon.Bluetooth {
background: url(./bluetooth.png) no-repeat;
background-size: contain;
}
Attributes
class
- "Icon"
- Icon 컴포넌트를 사용한다고 명시하는 속성입니다.
- "Icon Icon-classname"
- 지원하는 icon이미지 (혹은 직접 만든 icon명) 의 class명.
<span class="Icon Plus-sign" data-position="top"></span>
data-position
Button 컴포넌트 내에 icon 지정시 icon위치
- top
- icon을 위쪽에 위치.
- bottom
- icon을 아래쪽에 위치.
- left
- icon을 왼쪽에 위치.
- right
- icon을 오른쪽에 위치.
<button class="Button">text only</button>
<button class="Button"><span class="Icon Plus-sign" data-position="top"></span>top</button>
<button class="Button"><span class="Icon Plus-sign" data-position="bottom"></span>bottom</button>
<button class="Button"><span class="Icon Plus-sign" data-position="left"></span>left</button>
<button class="Button"><span class="Icon Plus-sign" data-position="right"></span>right</button>
Options
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
position
Functions
.getOptions()
Icon에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Icon에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Icon에 설정된 모든옵션값을 가져옵니다.
$('#Icon').getOptions();
.setEnabled (isEnabled)
아이콘 컴포넌트의 활성화/비활성화를 동적으로 조정할 때 사용하는 함수입니다.
- parameter
- isEnabled {Boolean} Required
- 설정된 값에 의해서 버튼이 활성화/비활성화 됩니다.
- isEnabled {Boolean} Required
<span id="icon0" class="Icon Plus-sign"></span>
<button id="btn_setEabled" class="Button">Disable</button>
$('#btn_setEabled').click(disableAction);
function disableAction() {
if ($('#btn_setEabled').text() == 'Enable') {
$('#icon0').setEnabled(true);
$('#btn_setEabled').text('Disable');
} else {
$('#icon0').setEnabled(false);
$('#btn_setEabled').text('Enable');
}
}
.setOptions(options)
Icon에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Icon에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Icon').setOptions({
position: 'top'
});
Extra Example
GroupButton
<div class="Groupbutton">
<a class="Button">btn1<span class="Icon User" data-position="top"></span></a>
<a class="Button">btn2<span class="Icon Star" data-position="top"></span></a>
<a class="Button">btn3<span class="Icon Music" data-position="top"></span></a>
<a class="Button">btn4<span class="Icon Envelope" data-position="top"></span></a>
</div>
Tabs
- tab1
- tab2
- tab3
tab1
tab2
tab3
<div class="Tabs">
<ul>
<li data-content="#tab1"><span class="Icon Plus-sign" data-position="right"></span>tab1</li>
<li data-content="#tab2"><span class="Icon Minus-sign" data-position="right"></span>tab2</li>
<li data-content="#tab3"><span class="Icon Remove-sign" data-position="right"></span>tab3</li>
</ul>
<div id="tab1">
<strong>tab1</strong>
</div>
<div id="tab2">
<strong>tab2</strong>
</div>
<div id="tab3">
<strong>tab3</strong>
</div>
</div>
Paging
<div class="Paging" data-totalpage="19" data-button-behavior="disable">
<a class="Link First"><span class="Icon Step-backward" ></span></a>
<a class="Link Prev"><span class="Icon Chevron-left" ></span></a>
<a class="Link">1</a>
<a class="Link Selected">2</a>
<a class="Link">3</a>
<a class="Link Next"><span class="Icon Chevron-right" ></span></a>
<a class="Link Last"><span class="Icon Step-forward" ></span></a>
</div>