语义UI - 是否可以在下拉菜单中使用表单?

时间:2017-02-16 21:32:58

标签: semantic-ui semantic-ui-css semantic-ui-react

使用SemanticUI,是否可以插入一个带有嵌套在下拉菜单中的下拉项的表单?

这是一个表达我的意思的小提琴: 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>

2 个答案:

答案 0 :(得分:2)

实际上,我的案例中的真正问题是添加到下拉元素中的“简单”类。

使用semantic-ui-react,我用这种方式调用组件:

<Dropdown item icon='wrench' simple>

如果我们想在下拉列表中添加嵌套组件,我们必须删除'simple'属性。

答案 1 :(得分:1)

如果jsfiddle中的第二个jquery选择器替换为

,则将正确呈现嵌套下拉列表

$('.selection.dropdown').dropdown();