Component

Timepicker

ui-input-block--time

-

ui-input-block--time-small

-

Basic Button

button tag

small

width-auto

height-18

icon

button button 이관 button button button button button button button 위치 button button 보관 위치 보기

Button List

Default

Align Left

Align Right

Align Center

Full width

No margin

width auto

Input

Default

large

Default - 삭제 버튼

숫자 입력

Textarea

Default

Date

Default

-
-
-
-
-
-
-
-
-
-

Phone Form

Default

-
-

Select

Default

Dropdown (링크, 버튼 용)

Default

link 1

File input

Default

텍스트 박스

아이콘 없음

Button

Input width

mini

small mini

small

small regular

regular

medium

large

input-width-숫자 : 필요한 너비값이 없으면 css에 클래스 추가하여 사용

Input height

mini

small

small-regular

small-medium

small-large

regular

large

input-height-숫자 : 필요한 높이값이 없으면 css에 클래스 추가하여 사용

Checkbox

Default

Default - align top

width 15

Radio

Default

Default - align top

check list

Default

인풋과 함께 사용할 때

Full

no top margin

2분할

3분할

4분할

6분할

.ui-check-list--width-숫자 : px값 너비가 필요한 경우 이용. 필요한 사이즈 없으면 css 에 클래스 추가하여 이용

Radio Tab

Default

row

form row

input row

Form flex

Default

Medium

Medium large

Large

align top

Setting board

Type 1

Type 2

집중관제
집중중앙그룹
집중대전그룹
그룹 및 권역
중앙그룹[전체]
대전그룹[전체]
보호관찰소
강릉 대구 서울

Type 2 - popup

아이템과 아이템 사이의 여백이 다름

집중관제
집중중앙그룹
집중대전그룹
그룹 및 권역
중앙그룹[전체]
대전그룹[전체]
보호관찰소
강릉 대구 서울

Type 2 - no margin

상/하 여백이 다름

집중관제
집중중앙그룹
집중대전그룹
그룹 및 권역
중앙그룹[전체]
대전그룹[전체]
보호관찰소
강릉 대구 서울

Type 3

타이머 시간설정
sec
선택

Type 4

집중관제
집중중앙그룹
집중대전그룹
그룹 및 권역
중앙그룹[전체]
대전그룹[전체]
보호관찰소
  • 보호관찰소
  • 강릉 대구 서울

White

Require mark

Default

(필수) (필수)

Require message

Default

유효성 메시지입니다.

Require check

Default

나이를 입력해주세요.

사용가능한 이름입니다.

나이를 입력해주세요.

maxlength & count

Default

0/50자

byte

0/1000byte

List

Dot

  • 내용
  • 내용
  • 내용

Dot - Primary color

  • 내용
  • 내용
  • 내용

Hyphen

  • 내용
  • 내용
  • 내용

Tooltip

Default

어린이보호구역이란?

초등학교, 특수학교, 유치원, 구립어린이집, 아동 복지시설을 의미합니다.

Scroller

Default

status

Default

답변 완료 미 답변

Info cell

Default

특이사항
없는 뼈 목숨이 쓸쓸한 인간은 그들은 오아이스도 이상을 황금시대의 황금시대다. 역사를 하였으며, 고행을 가지에 얼음에 얼음이 별과 피다. 찾아 놀이 그들의 대고, 피어나는 무엇을 살 보라. 품으며, 얼마나 주는 되는 끓는 되려니와, 힘차게 행복스럽고 뿐이다. 있으며, 그들은 피어나기 끓는 꽃이 위하여서 싸인 못하다 황금시대다. 동산에는 싸인 꽃이 있는가? 날카로우나 이상을 끝에 가치를 있는가? 천고에 그들에게 실현에 보내는 같은 방황하여도, 너의 쓸쓸하랴? 청춘의 봄날의 타오르고 천고에 영락과 이것이다. 고행을 꽃이 물방아 청춘 무엇이 피에 기쁘며, 가지에 황금시대다. 뜨거운지라, 그들은 이상을 천지는 고행을 그와 쓸쓸하랴?

일월과 공자는 살 밝은 밥을 얼마나 피는 방황하였으며, 얼마나 보라. 스며들어 이성은 봄날의 품에 봄바람이다. 아니한 돋고, 이상의 그들은 원질이 우리의 봄바람이다. 우리는 전인 인간의 피부가 부패뿐이다. 끝까지 열락의 무한한 그림자는 없는 주며, 이상 그들에게 미묘한 것이다. 피어나기 이것이야말로 광야에서 말이다. 봄바람을 속에 가는 시들어 보내는 끓는 철환하였는가? 그들에게 우는 오아이스도 천하를 그것은 뼈 말이다. 불어 남는 사랑의 붙잡아 실현에 사막이다.

뭇 새가 귀는 희망의 가는 피고 운다. 못할 만물은 긴지라 것이다. 소금이라 그러므로 길지 청춘의 천지는 얼음과 우리 황금시대다. 않는 전인 자신과 청춘 천지는 청춘의 끓는다. 사라지지 구하지 부패를 충분히 풀이 열락의 위하여서. 붙잡아 밥을 군영과 타오르고 피어나는 힘차게 듣는다. 방황하였으며, 든 뜨거운지라, 밥을 없는 청춘 웅대한 교향악이다. 앞이 곧 구하기 끓는 이것이야말로 길지 끓는 끓는다. 밥을 얼음과 만물은 눈에 미묘한 작고 봄바람이다.

.info-cell--height-숫자 : 필요한 높이값이 없으면 css에 클래스 추가하여 사용

특이사항
없는 뼈 목숨이 쓸쓸한 인간은 그들은 오아이스도 이상을 황금시대의 황금시대다. 역사를 하였으며, 고행을 가지에 얼음에 얼음이 별과 피다. 찾아 놀이 그들의 대고, 피어나는 무엇을 살 보라. 품으며, 얼마나 주는 되는 끓는 되려니와, 힘차게 행복스럽고 뿐이다. 있으며, 그들은 피어나기 끓는 꽃이 위하여서 싸인 못하다 황금시대다. 동산에는 싸인 꽃이 있는가? 날카로우나 이상을 끝에 가치를 있는가? 천고에 그들에게 실현에 보내는 같은 방황하여도, 너의 쓸쓸하랴? 청춘의 봄날의 타오르고 천고에 영락과 이것이다. 고행을 꽃이 물방아 청춘 무엇이 피에 기쁘며, 가지에 황금시대다. 뜨거운지라, 그들은 이상을 천지는 고행을 그와 쓸쓸하랴?

일월과 공자는 살 밝은 밥을 얼마나 피는 방황하였으며, 얼마나 보라. 스며들어 이성은 봄날의 품에 봄바람이다. 아니한 돋고, 이상의 그들은 원질이 우리의 봄바람이다. 우리는 전인 인간의 피부가 부패뿐이다. 끝까지 열락의 무한한 그림자는 없는 주며, 이상 그들에게 미묘한 것이다. 피어나기 이것이야말로 광야에서 말이다. 봄바람을 속에 가는 시들어 보내는 끓는 철환하였는가? 그들에게 우는 오아이스도 천하를 그것은 뼈 말이다. 불어 남는 사랑의 붙잡아 실현에 사막이다.

뭇 새가 귀는 희망의 가는 피고 운다. 못할 만물은 긴지라 것이다. 소금이라 그러므로 길지 청춘의 천지는 얼음과 우리 황금시대다. 않는 전인 자신과 청춘 천지는 청춘의 끓는다. 사라지지 구하지 부패를 충분히 풀이 열락의 위하여서. 붙잡아 밥을 군영과 타오르고 피어나는 힘차게 듣는다. 방황하였으며, 든 뜨거운지라, 밥을 없는 청춘 웅대한 교향악이다. 앞이 곧 구하기 끓는 이것이야말로 길지 끓는 끓는다. 밥을 얼음과 만물은 눈에 미묘한 작고 봄바람이다.

ETC

.display-block

<span class="display-block"></span>

.inline-block

<div class="inline-block"></div>

.medium-text

더미 텍스트

.basic-text

더미 텍스트

.regular-text

더미 텍스트

.basic-title

더미 텍스트

.font-weight

.font-weight-thin

.font-weight-light

.font-weight-regular

.font-weight-medium

.font-weight-bold

.basic-link

더미 텍스트

.none-deco-link

더미 텍스트

.link-block

더미 텍스트

.color

.color-primary

.color-gray

.color-red

.color-pastel-red

.color-blue

.color-charcoal

.color-deep-gray

.color-yellow

.bg-color

.bg-color-blue

.bg-color-light-blue

.bg-color-gray

.align

.align-left

.align-right

.align-center

.ellipsis

.ellipsis 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트 더미 텍스트