更改离子侧菜单的菜单宽度答案

【问题标题】：Change both menu width for ionic side menu更改离子侧菜单的菜单宽度
【发布时间】：2017-02-21 02:36:55
【问题描述】：

我有左右离子侧菜单，我想同时更改菜单宽度。我已成功更改左侧菜单宽度，如下所示，但我不确定如何更改右侧菜单宽度。目前，左侧菜单宽度发生变化，但在切换右侧菜单时，右侧菜单内容失真。

.menu.menu-left{
    width: calc(100% - 70px) !important;
}
.menu-open .menu-content{
    transform: translate3d(calc(100% - 70px), 0px, 0px) !important;
}

Codepen Link

【问题讨论】：

标签： css ionic-framework

【解决方案1】：

只需在variables.scss 中添加“菜单宽度”

$menu-width: 200px;

【讨论】：

在 Ionic5 中不工作知道如何在 Ionic5 中为侧边菜单设置自定义宽度吗？

【解决方案2】：

使用类名来改变侧边菜单的宽度。

<ion-menu class="custom" side="end" menuId="first">
</ion-menu>

在 CSS 中你可以像下面这样使用。

.custom {
  --width: 500px;
}

【讨论】：

任何人都能让它与 --max-width 一起使用吗？只是 --width 似乎正在工作，并且可以使用像 --width: max(90vw, 500px) 这样的 css 表达式来获得良好的效果
Px 很好，但对于每种尺寸的设备来说，百分比都更好。

【解决方案3】：

根据this，只需在ion-side-menu元素中添加width属性即可。

侧面菜单的离子文档是here

<ion-side-menu
       side="left"
       width="500">
</ion-side-menu>

【讨论】：

它不起作用。更改width 属性只会更改侧边菜单的滑动位置，但side-menu-content 宽度仍保持不变。 width 属性是侧面菜单的一部分，因此它知道滑动时要翻译多远。即使您确实使用 css 对其进行了更改，side-menu 指令仍将使用默认值 275。

【解决方案4】：

当人们给出他们的答案时，我也希望给出我的答案。

PX 很好，但如果我们以百分比添加宽度，那么它适用于所有设备。在你的 page.scss 文件中添加这个 scss

ion-menu {
  --width: 83%;
}

而且HTML不需要给类名什么的，你想给就给。

<ion-menu contentId="main-content" type="overlay"></ion-menu>

【讨论】：

【解决方案5】：

对于 Ionic5 及以上的项目，我们可以像下面这样覆盖侧面板的 CSS 以使其根据需要进行定制。

ion-split-pane {
  --side-max-width: 18%;
  --side-min-width: 270px;
}

把这个类放在你实现菜单的地方，这样它就会用这个覆盖现有的 CSS。

【讨论】：