如何解决在 Material ui 的手风琴和选项卡之间切换作为响应策略的最佳方式?
我想在手风琴和选项卡之间切换,这取决于使用材料 UI 反应实现 (MUI) 的屏幕宽度。这可能吗?文档似乎没有涵盖这个用例,但我认为它会很常见。
我目前正在这样做,它在手风琴中非常好地呈现来自我的 CMS 的 editorJs 内容块,但不确定如何在屏幕宽度 > 768 时将其转到选项卡布局。>
感谢任何帮助。
<Accordion>
{data.listAccordions.data.length > 0
? data.listAccordions.data
.sort((a,b) =>
parseInt(a.priority) < parseInt(b.priority) ? 1 : -1
)
.map((accordionItem,index) => {
return (
<AccordionItem
title={accordionItem.heading}
icon={<EmptyIcon />}
key={index}
>
<div>
<EditorRendererProvider
data={{ blocks: accordionItem.content }}
/>
</div>
</AccordionItem>
);
})
: null}
</Accordion>
解决方法
您基本上使用两个独立的组件;一个用于断点下方,一个用于断点上方。和一个媒体查询钩子;网上有很多。
const isLargeScreen = useMedia('(min-width: 768px)');
return isLargeScreen ? <Tabs items={myItems} /> : <Accordion items={myItems} />;
这是您可以使用的一种钩子实现:
import { useState,useEffect } from 'react';
export const useMedia = (query: any) => {
const [matches,setMatches] = useState(window.matchMedia(query).matches);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) setMatches(media.matches);
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
},[matches,query]);
return matches;
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。