是否可以更改画布面板的宽度？

Question

目前，我在我的项目中使用了脱画布组件，但是我需要使面板比标准的离开画布面板更宽。我希望它的宽度最好是35%。我尝试过使用panelClass NgbOffcanvasOptions属性，但我似乎不知道它是如何工作的。如果有人能帮助解释如何使用它，或者想出一个更好的方法来解决它，它会有很大的帮助。

下面是在我的html文件中，off画布的代码的样子：

<ng-template #content let-offcanvas class="off">
<div class="offcanvas-header">
  <button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
</div>
<div class="offcanvas-body">
    <p class="eyebrow-sm">Lorem ipsum dolor</p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor</p>
    <h1 class="heading-2">Lorem ipsum dolor</h1>
    <p class="body-lg-regular">Lorem ipsum dolor sit amet, 
        consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
</div>

下面是我在ts文件中为脱画布使用的内容：

export class NavbarComponent implements OnInit {

  closeResult = '';

  constructor(private offcanvasService: NgbOffcanvas) { }

  open(content: any) {
    this.offcanvasService.open(content, { position: 'end', panelClass: '' });
  }

  private getDismissReason(reason: any): string {
    if (reason === OffcanvasDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === OffcanvasDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on the backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  ngOnInit(): void {
  }

}

Answer 1

将引导变量$offcanvas-horizontal-width设置为所需的宽度。

Answer 2

在styles.css中添加这些更改

//This changes the width for all the offcanvas in the app
.offcanvas{
     width:50% !important;
}  

// If you are using multiple offcanvas in your app, add this
.offcanvas.offcanvas-{position}{
     width:50% !important;
}
//position refers to the position of the offcanvas i.e 'start'|'end'|'top'|'bottom'