Question

我在左侧有一些内容菜单，我在菜单中有一个按钮，当我按下此按钮时，菜单的宽度变小了，我希望在那一刻我的内容宽度变大（调整大小以适应）。

此效果存在于https://material.angular.io/components/sidenav/examples中 md-sidenav，当你按下+按钮时，内容会变大或变小。

我想在我的按钮上调整大小:)，mb有一些css或javascript / typescript ......？

我正在使用Angular 4

Answer 1

最简单的方法可能是使用flex布局 - 侧边菜单将具有固定宽度，内容将具有灵活的宽度。见plunker。要使用弹性选项，您可以查看flex playground。要添加简单的调整大小动画，请使用Angular animations guide - 创建两个状态，为侧边菜单的width属性设置动画。

Answer 2

@thalesrc/ng-utils的指令可在尺寸更改时自动设置动画

安装：npm i -S @thalesrc/ng-utils @thalesrc/resize-manager

import { ResizeModule } from '@thalesrc/ng-utils/resize';

@NgModule({
  imports: [
    ResizeModule
  ],
})
export class YourModule { }

然后

<your-component thaAnimateResize duration="300"></your-component>

宽度更改后的Html大小调整内容（Anuglar4），如md-sidenav

2 个答案: