sidebar 相关问题

有什么方法可以从 flowbite-react 侧边栏组件中的切换按钮中删除工具提示吗？

当侧边栏关闭并且您将鼠标悬停在侧边栏的任何项目上时，它会显示工具提示。 我不想在切换按钮上显示工具提示，因为它没有意义。 有什么办法可以让我...

如何使用 Blazor Bootstrap 创建新布局？

我想使用 Blazor Bootstrap 的侧边栏。 NewLayout.razor： @继承LayoutComponentBase 我想使用 Blazor Bootstrap 的侧边栏。 NewLayout.razor： @inherits LayoutComponentBase <div class="bb-page"> <Sidebar2 Href="/" IconName="IconName.BootstrapFill" Title="Blazor Bootstrap" BadgeText="v2.1.0" DataProvider="Sidebar2DataProvider" /> <main> <div class="bb-top-row px-4 d-flex justify-content-end"> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <article class="content px-4" style="position: relative;"> <div class="py-2"> @Body </div> </article> </main> </div> <style> .bb-page { display: flex; width: 100%; height: 100vh; } main { flex: 1; overflow: auto; min-width: 0; } </style> @code { IEnumerable<NavItem>? navItems; private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request) { if (navItems is null) navItems = GetNavItems(); return await Task.FromResult(request.ApplyTo(navItems)); } private IEnumerable<NavItem> GetNavItems() { navItems = new List<NavItem> { new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"}, new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" }, new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"}, new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" }, new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"}, new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"}, new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"}, new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"}, new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"}, new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" }, new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"}, new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"}, new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"}, new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"}, }; return navItems; } } 我想将其用作客户端页面上的新布局。但它一直向我展示 3 点加载的东西。(https://i.sstatic.net/Jp3jQFK2.png)。有一个关于它的问题链接但是服务器项目中的App.razor对我不起作用。 我想将其用作客户端页面上的新布局。我发现这个视频link2最接近我想做的事情，但它在服务器端运行页面。 为了创建“@layout NewLayout”，布局必须在客户端，但即便如此，我也无法将@rendermode InteractiveWebAssembly写入布局中。给出以下错误： “InvalidOperationException：无法将参数“Body”传递给渲染模式“InteractiveWebAssemblyRenderMode”的组件“NewLayout”。这是因为该参数的委托类型为“Microsoft.AspNetCore.Components.RenderFragment”，该类型是任意代码，无法序列化.” 根据您的另一个问题，您必须为您的项目设置InteractiveWebAssembly渲染模式 创建新项目时，选择如下： 并按照交互式服务器模式doc中的步骤操作 但是你必须在app.razor中将渲染模式保持为InteractiveWebAssembly 我建议您选择交互式位置作为全局的原因是导航项只会在 OnAfterRenderAsync 生命周期事件期间加载。 如果按照组件设置交互位置，页面将呈现为静态，并且不会触发 OnAfterRenderAsync 事件，侧边栏将继续加载 public class Sidebar : BlazorBootstrapComponentBase { private bool collapseNavMenu = true; private bool collapseSidebar; private bool isMobile; private IEnumerable<NavItem>? items; private DotNetObjectReference<Sidebar> objRef; private bool requestInProgress; protected override string? ClassNames => BlazorBootstrapComponentBase.BuildClassNames(base.Class, ("bb-sidebar", true), ("collapsed", collapseSidebar), ("expanded", !collapseSidebar)); protected override string? StyleNames => BlazorBootstrapComponentBase.BuildStyleNames(base.Style, ("--bb-sidebar-width: " + Width.ToString(CultureInfo.InvariantCulture) + WidthUnit.ToCssString() + ";", Width > 0f)); [Parameter] public string? BadgeText { get; set; } [Parameter] public string? CustomIconName { get; set; } [Parameter] [EditorRequired] public SidebarDataProviderDelegate? DataProvider { get; set; } [Parameter] public string? Href { get; set; } = string.Empty; [Parameter] public IconName IconName { get; set; } [Parameter] public string? ImageSrc { get; set; } private string? navMenuCssClass => GetNavMenuCssClass(); [Parameter] [EditorRequired] public string? Title { get; set; } [Parameter] public float Width { get; set; } = 270f; [Parameter] public Unit WidthUnit { get; set; } = Unit.Px; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await base.JSRuntime.InvokeVoidAsync("window.blazorBootstrap.sidebar.initialize", base.Id, objRef); bsWindowResize(await JSRuntimeExtensions.InvokeAsync<int>(base.JSRuntime, "window.blazorBootstrap.sidebar.windowSize", Array.Empty<object>())); await RefreshDataAsync(firstRender); } await base.OnAfterRenderAsync(firstRender); } protected override async Task OnInitializedAsync() { if (objRef == null) { objRef = DotNetObjectReference.Create(this); } if (base.AdditionalAttributes == null) { base.AdditionalAttributes = new Dictionary<string, object>(); } await base.OnInitializedAsync(); } [JSInvokable] public void bsWindowResize(int width) { if (width < 641) { isMobile = true; } else { isMobile = false; } } public async Task RefreshDataAsync(bool firstRender = false) { if (requestInProgress) { return; } requestInProgress = true; if (DataProvider != null) { SidebarDataProviderRequest request = new SidebarDataProviderRequest(); SidebarDataProviderResult sidebarDataProviderResult = await DataProvider(request); Sidebar sidebar = this; IEnumerable<NavItem>? enumerable2; if (sidebarDataProviderResult == null) { IEnumerable<NavItem> enumerable = new List<NavItem>(); enumerable2 = enumerable; } else { enumerable2 = sidebarDataProviderResult.Data; } sidebar.items = enumerable2; } requestInProgress = false; await InvokeAsync((Action)base.StateHasChanged); } public void ToggleSidebar() { collapseSidebar = !collapseSidebar; StateHasChanged(); } internal void HideNavMenuOnMobile() { if (isMobile && !collapseNavMenu) { collapseNavMenu = true; } } private string GetNavMenuCssClass() { HashSet<string> hashSet = new HashSet<string>(); if (collapseNavMenu) { hashSet.Add("collapse"); } hashSet.Add("bb-sidebar-content nav-scrollable bb-scrollbar"); if (collapseSidebar) { hashSet.Add("bb-scrollbar-hidden"); } return string.Join(" ", hashSet); } private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } protected override void BuildRenderTree(RenderTreeBuilder __builder) { TypeInference.CreateCascadingValue_0(__builder, 0, 1, __arg0: true, 2, this, 3, delegate (RenderTreeBuilder __builder2) { TypeInference.CreateCascadingValue_1(__builder2, 4, 5, collapseSidebar, 6, delegate (RenderTreeBuilder __builder3) { __builder3.OpenElement(7, "aside"); __builder3.AddAttribute(8, "id", base.Id); __builder3.AddAttribute(9, "class", ClassNames); __builder3.AddAttribute(10, "style", StyleNames); __builder3.AddAttribute(11, "role", "navigation"); __builder3.AddMultipleAttributes(12, RuntimeHelpers.TypeCheck((IEnumerable<KeyValuePair<string, object>>)base.AdditionalAttributes)); __builder3.AddAttribute(13, "b-h9l5f7lx3r"); __builder3.AddElementReferenceCapture(14, delegate (ElementReference __value) { base.Element = __value; }); __builder3.OpenElement(15, "div"); __builder3.AddAttribute(16, "class", "bb-sidebar-top-row navbar"); __builder3.AddAttribute(17, "b-h9l5f7lx3r"); __builder3.OpenElement(18, "div"); __builder3.AddAttribute(19, "class", "container-fluid ps-3"); __builder3.AddAttribute(20, "b-h9l5f7lx3r"); __builder3.OpenElement(21, "a"); __builder3.AddAttribute(22, "class", "navbar-brand d-flex align-items-center"); __builder3.AddAttribute(23, "href", Href); __builder3.AddAttribute(24, "b-h9l5f7lx3r"); if (!string.IsNullOrWhiteSpace(ImageSrc)) { __builder3.OpenElement(25, "span"); __builder3.AddAttribute(26, "class", "navbar-brand-image me-2"); __builder3.AddAttribute(27, "b-h9l5f7lx3r"); __builder3.OpenElement(28, "img"); __builder3.AddAttribute(29, "src", ImageSrc); __builder3.AddAttribute(30, "alt", Title); __builder3.AddAttribute(31, "b-h9l5f7lx3r"); __builder3.CloseElement(); __builder3.CloseElement(); } else { __builder3.OpenElement(32, "span"); __builder3.AddAttribute(33, "class", "navbar-brand-icon"); __builder3.AddAttribute(34, "b-h9l5f7lx3r"); __builder3.OpenComponent<Icon>(35); __builder3.AddComponentParameter(36, "Name", RuntimeHelpers.TypeCheck(IconName)); __builder3.AddComponentParameter(37, "CustomIconName", RuntimeHelpers.TypeCheck(CustomIconName)); __builder3.AddComponentParameter(38, "Class", "fs-4 me-2"); __builder3.CloseComponent(); __builder3.CloseElement(); } __builder3.OpenElement(39, "span"); __builder3.AddAttribute(40, "class", "navbar-brand-text fw-semibold expanded-only me-2"); __builder3.AddAttribute(41, "b-h9l5f7lx3r"); __builder3.AddContent(42, Title); __builder3.CloseElement(); if (!string.IsNullOrWhiteSpace(BadgeText)) { __builder3.OpenElement(43, "span"); __builder3.AddAttribute(44, "class", "navbar-brand-badge badge expanded-only"); __builder3.AddAttribute(45, "b-h9l5f7lx3r"); __builder3.AddContent(46, BadgeText); __builder3.CloseElement(); } __builder3.CloseElement(); __builder3.AddMarkupContent(47, "\r\n "); __builder3.OpenElement(48, "button"); __builder3.AddAttribute(49, "title", "Navigation menu"); __builder3.AddAttribute(50, "class", "navbar-toggler px-2"); __builder3.AddAttribute(51, "onclick", EventCallback.Factory.Create<MouseEventArgs>((object)this, (Action)ToggleNavMenu)); __builder3.AddAttribute(52, "b-h9l5f7lx3r"); __builder3.AddMarkupContent(53, "<span class=\"navbar-toggler-icon bi bi-list\" b-h9l5f7lx3r></span>"); __builder3.CloseElement(); __builder3.CloseElement(); __builder3.CloseElement(); __builder3.AddMarkupContent(54, "\r\n\r\n "); __builder3.OpenElement(55, "div"); __builder3.AddAttribute(56, "class", navMenuCssClass); __builder3.AddAttribute(57, "b-h9l5f7lx3r"); if (items == null) { __builder3.OpenElement(58, "div"); __builder3.AddAttribute(59, "class", "text-center my-2"); __builder3.AddAttribute(60, "b-h9l5f7lx3r"); __builder3.OpenComponent<Spinner>(61); __builder3.AddComponentParameter(62, "Type", RuntimeHelpers.TypeCheck(SpinnerType.Dots)); __builder3.AddComponentParameter(63, "Color", RuntimeHelpers.TypeCheck(SpinnerColor.Secondary)); __builder3.CloseComponent(); __builder3.CloseElement(); } else { __builder3.OpenComponent<SidebarItemGroup>(64); __builder3.AddComponentParameter(65, "NavItems", RuntimeHelpers.TypeCheck(items)); __builder3.CloseComponent(); } __builder3.CloseElement(); __builder3.CloseElement(); }); }); } }

有没有任何 WordPress 插件可以用来显示侧边栏的信息小部件？

对于我的 WordPress 博客，我正在寻找一些 WordPress 插件，使用它我可以将信息内容添加到左侧或右侧平移。我正在搜索的插件需要提供简码。我可以使用它

为侧边栏创建一个wordpress插件

我创建了一个简单的wordpress插件，我想将它添加到侧边栏。我可以使用侧边栏小部件来做到这一点。但我想将它作为插件插入。 我们可以添加一个插件来使用 the_c 发布内容...

顶部导航栏重叠侧边栏

工具： 下一个.js 顺风 沙德网络 我正在构建一个导航，它具有粘性顶部栏（shadcn 导航菜单）和侧边栏（shadcn 侧边栏），应延伸到顶部导航栏的底部。 不管怎么样...

如何在显示侧边栏时禁用背景并单击除侧边栏之外的任何位置将关闭侧边栏

我正在为我的网站制作侧边栏。 当我的侧边栏出现（单击 showRight）时，我想禁用背景内容，以便用户无法在菜单之外执行任何操作。 当用户点击...

我想使用 HTML、CSS 和 Tailwind CSS 设计一个右侧顶部和底部边缘带有凹圆角的侧边栏？

我正在设计一个侧边栏，其中活动项目的右上角和右下角应有凹曲线。我使用 Tailwind CSS 进行样式设置，我最初尝试设置 borderTopRight...

侧边栏面板的垂直滚动

我想锁定侧边栏，以便当我向下滚动主面板时它始终存在，我通过添加以下内容实现了这一目标： style = "位置：固定；宽度：25%", 在侧边栏面板之后。 哈...

如何在SharePoint中隐藏侧边栏菜单？

这个菜单 你好， 我需要在 SharePoint 中隐藏此菜单，有什么办法可以做到吗？ 这样做的原因是为了使演示文稿“儿童安全”并尽可能限制用户访问。我想要...

利用 Bootstrap5 示例固定左侧边栏

我正在尝试按照 Bootstrap 5 侧边栏示例创建一个固定的左侧边栏，并且我几乎已正确设置所有内容。我的要求是： 侧边栏需要修复 主要内容需要...

AgGrid - autoGroupColumn 在工具面板侧边栏中不可见

使用 autoGroupColumnDef 创建的组列不会出现在工具面板中是否有原因？我的配置好像是对的我正在创建一个简单的侧边栏，它将显示 2 列 - ...

动画侧边栏问题

我正在尝试使用reactjs创建一个动画侧边栏，就像这里一样。 功能性 通常侧边栏仅显示侧边栏宽度较窄的图标。 悬停时，侧边栏会展开并显示

为什么要在filament v3.2中渲染侧边栏上的视图？

我需要在侧边栏的页脚中渲染一个视图（或直接渲染一个小部件“account-widget”）。 但它不起作用。 当我插入一个字符串时它的工作...... 这是我的代码： 我需要在侧边栏的页脚中渲染一个视图（或直接渲染一个小部件“account-widget”）。 但它不起作用。 当我插入一个字符串时它的工作... 这是我的代码： <?php namespace App\Providers\Filament; use Filament\Http\Middleware\Authenticate; use Filament\Http\Middleware\DisableBladeIconComponents; use Filament\Http\Middleware\DispatchServingFilamentEvent; use Filament\Pages; use Filament\Panel; use Filament\PanelProvider; use Filament\Support\Colors\Color; use Filament\Widgets; use Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse; use Illuminate\Cookie\Middleware\EncryptCookies; use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken; use Illuminate\Routing\Middleware\SubstituteBindings; use Illuminate\Session\Middleware\AuthenticateSession; use Illuminate\Session\Middleware\StartSession; use Illuminate\View\Middleware\ShareErrorsFromSession; use Filament\Support\Facades\FilamentView; use Filament\View\PanelsRenderHook; use Illuminate\Contracts\View\View; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->default() ->brandLogo(asset('img/pax_life.png')) ->sidebarFullyCollapsibleOnDesktop() ->id('admin') ->path('admin') ->login() ->colors([ 'primary' => Color::Teal, ]) ->renderHook( PanelsRenderHook::SIDEBAR_FOOTER, //fn (): View => view('filament.comp.account-user') // View not work fn (): string => ('USER LOGIN/LOGOUT') // work fine ) ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources') ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages') ->pages([ Pages\Dashboard::class, ]) ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets') ->widgets([ Widgets\AccountWidget::class, Widgets\FilamentInfoWidget::class, ]) ->middleware([ EncryptCookies::class, AddQueuedCookiesToResponse::class, StartSession::class, AuthenticateSession::class, ShareErrorsFromSession::class, VerifyCsrfToken::class, SubstituteBindings::class, DisableBladeIconComponents::class, DispatchServingFilamentEvent::class, ]) ->authMiddleware([ Authenticate::class, ]) ->plugins([ \BezhanSalleh\FilamentShield\FilamentShieldPlugin::make() ]); } } 视图“filament.comp.account-user”是一个简单的测试 这会返回错误：“不在对象上下文中时使用 $this” 我想尝试几天，但在官方文档中找不到任何帮助...... 请帮助我... 如果你只是想显示小部件，你可以这样做。 -> 只需将所需的小部件添加到您案例中的刀片文件中filament.comp.account-user（您可以创建新的刀片文件并将小部件添加到该视图），如下所示： <div> @livewire(\App\Filament\Widgets\UserChart::class) </div> 用于将小部件添加到刀片的文档链接 -> 现在只需将您的 AdminPanelProvider 代码更改为： ->renderHook( PanelsRenderHook::SIDEBAR_FOOTER, fn (): View => view('filament.comp.account-user') ) -> 这应该可以完成工作，如果出现任何错误，请立即告诉我。

如何为FilamentPHP面板侧边栏添加实线右边框？ [已关闭]

我目前正在开发一个使用 FilamentPHP 作为默认面板的项目。我想在默认侧边栏菜单上添加纯黑色右边框。

如何为侧边栏预留空间以解决CLS（累积班次布局）问题？

实时预览以获得更好的分析：https://premiumerblogger.blogspot.com/2024/07/vegas-pro-plugins-that-you-need-to-know.html 你好呀， 我一直在尝试修复这个 CLS（累积布局偏移）...

网格布局中是否可以有粘性侧边栏？

我定义了一个基本的 CSS 网格布局，其中包括标题、侧边栏和内容部分。我现在的目标是让侧边栏固定下来，同时允许内容溢出页面的其余部分......

如何在灯丝导航中放置一条线或分隔符？

我如何放置或显示存在分离以便可以看到？ 灯丝演示 (https://i.sstatic.net/F0pf1B5V.png) 我正在寻找一种方式来展示这种分离，或者如何表达它，我......

在shinydashboard侧边栏中直接输入元素

我想知道是否可以修改以下闪亮的应用程序并将 sliderInput 放入侧边栏部分： 图书馆（闪亮的仪表板） 用户界面 <- dashboardPage( dashboardHeader(title = "DB mana...

如何在 SwiftUI 中自定义带有标题的 NavigationSplitView

我正在尝试在 SwiftUI 中创建一个可自定义的 NavigationSplitView，其带有标题和完全可自定义的侧边栏，类似于此侧边栏示例中所示的内容： 问题 我正在努力重现...

如何使用 SwiftUI 在 macOS 上获得侧边栏中的放置目标背景效果？

我有一个 SwiftUI 列表，它是 macOS 上的侧边栏。对于它的项目，我添加了 dropDestination 修饰符，如下所示： .dropDestination(for: URL.self) { urls, _ in 对于 url 中的 url { /...