时间戳

首页 > 解决方案 > 在 Material-UI Drawer 中的顶部和底部图标之间留出空白空间

javascript - 在 Material-UI Drawer 中的顶部和底部图标之间留出空白空间

问题描述

这很难用语言表达，但我希望能够向 Drawer 组件添加两组图标。Set 1 位于顶部，在标准列中对齐，就像他们提供的示例一样。第 2 组位于抽屉的底部，在两组之间留有空白空间，同时保持响应。

这是一个粗略的例子，其中 xxx 代表空白。

图标 1
图标 2
图标 3
xxx
xxx
xxx
xxx
xxx
xxx
图标 4
图标 5

在保持响应并避免边距和填充的自定义 CSS 规则的同时，这是否可行？感谢大家！

标签： javascriptreactjsmaterial-ui

解决方案

我认为根本不可能没有任何 CSS。Drawer的Material-UI 文档大量使用 CSS-in-JS 来设置基本示例的样式。

但我认为您不必编写大量 CSS 来实现图标组之间的这种垂直间隙。使用flexbox，并通过设置让第一组图标增长到完全可用的垂直空间flexGrow: 1，我相信你可以实现你所追求的？

有关演示，请参阅此 CodeSandbox

推荐阅读