typescript 下拉选项的文本元素内的流畅UI 2列

pinkon5k 于 2023-05-01 发布在 TypeScript

关注(0)|答案(1)|浏览(99)

有没有什么方法可以在使用fluent ui的下拉选项中有两个列？
问题是，我想这样的风格，使个位数的数字对齐以及2位数或3位数的数字：
Image of the problem
这就是为什么我认为这将是更好的有两个列和对齐的内容与数字与“弹性结束”和第二个与文本只是正常的任何想法？
Map选项的代码：

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>

typescript

来源：https://stackoverflow.com/questions/75792322/fluent-ui-2-columns-inside-text-element-of-dropdown-option

1条答案

按热度按时间

1tuwyuhd1#

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

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>
    );
  }

赞(0）回复(0）举报 2023-05-01

我来回答

typescript 下拉选项的文本元素内的流畅UI 2列

1条答案

相关问题

热门标签

最新问答