본문바로가기

Theme

Helpers

Alopex에서는 화면 개발 시 빈번이 사용되는 CSS를 클래스로 작성하여 제공하고 있습니다.

Position
  • .Pos-abs {position: absolute;}
  • .Pos-rel {position: relative;}
  • .Pos-fix {position: fix;}
Box Model
  • .Float-left {float: left;}
  • .Float-right {float: right;}
  • .Overflow-hid {overflow: hidden;}
  • .Overflow-x {overflow-x: auto;}
  • .Overflow-y {overflow-y: auto;}
  • .Display-none {display: none;}
  • .Display-inblock {display: inline-block}
  • .Display-inline {display: inline}
  • .Display-block {display: block}
  • .Valign-top {vertical-align: top}
  • .Valign-md {vertical-align: middle}
  • .Valign-bot {vertical-align: bottom}
Font Style
  • .Text-underline {text-decoration: underline}
  • .Text-through {text-decoration: line-through}
  • .Text-none {text-decoration: none}
  • .Text-left {text-align: left}
  • .Text-right {text-align: right}
  • .Text-center {text-align: center}
  • .Font-normal {font-weight: normal}
  • .Font-bold {font-weight: bold}
  • .Font-italic {font-style: italic}
  • .Font-big {font-size: 20px}
  • .Font-small {font-size: 11px}
Width

5%~100%까지 5단위로 정의 되어있습니다.

  • .Width-5 {width: 5%} ~ .Width-100 {width: 100%}
Margin/Padding

left/right/top/bottom으로 분류되며 5px~100px까지 5단위로 정의되어 있습니다.

  • .Padding-left-5 {padding-left: 5px} ~ .Padding-left-100 {padding-left: 100px}
  • .Margin-left-5 {margin-left: 5px} ~ .Padding-left-100 {margin-left: 100px}
Symbolic Class

Alopex에서는 일반적이고 공통적인 UX(User Experience)를 표현할 수 있는 클래스를 제공합니다.

  • Default (일반)
  • Confirm (확인)
  • Success (성공, 완료)
  • Warning (경고)
  • Danger (위험, 삭제)

위와 같은 Symbolic Class를 적용할 수 있는 Component는 다음과 같습니다.

Button

Basic Groupbutton

Textinput

TextArea


Select

Panel

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

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..
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

Default Primary Success Warning Danger Confirm