标签和按钮附加到语义UI React中的下拉列表

Question

如何将一个Label和一个Button.Group附加到React的语义UI下拉列表中？

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

http://localhost:8082/secure

编辑：以下是我目前拥有的语义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>

Answer 1

我让它与 semantic-ui-react v2.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 类。我在下拉菜单旁边添加了一个“刷新”按钮。这是我使用的 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% 适用于您的情况。但我希望它至少能给你一些灵感，让你为你工作。哦，这是生成的下拉列表：