aboutsummaryrefslogtreecommitdiffstats
path: root/templates/devtest/fomantic-dropdown.tmpl
blob: 57a7c1313ea6315c2b15e428bd6393cd8dea6fd2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
{{template "base/head" .}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
<div class="page-content devtest ui container">
	<div>
		<h2>Dropdown</h2>
		<div>
			<div class="ui dropdown tw-border tw-border-red tw-border-dashed" data-tooltip-content="border for demo purpose only">
				<span class="text">search-input &amp; flex-item in menu</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				<div class="menu flex-items-menu">
					<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
					<div class="item"><input type="radio">item</div>
					<div class="item"><input type="radio">item</div>
				</div>
			</div>
			<div class="ui search selection dropdown">
				<span class="text">search ...</span>
				<input name="value" class="search">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				{{svg "octicon-x" 14 "remove icon"}}
				<div class="menu">
					<div class="item">item</div>
				</div>
			</div>
			<div class="ui multiple selection dropdown">
				<input class="hidden" value="1">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				{{svg "octicon-x" 14 "remove icon"}}
				<div class="default text">empty multiple dropdown</div>
				<div class="menu">
					<div class="item">item</div>
				</div>
			</div>
			<div class="ui multiple clearable search selection dropdown">
				<input type="hidden" value="1">
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
				{{svg "octicon-x" 14 "remove icon"}}
				<div class="default text">clearable search dropdown</div>
				<div class="menu">
					<div class="item" data-value="1">item</div>
				</div>
			</div>
			<div class="ui buttons">
				<button class="ui button">Button with Dropdown</button>
				<div class="ui dropdown button icon">
					{{svg "octicon-triangle-down"}}
					<div class="menu">
						<div class="item">item</div>
					</div>
				</div>
			</div>
		</div>

		<h2>Selection</h2>
		<div>
			{{/* the "selection" class is optional, it will be added by JS automatically */}}
			<select class="ui dropdown selection ellipsis-items-nowrap">
				<option>a</option>
				<option>abcdefuvwxyz</option>
				<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
			</select>
			<select class="ui dropdown ellipsis-items-nowrap tw-max-w-[8em]">
				<option>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</option>
				<option>abcdefuvwxyz</option>
				<option>a</option>
			</select>
		</div>
		<h2>Dropdown Button (demo only without menu)</h2>
		<div>
			<div class="ui dropdown mini button">
				<span class="text">mini dropdown</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
			<div class="ui dropdown tiny button">
				<span class="text">tiny dropdown</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
			<div class="ui button dropdown">
				<span class="text">button dropdown</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
		</div>

		<div>
			<div class="ui dropdown mini compact button">
				<span class="text">mini compact</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
			<div class="ui dropdown tiny compact button">
				<span class="text">tiny compact</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
			<div class="ui button compact dropdown">
				<span class="text">button compact</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
		</div>

		<div>
			<hr>
			<div class="ui tiny button">Other button align with ...</div>
			<div class="ui dropdown tiny button">
				<span class="text">... Dropdown Button</span>
				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
			</div>
		</div>
	</div>
</div>
{{template "base/footer" .}}