如何在子菜单中的文本元素的左侧移动SemanticUIReact Icon？

Question

下图演示了当前的GUI，我只是希望将图标放置在“语言”菜单的左侧，而不是当前位置（右侧）

当前代码

  </Dropdown.Item>
                <Dropdown text="Language" icon="angle down" pointing="right"
                        options={[
                          { text: 'English', value: 'en', flag: 'gb'},
                          { text: 'Svenska', value: 'se', flag: 'se' },
                          { text: 'Dansk', value: 'de', flag: 'de' },
                          { text: 'Norsk', value: 'no', flag: 'no' },
                        ]}
                    />

任何有关如何定位“语言”文本左侧的“向下倾斜”图标的建议，将不胜感激。

Answer 1

您可以按照docs的使用trigger代替text，并删除默认图标。

const trigger = (
  <span>
    <Icon name="angle down" /> Language
  </span>
);

const options = [
  { text: "English", value: "en", flag: "gb" },
  { text: "Svenska", value: "se", flag: "se" },
  { text: "Dansk", value: "de", flag: "de" },
  { text: "Norsk", value: "no", flag: "no" }
];

const DropdownTriggerExample = () => (
  <Dropdown pointing="right" trigger={trigger} options={options} icon={null} />
);

还请注意，您有一个丹麦元素的错字（“ de”应为“ dk”）。