code.gitea.io/gitea@v1.22.3/templates/devtest/fomantic-dropdown.tmpl (about)

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