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

Question

我目前在我的项目中使用 offcanvas 组件，但是我需要使面板比标准的 offcanvas 面板更宽。我希望它是 35% 的宽度。我曾尝试使用 panelClass NgbOffcanvasOptions 属性，但我似乎无法弄清楚它是如何工作的。如果有人可以帮助解释如何使用它或者可以想出更好的方法来解决它，那将有很大帮助。

这是我的 html 文件中 offcanvas 的代码：

<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 文件中用于 offcanvas 的内容：

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-horizo​​ntal-width 设置为所需的宽度。