Framework7：如何更改侧面板宽度？

Question

我需要更改framework7中侧面板的宽度??

https://framework7.io/docs/side-panels.html

Answer 1

只需更改类面板的 css 即可。

默认值（在framework7.ios.css中）：

.panel {
    z-index: 1000;
    display: none;
    background: #111;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    width: 260px;
    top: 0;
    height: 100%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition-duration: .4s;
    transition-duration: .4s;
}

Answer 2

出于搜索引擎的目的，这是正确的答案。将其放入您的自定义 scss 文件中，将宽度更改为您想要的

右面板

.panel-right {
    --f7-panel-right-width: 360px;
    --f7-panel-width: 360px;
}

左面板

.panel-left {
    --f7-panel-left-width: 360px;
    --f7-panel-width: 360px;
}

这样做会自动更改变换 CSS，以便您的动画保持流畅。