我使用的是Radix-UI Radix Ui Select中的“选择”组件,弹出的模态在屏幕顶部溢出,请参阅所附图片。但是当我有几个选项时,它工作正常,请参阅附件imae => fine modal
选择按钮:
const SelectButton = (props: Props) => {
function handleOnValueChange(newValue:string){
props.onChange(newValue)
}
return (
<SelectPrimitive.Root defaultValue="blueberry" onValueChange={handleOnValueChange}>
<SelectPrimitive.Trigger asChild aria-label="Food">
{props.children}
</SelectPrimitive.Trigger>
<SelectPrimitive.Content className="rounded-lg mt-4 top-5">
<SelectPrimitive.ScrollUpButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
<ChevronUpIcon />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport className="bg-white dark:bg-black p-2 rounded-lg shadow-lg top-5">
<SelectPrimitive.Group>
{props.options.map(
(f, i) => (
<SelectPrimitive.Item
//disabled={f === "Grapes"}
key={`${f}-${i}`}
value={props.toLower == undefined ? f.toLowerCase() : f}
className={cx(
"relative flex items-center px-8 py-2 rounded-md text-sm text-gray-700 dark:text-gray-300 font-medium focus:bg-gray-100 dark:focus:bg-gray-900",
"radix-disabled:opacity-50",
"focus:outline-none select-none"
)}
>
<SelectPrimitive.ItemText>{f}</SelectPrimitive.ItemText>
<SelectPrimitive.ItemIndicator className="absolute left-2 inline-flex items-center">
<CheckIcon />
</SelectPrimitive.ItemIndicator>
</SelectPrimitive.Item>
)
)}
</SelectPrimitive.Group>
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton className="flex items-center justify-center text-gray-700 dark:text-gray-300">
<ChevronDownIcon />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>
</SelectPrimitive.Root>
);
};
export default SelectButton;
字符串
1条答案
按热度按时间j1dl9f461#
将此css添加到SelectPrimitive。内容:
字符串
但请注意,只有当
<SelectPrimitive.Content position="popper" />
了解更多