h2 title
버튼은 사용자가 이것을 터치할 때 액션이 발생할 것이라는 것을 분명히 알려줍니다. 버튼은 당신의 사이트 색 테마에 따라서 디자인된 텍스트나 이미지 또는 양쪽 다로 구성됩니다.
h2 titleButtons
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
| 분류 | class_01 | class_02 | disabled | outline-version | class_02(out-line) |
|---|---|---|---|---|---|
| xe-btn | |||||
| xe-btn | xe-btn-secondary | ||||
| xe-btn | xe-btn-primary | xe-btn-primary-outline | |||
| xe-btn | xe-btn-link | ||||
| xe-btn | xe-btn-success | xe-btn-success-outline | |||
| xe-btn | xe-btn-positive | xe-btn-positive-outline | |||
| xe-btn | xe-btn-warning | xe-btn-warning-outline | |||
| xe-btn | xe-btn-danger | xe-btn-danger-outline | |||
| xe-btn | xe-btn-fail | xe-btn-fail-outline | |||
| xe-btn | xe-btn-black | ||||
|
|
xe-btn-toggle | ||||
|
|
xe-btn-toggle | attr: disabled | |||
|
|
xe-btn-toggle | attr: checked disabled |
Dropdowns
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
Checkbox & Radio Inputs
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
Forms
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
Badge
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
default
xe-primary
xe-success
xe-positive
xe-warning
xe-danger
xe-fail
xe-black
medium
medium
medium
medium
medium
medium
medium
medium
large
large
large
large
large
large
large
large
Empty circular
outline
xe-primary-outline
xe-success-outline
xe-positive-outline
xe-warning-outline
xe-danger-outline
xe-fail-outline
xe-black-outline
Modal
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
Toast popup
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
[fail] Archived. Check out your profile.
[positive] Archived. Check out your profile.
[danger] Archived. Check out your profile.
[success] Archived. Check out your profile.
[warning] Connection timed out. Retry?
[basic alert] This item already has the lable “XE3”. You can add a new label.
Tooltip
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
Grid
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
| 매우 작은 기기 모바일폰 (<768px) | 작은 기기 태블릿 (≥768px) | 중간 기기 데스크탑 (≥992px) | 큰 기기 데스크탑 (≥1200px) | |
|---|---|---|---|---|
| 그리드 적용 | 항상 | 분기점보다 크면 적용 | ||
| 콘테이너 너비 | 없음 (auto) | 750px | 970px | 1170px |
| 클래스 접두사 | .xe-col-xs- |
.xe-col-sm- |
.xe-col-md- |
.xe-col-lg- |
| 컬럼 수 | 12 | |||
| 컬럼 너비 | Auto | ~62px | ~81px | ~97px |
| 사이 너비 | 30px (컬럼의 양쪽에 15px 씩) | |||
| 중첩 | 예 | |||
| 오프셋 | 예 | |||
| 컬럼 순서정하기 | 예 | |||
Responsive utilities
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
| 매우 작은 기기 모바일폰 (<768px) | 작은 기기 태블릿 (≥768px) | 중간 기기 데스크탑 (≥992px) | 큰 기기 데스크탑 (≥1200px) | |
|---|---|---|---|---|
.xe-visible-xs-* |
보임 | 숨겨짐 | 숨겨짐 | 숨겨짐 |
.xe-visible-sm-* |
숨겨짐 | 보임 | 숨겨짐 | 숨겨짐 |
.xe-visible-md-* |
숨겨짐 | 숨겨짐 | 보임 | 숨겨짐 |
.xe-visible-lg-* |
숨겨짐 | 숨겨짐 | 숨겨짐 | 보임 |
.xe-hidden-xs |
숨겨짐 | 보임 | 보임 | 보임 |
.xe-hidden-sm |
보임 | 숨겨짐 | 보임 | 보임 |
.xe-hidden-md |
보임 | 보임 | 숨겨짐 | 보임 |
.xe-hidden-lg |
보임 | 보임 | 보임 | 숨겨짐 |
Flag
클래스를 이용해 버튼 스타일을 간편하게 적용하세요. 중요도에 따라 달리 적용할 수 있습니다.
| Flag | Name | ISO 3166-2 Code ? | Additional Aliases |
|---|---|---|---|
| Andorra | ad | ||
| U.A.E | ae | United Arab Emirates | |
| Afghanistan | af | ||
| Antigua | ag | ||
| Anguilla | ai | ||
| Albania | al | ||
| Armenia | am | ||
| Netherlands Antilles | an | ||
| Angola | ao | ||
| Argentina | ar | ||
| American Samoa | as | ||
| Austria | at | ||
| Australia | au | ||
| Aruba | aw | ||
| Aland Islands | ax | ||
| Azerbaijan | az | ||
| Bosnia | ba | ||
| Barbados | bb | ||
| Bangladesh | bd | ||
| Belgium | be | ||
| Burkina Faso | bf | ||
| Bulgaria | bg | ||
| Bahrain | bh | ||
| Burundi | bi | ||
| Benin | bj | ||
| Bermuda | bm | ||
| Brunei | bn | ||
| Bolivia | bo | ||
| Brazil | br | ||
| Bahamas | bs | ||
| Bhutan | bt | ||
| Bouvet Island | bv | ||
| Botswana | bw | ||
| Belarus | by | ||
| Belize | bz | ||
| Canada | ca | ||
| Cocos Islands | cc | ||
| Congo | cd | ||
| Central African Republic | cf | ||
| Congo Brazzaville | cg | ||
| Switzerland | ch | ||
| Cote Divoire | ci | ||
| Cook Islands | ck | ||
| Chile | cl | ||
| Cameroon | cm | ||
| China | cn | ||
| Colombia | co | ||
| Costa Rica | cr | ||
| Serbia | cs | ||
| Cuba | cu | ||
| Cape Verde | cv | ||
| Christmas Island | cx | ||
| Cyprus | cy | ||
| Czech Republic | cz | ||
| Germany | de | ||
| Djibouti | dj | ||
| Denmark | dk | ||
| Dominica | dm | ||
| Dominican Republic | do | ||
| Algeria | dz | ||
| Ecuador | ec | ||
| Estonia | ee | ||
| Egypt | eg | ||
| Western Sahara | eh | ||
| Eritrea | er | ||
| Spain | es | ||
| Ethiopia | et | ||
| European Union | eu | ||
| Finland | fi | ||
| Fiji | fj | ||
| Falkland Islands | fk | ||
| Micronesia | fm | ||
| Faroe Islands | fo | ||
| France | fr | ||
| Gabon | ga | ||
| United Kingdom | gb | ||
| Grenada | gd | ||
| Georgia | ge | ||
| French Guiana | gf | ||
| Ghana | gh | ||
| Gibraltar | gi | ||
| Greenland | gl | ||
| Gambia | gm | ||
| Guinea | gn | ||
| Guadeloupe | gp | ||
| Equatorial Guinea | gq | ||
| Greece | gr | ||
| Sandwich Islands | gs | ||
| Guatemala | gt | ||
| Guam | gu | ||
| Guinea-bissau | gw | ||
| Guyana | gy | ||
| Hong Kong | hk | ||
| Heard Island | hm | ||
| Honduras | hn | ||
| Croatia | hr | ||
| Haiti | ht | ||
| Hungary | hu | ||
| Indonesia | id | ||
| Ireland | ie | ||
| Israel | il | ||
| India | in | ||
| Indian Ocean Territory | io | ||
| Iraq | iq | ||
| Iran | ir | ||
| Iceland | is | ||
| Italy | it | ||
| Jamaica | jm | ||
| Jordan | jo | ||
| Japan | jp | ||
| Kenya | ke | ||
| Kyrgyzstan | kg | ||
| Cambodia | kh | ||
| Kiribati | ki | ||
| Comoros | km | ||
| Saint Kitts And Nevis | kn | ||
| North Korea | kp | ||
| South Korea | kr | ||
| Kuwait | kw | ||
| Cayman Islands | ky | ||
| Kazakhstan | kz | ||
| Laos | la | ||
| Lebanon | lb | ||
| Saint Lucia | lc | ||
| Liechtenstein | li | ||
| Sri Lanka | lk | ||
| Liberia | lr | ||
| Lesotho | ls | ||
| Lithuania | lt | ||
| Luxembourg | lu | ||
| Latvia | lv | ||
| Libya | ly | ||
| Morocco | ma | ||
| Monaco | mc | ||
| Moldova | md | ||
| Montenegro | me | ||
| Madagascar | mg | ||
| Marshall Islands | mh | ||
| Macedonia | mk | ||
| Mali | ml | ||
| Burma | mm | Myanmar | |
| Mongolia | mn | ||
| Macau | mo | ||
| Northern Mariana Islands | mp | ||
| Martinique | mq | ||
| Mauritania | mr | ||
| Montserrat | ms | ||
| Malta | mt | ||
| Mauritius | mu | ||
| Maldives | mv | ||
| Malawi | mw | ||
| Mexico | mx | ||
| Malaysia | my | ||
| Mozambique | mz | ||
| Namibia | na | ||
| New Caledonia | nc | ||
| Niger | ne | ||
| Norfolk Island | nf | ||
| Nigeria | ng | ||
| Nicaragua | ni | ||
| Netherlands | nl | ||
| Norway | no | ||
| Nepal | np | ||
| Nauru | nr | ||
| Niue | nu | ||
| New Zealand | nz | ||
| Oman | om | ||
| Panama | pa | ||
| Peru | pe | ||
| French Polynesia | pf | ||
| New Guinea | pg | ||
| Philippines | ph | ||
| Pakistan | pk | ||
| Poland | pl | ||
| Saint Pierre | pm | ||
| Pitcairn Islands | pn | ||
| Puerto Rico | pr | ||
| Palestine | ps | ||
| Portugal | pt | ||
| Palau | pw | ||
| Paraguay | py | ||
| Qatar | qa | ||
| Reunion | re | ||
| Romania | ro | ||
| Serbia | rs | ||
| Russia | ru | ||
| Rwanda | rw | ||
| Saudi Arabia | sa | ||
| Solomon Islands | sb | ||
| Seychelles | sc | ||
| Sudan | sd | ||
| Sweden | se | ||
| Singapore | sg | ||
| Saint Helena | sh | ||
| Slovenia | si | ||
| Jan Mayen | sj | Svalbard | |
| Slovakia | sk | ||
| Sierra Leone | sl | ||
| San Marino | sm | ||
| Senegal | sn | ||
| Somalia | so | ||
| Suriname | sr | ||
| Sao Tome | st | ||
| El Salvador | sv | ||
| Syria | sy | ||
| Swaziland | sz | ||
| Caicos Islands | tc | ||
| Chad | td | ||
| French Territories | tf | ||
| Togo | tg | ||
| Thailand | th | ||
| Tajikistan | tj | ||
| Tokelau | tk | ||
| Timorleste | tl | ||
| Turkmenistan | tm | ||
| Tunisia | tn | ||
| Tonga | to | ||
| Turkey | tr | ||
| Trinidad | tt | ||
| Tuvalu | tv | ||
| Taiwan | tw | ||
| Tanzania | tz | ||
| Ukraine | ua | ||
| Uganda | ug | ||
| Us Minor Islands | um | ||
| United States | us | America | |
| Uruguay | uy | ||
| Uzbekistan | uz | ||
| Vatican City | va | ||
| Saint Vincent | vc | ||
| Venezuela | ve | ||
| British Virgin Islands | vg | ||
| Us Virgin Islands | vi | ||
| Vietnam | vn | ||
| Vanuatu | vu | ||
| Wallis And Futuna | wf | ||
| Samoa | ws | ||
| Yemen | ye | ||
| Mayotte | yt | ||
| South Africa | za | ||
| Zambia | zm | ||
| Zimbabwe | zw |
loading
html/css 를 이용한 로딩 아이콘입니다.
(ie9 를 대응하기 위하여 css 핵이 사용하였습니다.)
z-index 가 101로 적용하였으며 dim 와 같이 사용할수 있습니다.
화면 중앙에 사용시 xe-loading 에 xe-fixed 클래스를 추가 부탁드립니다.
type
불러오는중
type2
불러오는중