语义 UI - 是否可以在下拉菜单中使用表单?
Semantic UI - Is it possible to use a form in a dropdown menu?
使用 SemanticUI,是否可以插入带有嵌套在下拉菜单中的下拉项的表单?
下面是 fiddle 来说明我的意思:
https://jsfiddle.net/Nanego/tnv34c7b/5/
<div class="ui top attached menu">
<div class="ui dropdown icon item">
<i class="wrench icon"></i>
<div class="menu">
<div class="ui segment">
<form class="ui form">
<div class="field">
<div class="ui form">
<div class="field">
<label>Country</label>
<select multiple="" class="ui dropdown">
<option value="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
...
<option value="CM">Cameroon</option>
</select>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
如果将 jsfiddle 中的第二个 jquery 选择器替换为
,则嵌套下拉列表将正确呈现
$('.selection.dropdown').dropdown();
实际上,在我的案例中,真正的问题是 "simple" class 添加到下拉元素。
使用 semantic-ui-react,我是这样调用组件的:
<Dropdown item icon='wrench' simple>
如果我们想在下拉列表中添加嵌套组件,我们必须删除 'simple' 属性。
使用 SemanticUI,是否可以插入带有嵌套在下拉菜单中的下拉项的表单?
下面是 fiddle 来说明我的意思: https://jsfiddle.net/Nanego/tnv34c7b/5/
<div class="ui top attached menu">
<div class="ui dropdown icon item">
<i class="wrench icon"></i>
<div class="menu">
<div class="ui segment">
<form class="ui form">
<div class="field">
<div class="ui form">
<div class="field">
<label>Country</label>
<select multiple="" class="ui dropdown">
<option value="">Select Country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
...
<option value="CM">Cameroon</option>
</select>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
如果将 jsfiddle 中的第二个 jquery 选择器替换为
,则嵌套下拉列表将正确呈现$('.selection.dropdown').dropdown();
实际上,在我的案例中,真正的问题是 "simple" class 添加到下拉元素。
使用 semantic-ui-react,我是这样调用组件的:
<Dropdown item icon='wrench' simple>
如果我们想在下拉列表中添加嵌套组件,我们必须删除 'simple' 属性。