NavigationMenu

NavigationMenu 컴포넌트입니다. 마우스 포인터가 해당 메뉴에 올라가 있을 경우, 서브 메뉴 아이템이 보이는 형태입니다.

Button

Basic Button

Button 은 기본 사이즈외에 Large,Extra 사이즈의 버튼형태를 제공합니다.
또한, Symbolic Class 를 적용하여 Confirm, Success, Warning, Danger 등의 컬러를 적용 할 수 있습니다.

[기본]

[Large]

[Extra]

Button Typeb

Outline 으로만 이루어진 버튼을 제공합니다. Basic Button 과 마찬가지로 기본 사이즈외에 Large,Extra 사이즈의 버튼형태를 제공합니다.

[기본]

[Large]

[Extra]

GroupButton

그룹 버튼은 여러 개의 버튼이 하나의 컴포넌트로 묶여있는 컴포넌트로써, 기본 버튼과 마찬가지로 Outline으로 스타일된 type b 형태도 제공합니다.
기능적으로는 Radio,Checkbox 기능을 가진 그룹 버튼과 세로 방향 배치가 가능한 형태의 그룹 버튼도 가능합니다.

Basic GroupButton


Basic Radio GroupButton


Basic CheckBox GroupButton
GroupButton Typeb


Radio GroupButton Typeb


CheckBox GroupButton Typeb
Vertical GroupButton
Vertical GroupButton Typeb

Icon Button

아이콘이 들어간 버튼입니다. 아이콘의 포지션을 지정할 수 있으며, Text 없이 아이콘만 사용할 수 있습니다.

[기본]

[Large]

[Extra]

[Icon만 사용]

Dropdown & DropdownButton

Dropdown 은 상위 Base element 와 연결되어 리스트항목을 보여줍니다.주로, Button 또는 TextInput과 함께 사용됩니다.
DropdownButton은 버튼과 Dropdown 이 결합된 형태입니다.

DropdownButton

Accordion & List

Accordion

Accordion은 리스트를 접기/펼치기 형태로 보여주는 컴포넌트 입니다.하위 항목의 접기/펼치기가 가능합니다.

List

List 컴포넌트는 목록을 보여주기 위해 사용하는 컴포넌트입니다.항목의 링크걸기가 가능합니다.

Table

Table(Normal)

Header 와 Body 영역이 구별되게 스타일되어진 테이블입니다.

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3 Row 4, Col 4
Table(Vertical & Horizontal)

Body 영역의 행 또는 열을 병합한 테이블입니다.

1st Header 2nd Header 3rd Header 4th Header
th : Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
th : Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
th : Row 1, Col 1 Row 3, Col 2 Row 3, Col 4
th : Row 2, Col 1 Row 4, Col 3
Table(Form)

Form 형태로 스타일되어진 테이블입니다.

* title1 title2
삭제
국가를 선택하세요.
title3
title4 value4
title5 value5 title6
삭제
DateRange
From
~ To
title7 value7 title8 value8 value9
Table(Horizontal Color)

Body 영역의 행 단위로 특정 색상을 지정한 테이블입니다.

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3 Row 4, Col 4
Table(Vertical Color)

Body 영역의 열 단위로 특정 색상을 지정한 테이블입니다.

1st Header 2nd Header 3rd Header 4th Header
Row 1, Col 1 Row 1, Col 2 Row 1, Col 3 Row 1, Col 4
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3 Row 2, Col 4
Row 3, Col 1 Row 3, Col 2 Row 3, Col 3 Row 3, Col 4
Row 4, Col 1 Row 4, Col 2 Row 4, Col 3 Row 4, Col 4

Tab

Basic Tab

기본 탭 구성입니다.

  • tab1
  • tab2
  • tab3

tab1 contents

tab2 contents

tab3 contents

Menu Tab

헤더 버튼 부분에 아이콘을 넣은 탭입니다.

  • Star
  • Search
  • Download-alt

Star contents

Search contents

Download-alt contents

2 Depth Tab

탭 컨텐츠 안에 탭이 들어있는 2중 탭 구조입니다.

  • Main Menu 01
  • Main Menu 02
  • Main Menu 03
  • Sub Menu01
  • Sub Menu02
  • Sub Menu03
sub01
sub02
sub03
main02
  • Main Menu3의 Sub Menu01
  • Main Menu3의 Sub Menu02
  • Main Menu3의 Sub Menu03
Main Menu3의 sub01 contents
Main Menu3의 sub02 contents
Main Menu3의 sub03 contents
Fixed Tab

탭 버튼영역의 너비값을 고정합니다. overflow-x에 대한 scroll처리를 위해 div.Scroller로 감싸줍니다.

  • tab1
  • tab2
  • tab3
  • tab4
  • tab5
  • tab6
  • tab7
  • tab8
  • tab9
tab1 내용
tab2 내용
tab3 내용
tab4 내용
tab5 내용
tab6 내용
tab7 내용
tab8 내용
tab9 내용
Edit Tab

동적으로 탭을 생성 또는 삭제 가능한 탭입니다.

  • tab1 Elements
  • tab2 Elements
  • tab3 Elements

tab1 contents

tab2 contents

tab3 contents

TextInput & TextArea

TextInput 과 TextArea 에는 disabled 형태와 Symbolic Class 를 적용하여 Confirm, Success, Warning, Danger 등의 컬러를 적용 할 수 있습니다

TextInput
TextArea

Spinner

Spinner는 버튼으로 숫자를 증감 시킬 수 있는 컴포넌트입니다.

Select

Select는 목록에서 한가지 혹은 여러가지 아이템을 선택할 때 사용하는 컴포넌트입니다.
MultiSelect를 사용하기 위해서는 alopex-ext.css , alopex-ext.min.js , alopex-ext-setup.js를 import 하여야합니다.

Select

기본 Select 입니다.

Image Select(Divselect)

배경에 이미지를 사용한 Select 입니다.

MultiSelect

다중선택이 가능한 MultiSelect 입니다.

Select (with Symbolic Class)

Symbolic Class 를 적용하여 Confirm, Success, Warning, Danger 등의 컬러를 적용 할 수 있습니다

DateInput

DateInput은 input element를 이용한 달력 컴포넌트입니다.

DateInput

기본 DateInput 입니다.


Disabled

비활성상태의 DateInput 입니다.


Clear Icon

초기화 버튼이 있는 DateInput 입니다.


삭제
Calendar Icon

아이콘 버튼을 통해 달력을 나타나게하는 DateInput 입니다.

Another Format

날짜 형식을 다르게 적용 한 DateInput 입니다.

Monthly

월만 선택가능한 DateInput 입니다.


Year / Month Select

년도와 월을 Select 컴포넌트를 이용하여 선택할 수 있는 DateInput 입니다.

Calendar Icon + Clear Icon

Clear 아이콘과 Calendar 아이콘을 동시에 사용하는 DateInput 입니다.

삭제

DateRange

DateRange는 input element를 이용하여 시작날짜과 종료날짜를 선택할 수 있는 컴포넌트입니다.

From
~ To

Paging

Paging 컴포넌트는 페이지 처리 기능을 제공하는 컴포넌트입니다.다양한 형태의 Paging 스타일을 제공하고 있습니다.

Basic Paging
Basic
1 2 3
Basic - Selected
1 2 3
Mobile Style
1 2 3
Prev / Next 1
Prev / Next 3
Typeb
Prev / Next 5

CheckBox

CheckBox는 사용자가 선택 사항에서 여러 개의 아이템을 선택할 수 있게 합니다.

CheckBox

기본 CheckBox 입니다.

Image CheckBox

배경에 이미지를 사용한 CheckBox 입니다.

Radio

Radio는 전체 항목중 하나만 선택 가능한 컴포넌트입니다

Radio

기본 Radio 입니다.

Image Radio

배경에 이미지를 사용한 Radio 입니다.

ToolTip

Tooltip은 element에 마우스가 이동했을 때 설명이나 간단한 도움말을 보여주는 컴포넌트입니다.

Default ToolTip

기본 ToolTip 입니다. Button, TextInput, Radio, CheckBox 와 함께 사용할 수 있습니다.

button
textinput
radio
checkbox
Position

ToolTip의 Position 을 정하여 사용 할 수 있습니다. top, bottom, left, right 로 설정 가능합니다.

ToolTip on top
ToolTip on top
ToolTip on bottom
ToolTip on bottom
ToolTip on left
ToolTip on left
ToolTip on right
ToolTip on right
Trigger Events

버튼의 click 또는 double click 이벤트에 연결하여 사용할 수 있습니다.

click
double-click
Animation

Tooltip이 나타나고 사라질 때의 animation 효과를 지정할 수 있습니다.

slide
slide ToolTip
fade
fade ToolTip

Tree

Tree 형태의 리스트 컴포넌트입니다.하위 계층구조에 따라 접기,펼치기가 가능합니다.

ProgressBar

ProgressBar는 작업의 진행 상태를 시각적으로 표현할 때 사용하는 컴포넌트입니다.

[기본형]

[이미지형]

Carousel

Carousel은 여러 페이지가 가로로 나열되어 좌우로 이동하며 페이지를 보여주는 컴포넌트입니다.Paging 버튼을 위치별로 적용할 수도 있습니다.

Paging - Center
Paging - Left
Paging - Right

Panel

Panel은 Layout을 구성하기 위해 사용되는 UI 엘리먼트 입니다.크게 헤더, 컨텐츠, 푸터 영역으로 구분되며, 필요에 따라 부분별 사용 가능합니다.
또한, Symbolic Class 를 적용하여 Primary, Success, Warning, Danger, Info 의 색상을 적용할 수 있습니다.

Basic Panel
Basic Panel
Panel Basic
Basic Panel Header
Panel Header
Panel Basic
Basic Panel Footer
Panel Basic
Theme Panel
Primary
Panel Header
Panel Basic
Success
Panel Header
Panel Basic
Warning
Panel Header
Panel Basic
Danger
Panel Header
Panel Basic
Info
Panel Header
Panel Basic

Dialog

Dialog 도 Symbolic Class 를 적용하여 Confirm, Success, Warning, Danger 의 색상을 적용할 수 있습니다.

Time is.. - Henry Van Dyke

Time is.. Too Slow for those who Wait Too Swift for those who Fear Too Long for those who Grieve Too Short for those who Rejoice But for those who Love Time is not..
Time is.. - Henry Van Dyke

Time is.. Too Slow for those who Wait Too Swift for those who Fear Too Long for those who Grieve Too Short for those who Rejoice But for those who Love Time is not..
Time is.. - Henry Van Dyke

Time is.. Too Slow for those who Wait Too Swift for those who Fear Too Long for those who Grieve Too Short for those who Rejoice But for those who Love Time is not..
Time is.. - Henry Van Dyke

Time is.. Too Slow for those who Wait Too Swift for those who Fear Too Long for those who Grieve Too Short for those who Rejoice But for those who Love Time is not..

Label

Label 은 Symbolic Class 를 적용하여 Default, Primary, Success,Warning, Danger, Confirm 의 인식표를 만들어 사용할 수 있습니다.

Default Primary Success Warning Danger Confirm

Quotations

우리는 오로지 사랑을 함으로써 사랑을 배울 수 있다.

Mark

IE 8.0 이하 <span class="Mark">사랑</span>
우리는 오로지 사랑을 함으로써 사랑을 배울 수 있다.
IE 9.0 이상 <mark class="Mark">사랑</mark>
우리는 오로지 사랑을 함으로써 사랑을 배울 수 있다.

Small, Strong, Del, Link

우리는 오로지( small) 사랑(Strong)을 함으로써 사랑(del)을 배울 수 있다.

a. 우리는 오로지 사랑을 함으로써 사랑을 배울 수 있다

Code

Script 내용을 표시할 때 사용되는 영역입니다.

.some-class { background-color: red; }
.some-class { background-color: red; } .some-class { background-color: red; } .some-class { background-color: red; } .some-class { background-color: red; } .some-class { background-color: red; }