sidebar 相关问题

侧边栏标签用于与向应用程序一侧显示或呈现信息相关的问题。

如何使展开的部分与其他部分达到相同的高度？

我正在尝试制作一个带有扩展项目列表的 html css 页面。我需要扩展部分也与 Figma 设计图像具有相同的垂直位置身体 { 玛...

javascript html css frontend sidebar

回答 1 投票 0

coreui - 如何在侧边栏的页脚 (CSidebarFooter) 正确创建注销链接（带图标）？（在 React 中）折叠/展开问题

在React的coreui中，如何在侧边栏的页脚正确创建注销链接（带图标）？（在 React 中）我希望当侧边栏展开时，它应该有图标和文本。当 b 面时...

javascript css reactjs sidebar core-ui

回答 1 投票 0

为侧边栏导航进行简单的 Turbostream 更新而苦苦挣扎

涡轮触发链接只是刷新我的用户显示视图的页面。我尝试了turbo_stream.replace和turbo_stream.update也指向框架rightmaincontent，但发生的只是

ruby-on-rails sidebar turbo

回答 1 投票 0

PrimeNG 侧边栏可清除 primeng 消息。为什么？

在我的 app.component.html 中我有 ... 在我的 app.component.html 中我有 <div class="main"> <button type="button" (click)="onShowNotificationSideBar()" label="Show"></button> <p-sidebar [(visible)]="notificationSideBarVisible" position="right" [style]="{width:'50em'}"> <button type="button" pButton pRipple (click)="showSuccess()" label="S" class="p-button-success"></button> <button type="button" pButton pRipple (click)="showWarn()" label="W" class="p-button-warning"></button> <button type="button" pButton pRipple (click)="showError()" label="E" class="p-button-danger"></button> <h3>Messages</h3> <h5>{{messages}}</h5> <p-messages [(value)]="messages" [enableService]="false" ></p-messages> </p-sidebar> <p-toast position="center"></p-toast> <router-outlet></router-outlet> </div> 在 app.component.ts 中我有 import { Component } from '@angular/core'; import { Message, MessageService } from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], providers: [MessageService] }) export class AppComponent { title = 'WECO'; notificationSideBarVisible = false; constructor(private messageService: MessageService) { messageService.messageObserver.subscribe((m:Message | Message[])=>{ if (!Array.isArray(m)){ this.messages.push(m) } this.messages = [...this.messages]; }); } onShowNotificationSideBar(){ this.notificationSideBarVisible=true; } count=0; messages : Message[] = [ // { severity: 'success', summary: 'Success', detail: 'Message Content' }, // { severity: 'info', summary: 'Info', detail: 'Message Content' }, // { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, // { severity: 'error', summary: 'Error', detail: 'Message Content' } ]; longSentence = 'Let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons';//'And let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons (except for a few examples like Jose Saramago). But whether the sentence is grammatically correct isn’t nearly as important as whether the sentence is fun or beautiful.' showWarn(){ let detail='User Deleted a Weco Rule'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'warn', summary:'User Action', detail: detail}); } showSuccess(){ let detail = 'Weco Rule 123 Saved'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'success', summary:'Service Call', detail:detail}); } showError(){ let detail = 'api-call:get-factories returned 404'; if (this.count++%5===0) detail = this.longSentence; this.messageService.add({severity:'error', summary:'Service Call', detail:detail}); } } 如果我打开侧边栏并在其中添加一些消息，它们就会出现，但是当我关闭并重新打开时，它们就会消失。即使我可以看到 messages 变量仍然有它们。为什么？附：如果我添加更多消息，我只会看到新消息。侧边栏菜单有一个名为 p-messages 的组件，如果您检查该元素，您会发现关闭时 p-sidebar 的内容会被破坏。当您重新打开侧边栏时，数据保持不变，但消息会被破坏。我认为 p-messages 组件只会显示数组引用发生变化，这可能是由于组件内部的 *ngFor 带有 trackBy，所以我们需要重置内存中的每个数组元素引用，以便我们欺骗 p-messages 认为列表中有新消息，为此我们可以使用对象解构！我会在侧边栏打开时执行此操作(onShowNotificationSideBar) onShowNotificationSideBar() { this.notificationSideBarVisible = true; this.messages = [...this.messages.map(x => ({...x}))]; // <- creates new references for the array and its contents! } 完整代码 import { Component } from '@angular/core'; import { Message, MessageService } from 'primeng/api'; @Component({ selector: 'sidebar-basic-demo', templateUrl: './sidebar-basic-demo.html', providers: [MessageService], }) export class SidebarBasicDemo { title = 'WECO'; notificationSideBarVisible = false; constructor(private messageService: MessageService) { messageService.messageObserver.subscribe((m: Message | Message[]) => { if (!Array.isArray(m)) { this.messages.push(m); } this.messages = [...this.messages]; }); } onShowNotificationSideBar() { this.notificationSideBarVisible = true; this.messages = [...this.messages.map(x => ({...x}))]; } count = 0; messages: Message[] = [ // { severity: 'success', summary: 'Success', detail: 'Message Content' }, // { severity: 'info', summary: 'Info', detail: 'Message Content' }, // { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, // { severity: 'error', summary: 'Error', detail: 'Message Content' } ]; longSentence = 'Let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons'; //'And let’s end all this nonsense about how long sentences = run-on sentences. You can have a six-word run-on sentence (“I went shopping I ate donuts.”), while most of the sentences below are much, much longer than that and are not run-ons (except for a few examples like Jose Saramago). But whether the sentence is grammatically correct isn’t nearly as important as whether the sentence is fun or beautiful.' showWarn() { let detail = 'User Deleted a Weco Rule'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'warn', summary: 'User Action', detail: detail, }); } showSuccess() { let detail = 'Weco Rule 123 Saved'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'success', summary: 'Service Call', detail: detail, }); } showError() { let detail = 'api-call:get-factories returned 404'; if (this.count++ % 5 === 0) detail = this.longSentence; this.messageService.add({ severity: 'error', summary: 'Service Call', detail: detail, }); } } html <div class="main"> <button type="button" (click)="onShowNotificationSideBar()" label="Show"> show sidebar </button> <p-sidebar [(visible)]="notificationSideBarVisible" position="right" [style]="{width:'50em'}" > <button type="button" pButton pRipple (click)="showSuccess()" label="S" class="p-button-success" > success </button> <button type="button" pButton pRipple (click)="showWarn()" label="W" class="p-button-warning" > warn </button> <button type="button" pButton pRipple (click)="showError()" label="E" class="p-button-danger" > error </button> <h3>Messages</h3> <h5>{{messages}}</h5> <p-messages [(value)]="messages" [enableService]="false"></p-messages> </p-sidebar> <p-toast position="center"></p-toast> </div> Stackblitz 演示

angular primeng message sidebar

回答 1 投票 0

响应式布局中的全高侧边栏

我正在尝试创建一个带有全高侧边栏的响应式布局。在桌面上，侧边栏应浮动在主要内容的左侧，在平板电脑/移动设备上，侧边栏应与主要内容重叠...

html css layout responsive-design sidebar

回答 2 投票 0

将元素定位到高度的底部：100% div

我想将一个按钮“固定”到高度为 100% 的侧边栏 div 的底部，因为它应该填充页面的整个左侧。我尝试这样做： .侧边栏{ 高度：10...

html css sidebar

回答 3 投票 0

Offcanvas 组件不起作用，内容不显示

希望你一切都好！我有一个挑战要给你:)。我正在尝试在我的 Angular 项目中实现 Offcanvas 组件，它看起来可以工作，但是当我激活该组件时仅显示阴影