自动调整区域大小以适应屏幕
Posted
技术标签:
【中文标题】自动调整区域大小以适应屏幕【英文标题】:Auto-resize area to fit screen 【发布时间】:2021-10-31 11:57:48 【问题描述】:我想根据这张图创建一个视觉布局:
代码:
<>
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="flex-start"
>
<Grid item>
<Grid className=classes1.color
container
direction="column"
justifyContent="flex-start"
alignItems="center"
>
<Grid item>
<Box m=2>
item link 1
</Box>
</Grid>
<Grid item>
<Box m=2>
item link 2
</Box>
</Grid>
<Grid item>
<Box m=2>
item link 3
</Box>
</Grid>
<Grid item>
<Box m=2>
item link 4
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className=classes2.color
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m=10>
item 11
</Box>
</Grid>
<Grid item>
<Box m=10>
item 11
</Box>
</Grid>
<Grid item>
<Box m=10>
item 13
</Box>
</Grid>
<Grid item>
<Box m=10>
item 14
</Box>
</Grid>
<Grid item>
<Box m=10>
item 15
</Box>
</Grid>
<Grid item>
<Box m=10>
item 16
</Box>
</Grid>
</Grid>
</Grid>
<Grid item>
<Grid className=classes3.color
container
direction="column"
justifyContent="space-around"
alignItems="center"
>
<Grid item>
<Box m=15>
item area 1
</Box>
</Grid>
<Grid item>
<Box m=15>
item area 2
</Box>
</Grid>
</Grid>
</Grid>
</Grid>
</>
完整代码:
https://stackblitz.com/edit/react-ts-lhrv91?file=Hello.tsx
我无法解决的问题是如何为第二列(第 1-6 项)添加垂直滚动条。 我还想自动调整项目“区域 1”和“项目区域 2”以适应水平区域的其余部分并添加垂直滚动条。
【问题讨论】:
【参考方案1】:对于在第二列中使用垂直滚动条,您可以将父 <Grid container>
分隔为三个 Grid,然后在中间 <Grid container>
中使用 style= height: "100%", overflow: "auto"
基于 material-ui documentation at "xl" 和 "xs" 道具,您可以使用 xs=12
in <Grid item xs=12>
来适应其余部分水平区域
检查这个看起来像你的代码的codesandbox
【讨论】:
我还有一个问题:是否有可能用鼠标调整左右边框的大小,用鼠标拖动mediumvioletred
颜色的区域?有时我需要扩展它。
由于某种原因,我收到多个错误,例如 TS2769: No overload matches this call.
这条线 xs=xsGridLeft
我有一个小要求。你能用打字稿给我看同样的例子吗?
Material Design 的响应式 UI 基于 12 列网格布局,因此最小宽度 (xs=1) 应为屏幕的 8.33334%。所以我认为可调整大小的网格无法顺利实现,但可抓取的可调整大小组件的想法是相同的。它们都使用 addeventlistener 函数 onmousedown 、 onmouseup 和 onmousemove 并更改组件宽度。可能这个链接可以帮助你。 ***.com/questions/49469834/…
感谢您的回复。一个小小的请求。你能告诉我在 Typescript 中同样的解决方案吗?以上是关于自动调整区域大小以适应屏幕的主要内容,如果未能解决你的问题,请参考以下文章