Dropdown
Dropdown
드롭다운(Dropdown)은 메뉴에서 항목을 선택하는 컴포넌트예요. 단순 메뉴부터 폼의 셀렉트 박스, 다중 선택, 검색, 원격 데이터까지 폭넓게 활용할 수 있어요.
출처: 문서
본문
Types
Dropdown
드롭다운이에요.
File
New
ctrl + o
Open...
ctrl + s
Save as...
ctrl + r
Rename
Make a copy
Move to folder
Move to trash
Download As...
Publish To Web
Google Docs
Google Drive
Dropbox
Adobe Creative Cloud
Private FTP
Another Service...
E-mail Collaborators
Selection
드롭다운은 폼에서 여러 선택지 사이에서 고르는 데 쓰일 수 있어요.
iOS devices or firefox mobile do not show a scrollbar by default!
Pet
Cat
Dog
Bird
Rabbit
Squirrel
Horse
Turtle
Parrot
Pet
Cat
Dog
Bird
Rabbit
Squirrel
Horse
Turtle
Parrot
Select Friend
Jenny Hess
Elliot Fu
Stevie Feliciano
Christian
Matt
Justen Kitsune
Search Selection
선택(selection) 드롭다운은 큰 선택지 목록을 사용자가 검색할 수 있게 해줘요.
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Unfilterable items in Search Selection
검색 필터가 일치하지 않아도 항상 표시되도록 하고 싶은 항목은 해당 항목에 unfilterable 클래스를 추가해서 항상 나열되게 정의할 수 있어요.
States
Alabama (unfilterable)
Alaska
Arizona (unfilterable)
Arkansas (unfilterable)
California
Ohio
Oklahoma
Search ignoring Diacritics
선택 드롭다운은 검색할 때 모든 분음 부호(Diacritics)를 무시하도록 할 수 있어요.
Search diacritics by only typing usual vowels
André
Bokmål
café
cafetería
château
décolleté
Élysée
Fräulein
garçon
háček
inrō
jūjutsu
kroužek
La Niña
Māori
négligée
pączki
Québec
ragoût
Škoda
takahē
über
voilà
whekī
c Zoë
$('#diacriticsexample')
.dropdown({
ignoreDiacritics: true,
sortSelect: true,
fullTextSearch:'exact'
});
Highlight search matches
검색 결과 안에서 일치하는 문자열을 자동으로 강조할 수 있어요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
$('#highlightexample')
.dropdown({
highlightMatches: true
});
Clearable Selection
clearable 선택 드롭다운은 사용자가 이전 선택을 취소할 수 있게 해줘요.
Select Language
Arabic
Chinese
Danish
Dutch
English
French
German
Greek
Hungarian
Italian
Japanese
Korean
Lithuanian
Persian
Polish
Portuguese
Russian
Spanish
Swedish
Turkish
Vietnamese
Select Languages
Arabic
Chinese
Danish
Dutch
English
French
German
Greek
Hungarian
Italian
Japanese
Korean
Lithuanian
Persian
Polish
Portuguese
Russian
Spanish
Swedish
Turkish
Vietnamese
Multiple Selection
선택 드롭다운은 여러 항목을 선택할 수 있게 해줘요.
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
Multiple Search Selection
선택 드롭다운은 여러 항목을 검색으로 선택할 수 있게 해줘요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
다중 검색 선택 드롭다운은 항목을 선택한 뒤에도 검색 값을 유지해서 메뉴가 필터된 상태로 남게 할 수 있어요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
$('.ui.search.selection.dropdown')
.dropdown({
keepSearchTerm: true
})
;
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
Search Dropdown
드롭다운은 검색 가능한 형태일 수 있어요.
Select Language
Arabic
Chinese
Danish
Dutch
English
French
German
Greek
Hungarian
Italian
Japanese
Korean
Lithuanian
Persian
Polish
Portuguese
Russian
Spanish
Swedish
Turkish
Vietnamese
Search In-Menu
드롭다운은 메뉴 안에 검색 프롬프트를 포함할 수 있어요.
Filter Posts
Tag Label
Important
Announcement
Cannot Fix
News
Enhancement
Change Declined
Off Topic
Interesting
Discussion
Filter Posts
Tag Label
Important
Announcement
Cannot Fix
News
Enhancement
Off Topic
Interesting
Discussion
Inline
드롭다운은 다른 콘텐츠 안에 인라인으로 나타나도록 서식화할 수 있어요.
Show me posts by
Jenny Hess
Jenny Hess
Elliot Fu
Stevie Feliciano
Christian
Matt
Justen Kitsune
Trending repos
(예시 라벨) today
(예시 라벨) Adjust time span / Today / This Week / This Month
Pointing
드롭다운은 메뉴가 가리키는(pointing) 형태로 서식화할 수 있어요.
Home
Shopping
Categories
Clothing
Mens
Shirts
Pants
Jeans
Shoes
Womens
Dresses
Shoes
Bags
Home Goods
Bedroom
Order
Status
Cancellations
Forums
Contact Us
Home
Messages
Inbox
Starred
Sent Mail
Drafts (143)
Spam (1009)
Trash
Browse
Help
Display Density
Comfortable
Cozy
Compact
Settings
Upload Settings
Convert Uploaded Files to PDF
Digitize Text from Uploaded Files
Manage Apps
Keyboard Shortcuts
Help
New
Document
Image
Save As...
Edit
New
Document
Image
Save As...
Edit
Filter Posts
Filter by tag
Important
Announcement
Discussion
Filter by date
This Week
This Month
This Year
Filter by tag
Important
Announcement
Discussion
Tag Label
Important
Announcement
Discussion
Floating
드롭다운 메뉴는 요소 아래에 떠 있는(floating) 것처럼 보일 수 있어요.
Save
Edit Post
Remove Post
Hide Post
Simple
단순(simple) 드롭다운은 Javascript 없이 열릴 수 있어요.
Dropdown
Choice 1
Choice 2
Choice 3
Content
Header
드롭다운 메뉴는 헤더를 포함할 수 있어요.
Filter
Filter by tag
Important
Announcement
Discussion
Divider
드롭다운 메뉴는 관련 콘텐츠를 구분하는 디바이더를 포함할 수 있어요.
Filter
Filter by tag
Important
Announcement
Discussion
Icon
드롭다운 메뉴는 아이콘을 포함할 수 있어요.
Filter
Filter by tag
Important
Announcement
Discussion
Description
드롭다운 메뉴는 설명(description)을 포함할 수 있어요.
Filter Tags
Filter by tag
2 new
Important
10 new
Hopper
5 new
Discussion
설명은 vertical item을 사용해 항목 아래에 세로로 표시될 수 있어요.
Filter Tags
Filter by tag
2 new
Important
10 new
Hopper
5 new
Discussion
Label
드롭다운 메뉴는 라벨을 포함할 수 있어요.
Filter
Search Issues
Filter by tag
Important
Announcement
Discussion
Message
드롭다운 메뉴는 메시지를 포함할 수 있어요.
Login
Error
Floated Content
드롭다운 메뉴는 플로팅된 콘텐츠를 포함할 수 있어요.
Select Type
Important
Announcement
Discussion
Input
드롭다운 메뉴는 입력(input)을 포함할 수 있어요.
Filter
Search Issues
Filter by tag
Important
Announcement
Discussion
Image
드롭다운 메뉴는 이미지를 포함할 수 있어요.
Add User
People You Might Know
Jenny Hess
Elliot Fu
Stevie Feliciano
Your Friends' Friends
Christian
Matt
Justen Kitsune
Actionable
드롭다운 메뉴는 클릭 시 자체가 선택되는 대신 커스텀 콜백을 수행하는 액션 가능한(actionable) 항목을 포함할 수 있어요.
Open me and select actionable items
SECRET: Select me
TRUTH: Select me
LIE: Select me
I am a selectable entry only
$('.actionable.example .ui.dropdown')
.dropdown({
collapseOnActionable: false,
onActionable: function(value, text, $selected) {
var type=text.split(":")[0];
$.toast({
title: type + ' Reveal',
message:'You need to know: '+ value
});
}
});
States
Loading
드롭다운은 현재 데이터를 로딩 중임을 보여줄 수 있어요.
Dropdown
Choice 1
Choice 2
Choice 3
Search...
Choice 1
Choice 2
Choice 3
Dropdown
Choice 1
Choice 2
Choice 3
Error
오류 상태의 드롭다운은 사용자에게 문제를 알릴 수 있어요.
Dropdown
Choice 1
Choice 2
Choice 3
Dropdown
Choice 1
Choice 2
Choice 3
Active
활성(active) 드롭다운은 메뉴가 열려 있어요.
Dropdown
Choice 1
Choice 2
Disabled
비활성화된 드롭다운 메뉴나 항목은 사용자 상호작용을 허용하지 않아요.
Dropdown
Choice 1
Choice 2
Choice 3
Disabled Item
Choice 1
Disabled
Choice 3
Read-Only
드롭다운은 읽기 전용(read-only)이 될 수 있고 사용자 상호작용을 허용하지 않아요.
Dropdown
Choice 1
Choice 2
Choice 3
Variations
Size
드롭다운은 다양한 크기를 가질 수 있어요.
Mini
Male
Female
Tiny
Male
Female
Small
Male
Female
Medium
Male
Female
Large
Male
Female
Big
Male
Female
Huge
Male
Female
Massive
Male
Female
Scrolling
드롭다운은 메뉴가 스크롤되게 할 수 있어요.
You can also use resizable scrolling and a native resize drag handler will appear to the bottom right of the menu. This needs a modern browser, so does not work in IE11 or legacy Edge.
Select choice
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Choice 10
Choice 11
Choice 12
Choice 13
Choice 14
Choice 15
Filter Posts
Tag Label
Important
Announcement
Cannot Fix
News
Enhancement
Change Declined
Off Topic
Interesting
Discussion
Inverted
드롭다운은 inverted 될 수 있어요.
Select choice
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
inverted가 아닌 드롭다운의 메뉴는 inverted 될 수 있어요.
Select choice
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5
Choice 6
Choice 7
Choice 8
Choice 9
Compact
컴팩트(compact) 드롭다운은 최소 너비가 없어요.
Compact
A
B
C
Compact
A very long line here
B
C
Compact
A very long multiline here
B
C
Fluid
드롭다운은 부모의 전체 너비를 차지할 수 있어요.
Link 1
Link 2
All Sections
More
Choice 1
Choice 2
Choice 3
Height
선택 드롭다운은 더 많은 항목을 한눈에 볼 수 있도록 길게(기본 높이의 2배) 만들 수 있어요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
아주 길게: 기본 높이의 3배예요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
무제한. 스크롤바도 높이 제한도 없어요. 특히 Pointing과 함께 쓸 때 화살표가 계속 표시되도록 유지하려면 필요해요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
선택 드롭다운 안에 서브메뉴를 원할 때도 무제한(Unlimited)을 사용해야 해요.
Select an option
Category 1
Category 2
Item 2A
Item 2B
Item 2C
Category 3
Item 3A
Item 3B
Item 3C
Menu Direction
드롭다운 메뉴나 서브메뉴는 열리는 방향을 지정할 수 있어요.
Menu
Left
1
2
3
Right
1
2
3
Menu
Left
Still Left
1
2
3
2
3
Left 2
1
2
3
Columnar Menu
선택 드롭다운은 더 많은 항목을 한눈에 볼 수 있도록 메뉴가 균등하게 나뉘게 할 수 있어요.
one
two
three
four
five
six
seven
eight
nine
ten
zero
세 개의 열이에요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
네 개의 열이에요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
다섯 개의 열이에요.
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Selection Dropdowns
Clearable
clearable 설정을 사용하면 사용자가 드롭다운에서 선택을 제거할 수 있어요.
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
Show me
css
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
classes currently available.
$('.clearable.example .ui.selection.dropdown')
.dropdown({
clearable: true
})
;
$('.clearable.example .ui.inline.dropdown')
.dropdown({
clearable: true,
placeholder: 'any'
})
;
Maximum Selections
maxSelections를 사용하면 최대 선택 수를 강제할 수 있어요. 또한 폼 안의 다중 선택에 최소/최대 검증 설정을 지정하려면 폼 검증 규칙을 사용할 수도 있어요.
Selection
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
Search Selection
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
Without Labels
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
$('.max.example .ui.normal.dropdown')
.dropdown({
maxSelections: 3
})
;
$('.max.example .ui.special.dropdown')
.dropdown({
useLabels: false,
maxSelections: 3
})
;
Tagging and User Additions
allowAdditions: true를 사용하면 사용자가 자신만의 옵션을 추가할 수 있게 돼요. 이는 단일 또는 다중 검색 선택 드롭다운 모두에서 동작해요.
Single
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
Multiple
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
$('.tag.example .ui.dropdown')
.dropdown({
allowAdditions: true
})
;
Stuck User Additions
allowAdditions: true를 hideAdditions: false와 함께 사용하면, 컨테이너 크기와 보이는 최상단 항목과 메뉴 최상단 항목 사이의 거리에 따라 "add:"로 시작하는 사용자 추가 첫 번째 줄이 제대로 표시되지 않을 수 있어요.
추가 stuck 클래스를 제공하면 이 추가 줄을 메뉴 상단에 고정할 수 있어요.
Single
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
Multiple
Skills
Angular
CSS
Graphic Design
Ember
HTML
Information Architecture
Javascript
Mechanical Engineering
Meteor
NodeJS
Plumbing
Python
Rails
React
Kitchen Repair
Ruby
UI Design
User Experience
$('.stuck.example .ui.dropdown')
.dropdown({
allowAdditions: true,
hideAdditions: false,
className: {
addition: 'stuck addition'
}
})
;
Text Labels
때로 다중 선택에 긴 옵션이 포함되어 라벨로 표시하면 어색할 수 있어요. useLabels: false로 설정하면 선택된 개수를 표시하고 메뉴에서 직접 재선택을 허용할 수 있어요.
Select Tag
10001010
10001011
11001110
10011110
or
Select Country
Afghanistan
Aland Islands
Albania
Algeria
American Samoa
Andorra
Angola
Anguilla
Antigua
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia
Botswana
Bouvet Island
Brazil
British Virgin Islands
Brunei
Bulgaria
Burkina Faso
Burma
Burundi
Caicos Islands
Cambodia
Cameroon
Canada
Cape Verde
Cayman Islands
Central African Republic
Chad
Chile
China
Christmas Island
Cocos Islands
Colombia
Comoros
Congo Brazzaville
Congo
Cook Islands
Costa Rica
Cote Divoire
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt
El Salvador
England
Equatorial Guinea
Eritrea
Estonia
Ethiopia
European Union
Falkland Islands
Faroe Islands
Fiji
Finland
France
French Guiana
French Polynesia
French Territories
Gabon
Gambia
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guadeloupe
Guam
Guatemala
Guinea-Bissau
Guinea
Guyana
Haiti
Heard Island
Honduras
Hong Kong
Hungary
Iceland
India
Indian Ocean Territory
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macau
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Martinique
Mauritania
Mauritius
Mayotte
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Montserrat
Morocco
Mozambique
Namibia
Nauru
Nepal
Netherlands Antilles
Netherlands
New Caledonia
New Guinea
New Zealand
Nicaragua
Niger
Nigeria
Niue
Norfolk Island
North Korea
Northern Mariana Islands
Norway
Oman
Pakistan
Palau
Palestine
Panama
Paraguay
Peru
Philippines
Pitcairn Islands
Poland
Portugal
Puerto Rico
Qatar
Reunion
Romania
Russia
Rwanda
Saint Helena
Saint Kitts and Nevis
Saint Lucia
Saint Pierre
Saint Vincent
Samoa
San Marino
Sandwich Islands
Sao Tome
Saudi Arabia
Senegal
Serbia
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Korea
Spain
Sri Lanka
Sudan
Suriname
Svalbard
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Timorleste
Togo
Tokelau
Tonga
Trinidad
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United States
Uruguay
Us Minor Islands
Us Virgin Islands
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Wallis and Futuna
Western Sahara
Yemen
Zambia
Zimbabwe
$('.label.example .ui.dropdown')
.dropdown({
useLabels: false
})
;
Clearing Dropdown
폼 필드를 플레이스홀더 값으로 재설정할 수 있어요.
Default
Value
Another Value
Select a value
Value
Another Value
Clear
$('.clear.example .button')
.on('click', function() {
$('.clear.example .ui.dropdown')
.dropdown('clear')
;
})
;
Restoring Defaults
restore defaults 행동을 사용해 페이지 로드 시 설정된 값으로 드롭다운을 복원할 수 있어요. 로드 시 기본 텍스트가 없으면, restore defaults가 플레이스홀더 텍스트를 복원해요.
Default
Value
Another Value
Default Value
Second Default
Select a value
Value
Another Value
Default Value
Value
Another Value
Default Value
Restore All Dropdowns
$('.restore.example .button')
.on('click', function() {
$('.restore.example .ui.dropdown')
.dropdown('restore defaults')
;
})
;
Upward
드롭다운 메뉴는 화면에 맞지 않으면 열리는 방향을 자동으로 바꿔요. 특정 방향으로 열려야 한다면 드롭다운을 초기화할 때 지정할 수 있어요.
$('.upward.example .dropdown')
.dropdown({
direction: 'upward'
})
;
New
Document
Image
Save As...
Edit
Remote Content
외부 원격 API 서비스를 다룰 때는 주의하세요.
가능한 XSS 취약점에 대해 보안 섹션을 읽어 보세요.
Match Search Query on Server
검색 선택 드롭다운은 값을 원격으로 가져오기 위한 API 설정을 지정할 수 있어요. 이는 명명된 API 액션 또는 url을 사용할 수 있어요.
Github Repositories
Select one...
Github Repositories
Select...
$('.remote.filter.example .ui.dropdown')
.dropdown({
apiSettings: {
// this url parses query server side and returns filtered results
url: 'https://api.github.com/search/repositories?q={query}'
},
fields: {
// the remote api has a different structure than expected, which we can adjust
remoteValues : 'items'
},
})
;
// Expected server response
{
"success": true,
"results": [
{
// name displayed in dropdown
"name" : "Choice 1",
// selected value
"value" : "value1",
// name displayed after selection (optional)
"text" : "Choice 1",
// Details displayed to the right of the text (optional)
"description" : "Details",
// whether the detail description should be displayed underneath the text instead (optional)
"descriptionVertical" : true,
// whether field should be displayed as disabled (optional)
"disabled" : false,
// path to image to be displayed to the left (optional)
"image" : false,
// text for the alt attribute if an image is also provided above (optional)
"alt" : '',
// whether the image should be displayed in a different style (optional)
"imageClass" : "ui avatar image",
// icon name to be displayed to the left (optional)
"icon" : "pink female",
// whether the icon should be displayed in a different style
// (usually 'flag' if a given value for "icon" is a flag) (optional)
"iconClass" : "flag"
},
{
"name" : "Choice 2",
"value" : "value2",
"text" : "Choice 2"
},
{
"name" : "Choice 3",
"value" : "value3",
"text" : "Choice 3"
},
{
"name" : "Choice 4",
"value" : "value4",
"text" : "Choice 4"
},
{
"name" : "Choice 5",
"value" : "value5",
"text" : "Choice 5"
}
]
}
Return All Choices Remotely
가능한 선택지 집합이 클 때는 이상적으로 API 결과가 전달된 검색어와 일치하는 값만 반환해 네트워크 전송을 줄여야 해요. 하지만 선택지가 수백 개 이하라면, API 엔드포인트에서 전체 결과 집합을 반환하고 filterRemoteData: true 설정으로 클라이언트에서 필터링할 수도 있어요.
Favorite Animal
Select one...
Favorite Animal
Select one...
Favorite Animals
Select...
$('.remote.choices.example .ui.dropdown')
.dropdown({
apiSettings: {
// this url just returns a list of tags (with API response expected above)
url: '/animals.json'
},
filterRemoteData: true
})
;
Menus
Changing Transitions
드롭다운은 다른 트랜지션을 지정할 수 있어요.
$('.dropdown')
.dropdown({
// you can use any ui transition
transition: 'drop'
})
;
Toggle
Drop
Horizontal Flip
Fade Up
Scale
Multiple Levels
드롭다운 메뉴는 안에 서브메뉴도 포함할 수 있어요.
My favorite animal breed is
Shiba Inu
Dogs
Shiba Inu
Poodle
Toy
Standard
Labrador
Cats
Aegean
Balinese
Persian
Category Selection
allowCategorySelection: true와 함께 다단계 메뉴를 사용하면 서브메뉴를 가진 항목을 선택할 수 있게 돼요.
$('.category.example .ui.dropdown')
.dropdown({
allowCategorySelection: true
})
;
Choose Category
Category 1
Category 2
Item 2A
Item 2B
Item 2C
Category 3
Item 3A
Item 3B
Item 3C
Preserving User Selections
이 예제는 미리 설정된 텍스트 값을 사용해 페이지 탐색 시 메뉴 항목을 보존해요.
Current action:
Hide
Edit
Remove
Hide
Dropdown Dividers / Headers
드롭다운 메뉴는 관련 콘텐츠를 구분하는 디바이더 및/또는 헤더를 포함할 수 있어요. hideDividers를 사용하면 항목을 필터링할 때 이 요소들을 어떻게 처리할지 제어할 수 있어요.
$('.divider.example .dropdown')
.dropdown({
hideDividers: option
})
;
false
Filter Posts
Filter by tag
Important
Announcement
Discussion
Filter by date
This Week
This Month
This Year
true
Filter Posts
Filter by tag
Important
Announcement
Discussion
Filter by date
This Week
This Month
This Year
'empty'
Filter Posts
Filter by tag
Important
Announcement
Discussion
Filter by date
This Week
This Month
This Year
Adjusting Actions
Combo Dropdowns
버튼은 드롭다운으로 서식화할 수 있어요.
$('.combo.dropdown')
.dropdown({
action: 'combo'
})
;
Save
Edit
Delete
Hide
Link Dropdowns
드롭다운은 항목이 선택될 때 발생할 수 있는 여러 기본 액션을 지원해요. 예를 들어 드롭다운이 텍스트를 바꾸지 않게 하거나, 메뉴에서 값을 선택하게 설정할 수 있어요.
$('.link.example .dropdown')
.dropdown({
action: 'hide'
})
;
Go to
Home
Browse
Search
Coupling
Button Group
버튼 그룹은 추가 콘텐츠를 드롭다운으로 표시하도록 서식화할 수 있어요.
Edit User
Remove User
Make Invisible
Edit Group
Remove Group
Hide from Group
Edit
Remove
Hide
Menu
메뉴 요소는 드롭다운을 포함할 수 있어요.
Home
Messages
Categories
Unread
Promotions
Updates
Archive
Browse
Form
드롭다운은 폼 안에서 선택할 수 있도록 서식화할 수 있어요.
First Name
Last Name
Gender
Select Gender
Male
Female
Initializing
Initializing Existing HTML
기존 HTML로 드롭다운을 초기화하는 것은 select 요소에서 직접 초기화하는 것보다 성능이 더 좋아요.
Gender
Male
Female
$('.ui.dropdown')
.dropdown()
;
Initializing with Javascript Only
settings 객체에 값 목록을 지정하면 html을 직접 만들 필요가 없어요.
$('.ui.dropdown')
.dropdown({
values: [
{
name: 'Male',
value: 'male'
},
{
name : 'Female',
value : 'female',
selected : true
}
]
})
;
$('.ui.dropdown')
.dropdown({
values: [
{
name : 'Filter by tag',
type : 'header'
// Will be displayed as header
},
{
name : 'Important',
value : 'important',
type : 'item'
// Will be displayed as item
},
{
name : 'Announcement',
value : 'announcement'
// Will be displayed as item
}
]
})
;
$('.ui.dropdown').dropdown({
values: [
{
name: 'Human',
value: 'human',
type: 'menu',
values: [
{
name: 'Baby',
value: 'baby'
},
{
name: 'Kid',
value: 'kid'
},
{
name: 'Teen',
value: 'teen'
},
{
name: 'Adult',
value: 'adult',
type: 'left menu',
values: [
{
name: 'young',
value: 'young'
},
{
name: 'middle age',
value: 'middle-age'
},
{
name: 'Old',
value: 'old'
}
]
}
]
}
]
})
;
Display images and/or icons by value setting
항목 앞의 이미지 및/또는 아이콘은 이미지 경로, 아이콘 이름, 또는 다양한 스타일링용 클래스 이름을 제공해 동적으로 생성할 수 있어요.
$('#imagesandicons').dropdown({
placeholder: 'Show images and icons',
values:[{
"name": "Avatar",
"value": "jenny",
"image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg",
"alt": "A picture of jenny",
"imageClass": "ui avatar image"
},
{
"name": "Image",
"value": "elliot",
"image": "https://fomantic-ui.com/images/avatar/small/elliot.jpg"
},
{
"name": "Flag",
"value": "uk",
"icon": "uk",
"iconClass": "flag"
},
{
"name": "Icon",
"value": "female",
"icon": "female"
},
{
"name": "Colored Icon",
"value": "coloredfemale",
"icon": "pink female"
},
{
"name": "Image and Icon",
"value": "completefemale",
"image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg",
"icon": "pink female"
}]
})
;
모든 항목 항목에 classNames를 추가하지 않으려면 (예: 아바타나 플래그 목록을 표시하려는 경우), 드롭다운 초기화 시 className.image 또는 className.icon의 기본 설정을 재정의할 수 있어요.
$('#allavatars').dropdown({
className: {
image: 'ui avatar image'
},
placeholder: 'Show users and their avatars',
values:[{
"name": "Jenny",
"value": "jenny",
"image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg",
},
{
"name": "Elliot",
"value": "elliot",
"image": "https://fomantic-ui.com/images/avatar/small/elliot.jpg"
}]
})
;
Display a (vertical) description by value setting
추가 항목 설명(선택적으로 세로 표시)은 두 개의 추가 속성을 제공해 동적으로 생성할 수 있어요.
$('#verticaldescription').dropdown({
placeholder: 'Show (vertical) descriptions',
values:[{
"name": "Inline Baby",
"value": "jenny",
"description": "Born 2018"
},
{
"name": "Vertical Baby",
"value": "elliot",
"description": "Born 2020",
"descriptionVertical": true
}]
})
;
Use custom data attributes for items
데이터 키 객체를 제공하면 각 드롭다운 항목에 커스텀 데이터 속성을 추가할 수 있어요. data 객체 안의 모든 키는 데이터 속성으로 렌더링돼요 (text와 value는 드롭다운 모듈이 내부적으로 이미 사용하므로 무시돼요).
$('.ui.dropdown').dropdown({
values: [
{
name: 'Mother',
value: 'mom',
data: {
husband: 'george',
age: 73
}
}
]
})
;
Mother
Supporting image labels for multiselection
필요하다면 다중 선택 라벨의 클래스 이름을 조정해 이미지 라벨을 활용할 수 있어요.
$('#imagelabels').dropdown({
className: {
label: 'ui image label',
icon: 'flag'
},
placeholder: 'Select some users',
values:[{
"name": "Jenny",
"value": "jenny",
"selected" : true,
"image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg",
"icon": "de"
},
{
"name": "Elliot",
"value": "elliot",
"selected" : true,
"image": "https://fomantic-ui.com/images/avatar/small/elliot.jpg",
"icon" : "us"
},
{
"name": "Stevie",
"value": "stevie",
"selected" : true,
"image": "https://fomantic-ui.com/images/avatar/small/stevie.jpg",
"icon" : "fr"
}]
})
;
Specifying Different Text & Hidden Input Values
어떤 항목에 data-text나 data-value를 추가하면 선택된 텍스트와 선택된 폼 값에 서로 다른 값을 지정할 수 있어요. 이는 드롭다운 메뉴 안에만 나타나길 원하는 아이콘 같은 추가 데이터를 포함할 때 유용해요.
Gender
Male
Female
Gender
Male
Female
Converting Form Elements
편의를 위해 select 요소는 자동으로 선택 드롭다운으로 변환될 수 있어요. 빈 문자열 값을 가진 select 옵션은 프롬프트 텍스트로 변환돼요.
Gender
Male
Female
$('#select')
.dropdown()
;
Gender
Male
Female
select에서 드롭다운을 만들 때 기존 data-text 속성은 보존되므로, 표시되는 텍스트가 드롭다운 안의 텍스트와 다를 수 있어요.
Select an option
Opt. 1
Opt. 2
Opt. A
Opt. B
$('#data-text-select')
.dropdown()
;
Select an option
Opt. 1
Opt. 2
Opt. A
Opt. B
Hybrid Form Initialization
세 번째 옵션으로 select 주위에 래퍼를 넣어 페이지 로드 시 올바르게 보이게 한 뒤, Javascript가 발동하면 숨겨진 메뉴를 채울 수 있어요. 이 경우 select 요소는 ui dropdown 클래스를 받지 않아요.
Colors
Red
Black
Blue
Green
Sizes
Small
Medium
Large
Huge
$('#hybrid select')
.dropdown({
on: 'hover'
})
;
Colors
Red
Black
Blue
Green
Sizes
Small
Medium
Large
Huge
Searching Dropdowns
검색 선택 드롭다운을 사용하면 사용자가 큰 목록을 더 쉽게 검색할 수 있어요. 이는 폼 select 요소에서 직접 변환될 수도 있어요.
$('#search-select')
.dropdown()
;
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
State
Alabama
Alaska
Arizona
Arkansas
California
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Multiple Selections
select 요소의 multiple 속성이나 드롭다운의 multiple 클래스를 포함해 여러 선택을 허용할 수 있어요.
$('#multi-select')
.dropdown()
;
State
Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District Of Columbia
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Dropdown
States
Alabama
Alaska
Arizona
Arkansas
California
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Select
States
Alabama
Alaska
Arizona
Arkansas
California
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming
Specifying Select Action
드롭다운에는 항목 선택 시 발생할 수 있는 여러 내장 액션이 있어요. settings.action에 이름을 전달해 내장 액션을 지정하거나, 액션을 수행하는 커스텀 함수를 전달할 수 있어요.
Action
Description
activate (Default)
Selects current item, adjusts dropdown value and changes dropdown text
combo
Same as activate, but updates previous elements text instead of self
select
Selects current item from menu and stores value, but does not change dropdown text
hide
Hides the dropdown menu and stores value, but does not change text
function(text, value, element){}
Custom action
nothing
Does nothing
$('.dropdown')
.dropdown({
action: 'combo'
})
;
$('.dropdown')
.dropdown({
action: function(text, value) {
// nothing built in occurs
}
})
;
$('.dropdown')
.dropdown({
action: 'hide',
onChange: function(value, text, $selectedItem) {
// custom action
}
})
;
Behavior
다음 모든 행동들은 다음 구문을 사용해 호출할 수 있어요:
.ui.your.element')
.dropdown('behavior name', argumentOne, argumentTwo)
;
예를 들어 아래에 나오는 clear(preventChangeTrigger)를 사용한다면:
// For example using the below mentioned 'clear(preventChangeTrigger)'
$('.ui.dropdown')
.dropdown('clear', true)
;
// Using the same but omit the default value for the preventChangeTrigger argument (which is false)
$('.ui.dropdown')
.dropdown('clear')
;
| 행동 (인자) | 설명 |
|---|---|
setup menu(values) |
전달된 값들로 드롭다운 메뉴를 다시 만들어요. values는 { values: [ {value, text, name} ] } 구조의 객체여야 해요. |
change values (values) |
드롭다운이 새 값을 사용하도록 변경해요. values 구조: [ {value, text, name} ]. |
refresh |
캐시된 모든 선택자와 데이터를 새로고침해요. |
toggle |
드롭다운의 현재 표시 여부를 토글해요. |
show(callback,preventFocus) |
드롭다운을 보여줘요. callback에 함수를 제공하면 드롭다운 메뉴가 표시된 후 호출돼요. 메뉴가 표시된 후 드롭다운 필드가 포커스되지 않게 하려면 preventFocus를 true로 설정하세요. |
hide(callback,preventBlur) |
드롭다운을 숨겨요. callback에 함수를 제공하면 드롭다운 메뉴가 숨겨진 후 호출돼요. 메뉴가 숨겨진 후 드롭다운 필드가 blur되지 않게 하려면 preventBlur를 true로 설정하세요. |
clear (preventChangeTrigger) |
드롭다운의 선택을 지워요. 변경 이벤트를 생략하려면 preventChangeTrigger를 true로 설정하세요 (기본값 false). |
clear cache |
원격 api 캐시를 한 번 지워요. |
hide others |
현재 드롭다운이 아닌 다른 모든 드롭다운을 숨겨요. |
restore defaults (preventChangeTrigger) |
드롭다운 텍스트와 값을 페이지 로드 시의 값으로 복원해요. preventChangeTrigger를 true로 설정하면 변경 이벤트를 생략해요 (기본값 false). |
restore default text |
드롭다운 텍스트를 페이지 로드 시의 값으로 복원해요. |
restore placeholder text |
드롭다운 텍스트를 프롬프트/플레이스홀더 텍스트로 복원해요. |
restore default value |
드롭다운 값을 페이지 로드 시의 값으로 복원해요. |
save defaults |
현재 텍스트와 값을 새 기본값으로 저장해요. (restore와 함께 사용). |
set selected(value,preventChangeTrigger) |
값을 선택된 것으로 설정해요. preventChangeTrigger를 true로 설정하면 변경 이벤트를 생략해요 (기본값 false). |
remove selected(value) |
선택된 값에서 값을 제거해요. |
set selected([value1, value2]) |
값 묶음을 선택된 것으로 추가해요. |
set exactly([value1, value2]) |
선택된 값을 정확히 지정된 값들로 설정해 현재 선택을 제거해요. |
set text(text) |
드롭다운 텍스트를 값으로 설정해요. |
set value (value,preventChangeTrigger) |
드롭다운 입력을 값으로 설정해요 (표시 상태는 업데이트하지 않아요). preventChangeTrigger를 true로 설정하면 변경 이벤트를 생략해요 (기본값 false). |
get text |
현재 드롭다운 텍스트를 반환해요. |
get value |
현재 드롭다운 입력 값을 반환해요. select 태그에서 만든 드롭다운은 항상 배열을, 그 외에는 문자열(multiple일 때 구분)을 반환해요. |
get values |
현재 드롭다운 입력 값을 배열로 반환해요. div 또는 select 중 무엇으로 만들었든 다중 선택 드롭다운에 유용해요. |
get item(value) |
주어진 입력 값과 일치하는 DOM 요소를 반환해요. |
get query |
입력된 현재 검색어를 반환해요. |
bind touch events |
요소에 터치 이벤트를 추가해요. |
bind mouse events |
요소에 마우스 이벤트를 추가해요. |
bind intent |
문서에 클릭을 바인딩해 드롭다운 밖을 클릭했는지 판단해요. |
unbind intent |
문서 인텐트 클릭 바인딩을 해제해요. |
determine eventInModule |
이벤트가 드롭다운 안에서 발생했는지 반환해요. |
determine select action(text, value) |
설정에 따라 미리 정의된 항목 선택 액션을 text/value를 전달해 트리거해요. |
set active |
드롭다운을 활성 상태로 설정해요. |
set visible |
드롭다운을 표시 상태로 설정해요. |
remove active |
드롭다운 활성 상태를 제거해요. |
remove visible |
드롭다운 표시 상태를 제거해요. |
is selection |
드롭다운이 선택(selection) 드롭다운인지 반환해요. |
is animated |
드롭다운이 애니메이션 중인지 반환해요. |
is visible |
드롭다운이 표시 중인지 반환해요. |
is hidden |
드롭다운이 숨겨졌는지 반환해요. |
get default text |
페이지 로드 시 설정된 드롭다운 값을 반환해요. |
get placeholder text |
플레이스홀더 텍스트를 반환해요. |
destroy |
인스턴스를 파괴하고 모든 이벤트를 제거해요. |
Dropdown
Frequently Used Settings
Setting
Default
Description
values
false
When specified allows you to initialize dropdown with specific values. See usage guide for details.
on
click
Event used to trigger dropdown (Hover, Click, Custom Event)
clearable
false
Whether the dropdown value can be cleared by the user after being selected.
ignoreCase
false
Whether values with non matching cases should be treated as identical when adding them to a dropdown.
ignoreSearchCase
true
Whether values with non matching cases should be treated as identical when filtering the items.
allowReselection
false
When set to true will fire onChange even when the value a user select matches the currently selected value.
allowAdditions
false
Whether search selection should allow users to add their own selections, works for single or multiselect.
hideAdditions
true
If disabled user additions will appear in the dropdown's menu using a specially formatted selection item formatted by templates.addition.
action
auto
activate (default)
Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available
select
activates menu and updates input fields, but does not change current text
combo
changes text of previous sibling element
nothing
no action occurs
hide
Dropdown menu is hidden
function(text, value, element){}
custom function is executed with values specified in callback
minCharacters
0
The minimum characters for a search to begin showing results
match
both
When using search selection specifies how to match values.
both
Matches against text and value
value
matches against value only
text
matches against text only
selectOnKeydown
true
Whether dropdown should select new option when using keyboard shortcuts. Setting to false will require enter or left click to confirm a choice.
forceSelection
false
Whether search selection will force currently selected choice when element is blurred.If a select tag with a required attribute was used, the forceSelection setting will be set to true automatically
keepSearchTerm
false
Whether the search value should be kept and menu stays filtered on item selection.
allowCategorySelection
false
Whether menu items with sub-menus (categories) should be selectable
fireOnInit
false
Whether callbacks should fire when initializing dropdown values
placeholder
auto
auto
Convert option with "" (blank string) value to placeholder text
value
Sets string value to placeholder text, leaves "" value
false
Leaves "" value as a selectable option
ignoreDiacritics
false
When activated, searches will also match results for base diacritic letters. For example when searching for 'a', it will also match 'á' or 'â' or 'å' and so on...
It will also ignore diacritics for the searchterm, so if searching for 'ó', it will match 'ó', but also 'o', 'ô' or 'õ' and so on... Not available in IE
highlightMatches
false
Whether search result should highlight matching strings.
Remote Settings
Setting
Default
Description
apiSettings
false
Can be set to an object to specify API settings for retrieving remote selection menu content from an API endpoint
fields
fields: {
remoteValues : 'results', // grouping for api results
values : 'values', // grouping for all dropdown values
disabled : 'disabled', // whether value should be disabled
name : 'name', // displayed dropdown text
description : 'description', // displayed dropdown description
descriptionVertical : 'descriptionVertical', // whether description should be vertical
value : 'value', // actual dropdown value
text : 'text', // displayed text when selected
type : 'type', // type of dropdown element
image : 'image', // optional image path
imageClass : 'imageClass', // optional individual class for image
alt : 'alt', // optional alt text for image
icon : 'icon', // optional icon name
iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead)
class : 'class', // optional individual class for item/header
divider : 'divider' // optional divider append for group headers
actionable : 'actionable' // optional actionable item
}
List mapping dropdown content to JSON Property when using API
filterRemoteData
false
Whether results returned from API should be filtered by query before being displayed
saveRemoteData
true
When enabled, will automatically store selected name/value pairs in sessionStorage to preserve user selection on page refresh. Disabling will clear remote dropdown values on refresh.
throttle
200
How long to wait after last user input to search remotely
Multiple Select Settings
Setting
Default
Description
useLabels
true
Whether multiselect should use labels. Must be set to true when allowAdditions is true
delimiter
,
When multiselect uses normal input tag, the values will be delimited with this character. Also used as the keyboard shortcut while entering multiple values
maxSelections
false
When set to a number, sets the maximum number of selections
headerDivider
true
whether option headers should have an additional divider line underneath when converted from <select><optgroup>
collapseOnActionable
true
whether the dropdown should collapse upon selection of an actionable item
collapseOnClearable
false
Whether the dropdown should collapse upon clicking the clearable icon
label
label: {
transition : 'scale',
duration : 200,
variation : false
}
Allows customization of multi-select labels. Setting transition: false will not animate the label at all
Additional Settings
Setting
Default
Description
direction
'auto'
When set to auto determines direction based on whether dropdown can fit on screen. Set to upward or downward to always force a direction.
keepOnScreen
true
Whether dropdown should try to keep itself on screen by checking whether menus display position in its context (Default context is page).
context
window
Element context to use when checking whether can show when keepOnScreen: true
fullTextSearch
'exact'
Specifying to "true" will use a fuzzy full text search, setting to "exact" will force the exact search to be matched somewhere in the string, setting to "false" will only match start of string.
hideDividers
false
How to handle dividers in the dropdown while searching. Dividers are defined as all siblings of items that match the divider selector
false
Dividers are not hidden
true
All dividers are automatically hidden
'empty'
All dividers not followed by a visible item are hidden (divider siblings are treated as a group)
preserveHTML
true
Whether HTML included in dropdown values should be preserved. (Allows icons to show up in selected value)
sortSelect
false
Whether to sort values when creating a dropdown automatically from a select element.
true
Sort by name [A, B, C, a, b, c]
natural
Sort by lowercase name [A, a, B, b, C, c]
function(a, b){}
custom sort function is executed
showOnFocus
false
Whether to show dropdown menu automatically on element focus.
allowTab
true
Whether to allow the element to be navigable by keyboard, by automatically creating a tabindex
transition
auto (slide down / slide up)
Named transition to use when animating menu in and out. Defaults to slide down or slide up depending on dropdown direction. Fade and slide down are available without including ui transitions
duration
200
Duration of animation events. The value will be ignored when individual hide/show duration values are provided via the transition setting
displayType
false
Specify the final transition display type (block, inline-block etc) so that it doesn't have to be calculated.
keys
keys : {
backspace : 8,
deleteKey : 46,
enter : 13,
escape : 27,
pageUp : 33,
pageDown : 34,
leftArrow : 37,
upArrow : 38,
rightArrow : 39,
downArrow : 40
}
The keycode used to represent keyboard shortcuts.
delay
delay : {
hide : 300,
show : 200,
search : 20
}
Time in milliseconds to debounce show or hide behavior when on: hover is used, or when touch is used.
Callbacks
Context
Description
onChange(value, text, $selectedItem)
Dropdown
Is called after a dropdown value changes. Receives the name and value of selection and the active menu element
onAdd(addedValue, addedText, $addedChoice)
Dropdown
Is called after a dropdown selection is added using a multiple select dropdown, only receives the added value
onRemove(removedValue, removedText, $removedChoice)
Dropdown
Is called after a dropdown selection is removed using a multiple select dropdown, only receives the removed value
onActionable(value, text, $choice)
Dropdown
Is called after an actionable item has been selected
onLabelCreate(value, text)
$label (jQDOM)
Allows you to modify a label before it is added. Expects the jQ DOM element for a label to be returned.
onLabelRemove(value)
$label (jQDOM)
Called when a label is remove, return false; will prevent the label from being removed.
onLabelSelect($selectedLabels)
Dropdown
Is called after a label is selected by a user
onNoResults(searchValue)
Dropdown
Is called after a dropdown is searched with no matching values
onShow
Dropdown
Is called before a dropdown is shown. If false is returned, dropdown will not be shown.
onHide
Dropdown
Is called before a dropdown is hidden. If false is returned, dropdown will not be hidden.
onSearch
Dropdown
Is called before a search takes place to filter the items list. If false is returned, the search and item filtering is cancelled.
Templates
이 템플릿들은 드롭다운의 각 부분에 대한 HTML 구조를 생성하는 데 사용돼요.
$.fn.dropdown.settings.templates : {
deQuote: function(string) {
// returns removed/replaced double quotes from a string
},
escape: function(string) {
// returns escaped string for injected results
},
dropdown: function (select, fields, preserveHTML, className) {
// returns dropdown HTML from select values
},
menu: function (response, fields, preserveHTML, className) {
// returns menu html from response data
},
label: function (value, text, preserveHTML, className) {
// returns label html for multiselect
},
message: function (message) {
// returns messages like "No results"
},
addition: function (choice) {
// return user addition for selection menu
}
}
- Functions — 각 템플릿 함수는 드롭다운의 해당 부분 HTML을 생성해요:
deQuote(문자열의 이중 따옴표 제거/교체),escape(삽입 결과 이스케이프),dropdown(select 값에서 드롭다운 HTML 생성),menu(응답 데이터에서 메뉴 html 생성),label(다중 선택 라벨 html 생성),message("No results" 같은 메시지 생성),addition(선택 메뉴의 사용자 추가 반환).
Module Settings
DOM Settings
DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.
$.fn.dropdown.settings.message를 수정해 사이트 전체 메시지를 지정할 수 있어요. 이 메시지는 페이지에 어떤 드롭다운에도 적용돼요.
Default
Description
namespace
dropdown
Event namespace. Makes sure module teardown does not effect other events attached to an element.
message
message: {
addResult : 'Add {term}',
count : '{count} selected',
maxSelections : 'Max {maxCount} selections',
noResults : 'No results found.'
}
selector
selector : {
addition : '.addition',
divider : '.divider, .header',
dropdown : '.ui.dropdown',
icon : '> .dropdown.icon',
input : '> input[type="hidden"], > select',
item : '.item',
label : '> .label',
remove : '> .label > .delete.icon',
siblingLabel : '.label',
menu : '.menu',
message : '.message',
menuIcon : '.dropdown.icon',
search : 'input.search, .menu > .search > input',
sizer : '> span.sizer',
text : '> .text:not(.icon)',
unselectable : '.disabled, .filtered',
clearIcon : '> .remove.icon'
}
regExp
regExp : {
escape : /[-[\]{}()*+?.,\\^$|#\s]/g,
}
metadata
metadata : {
defaultText : 'defaultText',
defaultValue : 'defaultValue',
placeholderText : 'placeholderText',
text : 'text',
value : 'value'
}
className
className : {
active : 'active',
addition : 'addition',
animating : 'animating',
description : 'description',
descriptionVertical : 'vertical',
disabled : 'disabled',
empty : 'empty',
dropdown : 'ui dropdown',
filtered : 'filtered',
hidden : 'hidden transition',
icon : 'icon',
image : 'image',
item : 'item',
label : 'ui label',
loading : 'loading',
menu : 'menu',
message : 'message',
multiple : 'multiple',
placeholder : 'default',
sizer : 'sizer',
search : 'search',
selected : 'selected',
selection : 'selection',
text : 'text',
upward : 'upward',
leftward : 'left',
visible : 'visible',
clearable : 'clearable',
noselection : 'noselection',
delete : 'delete',
header : 'header',
divider : 'divider',
groupIcon : '',
unfilterable : 'unfilterable',
actionable : 'actionable'
}
name
Dropdown
Name used in debug logs
silent
false
Silences all console output including error messages, regardless of other debug settings.
debug
false
Provides standard debug output to console
performance
true
Provides performance stats in console, and suppresses other debug output.
verbose
false
Provides ancillary debug output to console
error
error : {
action : 'You called a dropdown action that was not defined',
alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown',
labels : 'Allowing user additions currently requires the use of labels.',
missingMultiple : ' requires multiple property to be set to correctly preserve multiple values',
method : 'The method you called is not defined.',
noAPI : 'The API module is required to load resources remotely',
noStorage : 'Saving remote data requires session storage',
noElement : 'This module requires ui {element}',
noNormalize : '"ignoreDiacritics" setting will be ignored. Browser does not support String().normalize(). You may consider including as a polyfill.'
}
Taking care of untrusted remote data
No responsibility (책임 없음)
- Fomantic은 remoteData를 다룰 때 XSS를 방지하기 위한 몇 가지 기본 기능을 포함하고 있어요.
- 어떤 미지의 원격 데이터 소스의 데이터에 대해 사이트가 취약하지 않을 것이라는 보장이나 약속은 없어요.
- Fomantic-UI는 데이터를 어떻게 처리하고 사용하는지에 대해 책임지지 않아요. fomantic을 사용함으로써, 데이터 처리로 인한 어떤 문제에 대해서도 귀하(또는 귀하의 회사)에게 부과되는 모든 피해나 비용에 대한 책임을 수락하게 됩니다.
HINT
XSS(Cross Site Scripting) 예방 체크리스트에 대해 더 자세히 알아보려면 https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet 를 참고하세요.
Untrusted Data
어떤 데이터도 절대 신뢰해서는 안 되며, 클라이언트에 전달하기 전에 모든 데이터가 서버에서 처리되어 위생 처리(sanitize)되도록 해야 해요. 하지만 드롭다운 모듈의 데이터 저장소로 기존 외부 API 서비스를 사용하고 싶을 수도 있어요. 이 경우 preserveHTML 옵션을 false로 설정하는 것이 좋아요. 그러면 프론트엔드가 제공하는 모든 데이터가 &, <, >, ", ', ` 같은 가장 위험한 문자에 대해 HTML 엔티티로 인코딩되거나, 항목 선택 시 모든 html 데이터가 완전히 제거돼요.
$('.ui.dropdown')
.dropdown({
preserveHTML : false,
apiSettings: {
url: 'https://api.github.com/search/repositories?q={query}'
}
});
Evil API Example
다음 드롭다운 필드들은 코드를 주입하려는 악의적인 API 백엔드에 연결되어 있어요.
- 드롭다운 필드를 클릭해 api 호출을 트리거해 보세요.
- 첫 번째 예제의 기본(생략된) 설정
preserveHTML:true는 즉시 alert 메시지를 얻게 됩니다. - 또한 드롭다운 항목(빨간색으로 표시)의 추가 클릭 이벤트 핸들러에 숨겨진 코드를 주입해요. 원하는 드롭다운 결과를 선택할 때처럼 클릭해 보세요.
- 악성 예제 코드는 한 번 실행된 후 DOM에서 스스로를 제거해요.
Vulnerable Version
Select Animal
$('.ui.dropdown.evilexample')
.dropdown({
apiSettings: {
url: '/evilapi.json'
}
});
Sanitized Version
Select Animal
$('.ui.dropdown.evilexample_sanitized')
.dropdown({
preserveHTML : false,
apiSettings: {
url: '/evilapi.json'
}
});
더 알아보기 (Learn more)
드롭다운으로 폼 셀렉트, 메뉴, 다중 선택, 검색, 원격 데이터까지 다양한 선택형 UI를 구성할 수 있어요. 익숙해졌다면 폼 검증(Form)과 메뉴(Menu) 문서도 함께 살펴보세요.