Fluent UI 2 columns inside text element of dropdown option

Question

有没有办法使用流利的用户界面在下拉选项中有两列？

问题是我想设计它的样式，以便单位数字与 2 位或 3 位数字很好地对齐：

问题图片

这就是为什么我认为最好有两列并将内容与带有“flex-end”的数字对齐，而第二列与正常的文本对齐有什么想法吗？

我的映射选项代码：

    let mainGroupOptions = Object.keys(dropDownOptions)
        .map(key => {
            return { key, text: dropDownOptions[key].value + " - " + dropDownOptions[key].label, value: dropDownOptions[key].value };
        });

下拉HTML代码：

                        <Dropdown
                            label="Hauptgruppe*"
                            options={mainGroupOptions}
                            selectedKey={mainGroupSelected}
                            errorMessage={errors.mainGroup ? "Hauptgruppe erforderlich" : ''}
                            onChange={(e, option) => { setMainGroupSelected(option.key); deleteErrors(errors, errors.mainGroup) }}>
                        </Dropdown>

Answer 1

我不太确定格式需要是什么样子，但希望这能让你朝着正确的方向前进。您应该能够将其简化为调整样式以获得所需内容的情况。

import {useState} from 'react';
import {
    Dropdown,
    makeStyles,
    Option,
  } from "@fluentui/react-components";

  const useStyles=makeStyles({
    option:{
        width:"1200px",
    },
    left:{
        float:"left",
        textAlign:"right",
        width:"20%",
    },
    right:{
        float:"right",
        textAlign:"left",
        width:"70%",
        marginLeft:"10px"
    },
  });

  let mainGroupOptions = [
    {
      key: '0',
      value:"Allgemeines"
    },
    {
      key: '00',
      value:"IHK-Gesetz und Organisation der Industrie-un..."
    },
    {
      key: '0000',
      value:"Allgemeines"
    },
  ];

export default function FormatOptions(){
    const c=useStyles();
    const {mainGroupSelected, setMainGroupSelected} = useState(0);
    return (
        <Dropdown
            label="Hauptgruppe*"
            selectedKey={mainGroupSelected}
            onChange={(e, option) => { setMainGroupSelected(option.key); deleteErrors(errors, errors.mainGroup) }}
        >
            {mainGroupOptions.map((option)=>(
                <Option key={option.key} >
                    <div className={c.option}>
                        <div className={c.left}>{option.key}</div>
                        <div className={c.right}>{option.value}</div>
                    </div>
                </Option>
            ))}
        </Dropdown>
    );
  }