Question

如何在输入的两侧附加操作？我目前最好的尝试是：

<form class="ui form">
    <div class="ui left action input">
        <select class="ui compact selection dropdown" name="seats">
            {% for seat in seatOptions %}
            <option value="{{ seat }}">{{ seat }}</option>
            {% endfor %}
        </select>
        <input id="seatsText" type="text" value="plaats" readonly>
    </div>
    <button class="ui right attached button" type="submit" >aanvragen</button>
</form>

这创建了所需的舍入，但按钮（右侧动作）似乎与输入重叠，因为输入的边框仍然可以在按钮的一部分周围看到，如屏幕截图所示。

Answer 1

这是一个非常非常晚的答案，但这就是我得到的......

<div class="ui left action input">
                <div
                  role="listbox"
                  aria-expanded="false"
                  class="ui basic button floating dropdown"
                  tabindex="0"
                >
                  <div
                    aria-atomic="true"
                    aria-live="polite"
                    role="alert"
                    class="divider text"
                  >
                    This Page
                  </div>
                  <i aria-hidden="true" class="dropdown icon"></i>
                  <div class="menu transition">
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="true"
                      aria-selected="true"
                      class="active selected item"
                    >
                      <span class="text">This Page</span>
                    </div>
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="false"
                      aria-selected="false"
                      class="item"
                    >
                      <span class="text">This Organization</span>
                    </div>
                    <div
                      style={{ pointerEvents: 'all' }}
                      role="option"
                      aria-checked="false"
                      aria-selected="false"
                      class="item"
                    >
                      <span class="text">Entire Site</span>
                    </div>
                  </div>
                </div>
                <input type="text" placeholder="Search..." />
              </div>

选择不起作用，但我希望你们能修复它......

对于那些使用 React 的人来说，这是如何做到的：

import React from 'react'
import { Dropdown, Input } from 'semantic-ui-react'

const options = [
  { key: 'page', text: 'This Page', value: 'page' },
  { key: 'org', text: 'This Organization', value: 'org' },
  { key: 'site', text: 'Entire Site', value: 'site' },
]

const InputExampleActionDropdown = () => (
  <Input
    action={
      <Dropdown button basic floating options={options} defaultValue='page' />
    }
    actionPosition='left'
    placeholder='Search...'
  />
)

export default InputExampleActionDropdown

如果它看起来很糟糕并且需要 css，请不要忘记为 html 导入 css 或安装用于 react 的包 :) 干杯！抱歉没有帮助太多，但我希望我能帮助未来的搜索者

语义UI中的左右动作输入

1 个答案: