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

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

使用 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>

最佳答案

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

使用 semantic-ui-react,我是这样调用组件的:

<Dropdown item icon='wrench' simple>

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

关于semantic-ui - 语义 UI - 是否可以在下拉菜单中使用表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42285071/

相关文章:

javascript - 语义 UI 边栏过渡问题

javascript - 如何在 Menu.List 元素中使用 Link 组件

webpack - semantic-ui-react webpack 大小是 1.74M?

css - 是否有与 Bootstrap 的 .container 类等效的语义 UI?

jquery - 语义 UI 弹出窗口不显示

jquery - renderUI 中 Shiny 的语义 Ui 元素

javascript - 更改 React 中 onChange 的 props

html - 语义 ui 网格 - 显示列的全宽,隐藏 "computer only"列后

semantic-ui-react - React Semantic UI - 没有触发器的模态?