semantic-ui - 在 Semantic UI React 中附加到下拉列表的标签和按钮

Question

如何在 React 的语义 UI 中将标签和 Button.Group 附加到下拉菜单？

附图显示了我目前所拥有的。如果我尝试使用该attached属性，标签或按钮组将嵌套在下拉列表中。

编辑：以下是我目前拥有的语义 UI React 标记：

<Label size='big'>Code</Label>
<Dropdown
  options={options}
  placeholder='Choose a Patch'
  search
  selection
  allowAdditions
  value={value}
/>
<Button.Group>
  <Button icon='save' content='Save' color='green' />
  <Button.Or />
  <Button icon='clone' content='Clone' color='yellow' />
  <Button icon='cogs' />
</Button.Group>

标签： semantic-uisemantic-ui-react

Answer 1

我让它与semantic-ui-reactv2.0.3 一起使用。

这是我使用的标记：

<Container className='refreshable-dropdown'>
  <Dropdown className='left attached refreshable-dropdown' multiple select />
  <Button className='refreshable-dropdown' attached='right' icon='refresh' />
</Container>

你可以看到我添加了一个名为refreshable-dropdown. 我在下拉列表旁边添加了一个“刷新”按钮。这是我使用的 CSS 类：

/* This is for "fluid" dropdowns that take the whole width of
 * their container.
 */
.ui.container.refreshable-dropdown {
  display: flex;
  flex-flow: row nowrap;
  width: 100%
}

/* If you want the dropdown "inline" with other content, apply
 * the inline CSS class
 */
.ui.container.refreshable-dropdown.inline {
  display: flex-inline;
  flex-flow: row nowrap;
}

.ui.attached.dropdown.refreshable-dropdown {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.ui.attached.button.refreshable-dropdown {
    border: 1px solid #2185d0;  /* Specific to my button color */
    border-right: none;
    box-shadow: none !important;
    vertical-align: top;
}

.ui.attached.button.refreshable-dropdown:hover {
    border-color: #1678c2;  /* Specific to my button color*/
}

请注意，我将select属性留在了下拉列表中。这会导致生成一些与其他降价代码不同的 HTML，因此这可能不是 100% 适用于您的情况。但我希望它至少能给你一些灵感，让你为自己制作这项工作。哦，这是生成的下拉列表：