sidebar 相关问题

将 Leaflet 图层控件添加到侧边栏

我正在使用 Leaflet 侧边栏 V2 插件，想知道是否可以将传单层控制菜单放入侧边栏？任何帮助是极大的赞赏！谢谢！

li 元素中较长的标签继续换行到下一行

所以我很难将项目保持在 LI 元素内联。 每个都由一个 svg 符号、一个复选框和一个文本标签组成。 当标签太长时，文本换行到下一行。 我试过了

在 openlayers 侧边栏中导入 childComp

我正在尝试实现这个基本的子组件（ChildComp.vue）： 子组件！ 进入 openlayers Map.vue 脚本： 我正在尝试实现这个基本的子组件（ChildComp.vue）： <template> <h2>A Child Component!</h2> </template> 进入 openlayers Map.vue 脚本： <template> <div id="map"></div> </template> <script> import { SidePanel } from 'ol-side-panel'; import { Map, View } from 'ol'; import { Tile as TileLayer } from 'ol/layer'; import { OSM } from 'ol/source'; import ChildComp from './ChildComp.vue' export default { components: { ChildComp }, name: 'Map', mounted() { this.map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }) ], view: new View({ center: [0, 0], zoom: 2 }) }) let sidePanel = new SidePanel(); this.map.addControl(sidePanel); let layersPane = sidePanel.definePane({ paneId: 'layers', name: "Layers", icon: '<i class="fg-regular-shape-pt"></i>' }); layersPane.addWidgetElement(this.ChildComp) } } </script> <style> .ol-side-panel-tabs, .ol-side-panel-tabs > button, .ol-side-panel-tabs > button.active { color: #8A1946; background-color: #f9f6ed; } .ol-side-panel-tabs > button:hover { color:#f9f6ed; background-color: #8A1946; } .ol-side-panel-content { background-color:#f9f6ed ; } .ol-side-panel-close:hover { color: #8A1946; } </style> 我不能使用 vue 函数，因为它不是 vue 模块，所以我尝试使用这一行来实现 childComponent：layersPane.addWidgetElement(this.ChildComp) 但它给了我以下错误：“未捕获的类型错误：无法在‘节点’上执行‘appendChild’ : 参数 1 不是“节点”类型。” 关于如何纠正它的任何想法？ 在您的代码中，您尝试使用 layersPane.addWidgetElement(this.ChildComp) 将 ChildComp 组件添加到 layersPane。然而，这是不正确的，因为 this.ChildComp 不是一个实际的元素，而是一个 Vue 组件。 要将 Vue 组件添加到 DOM，可以使用 Vue.extend 方法创建该组件的新 Vue 实例，然后将其挂载到 DOM 元素。以下是如何修改代码以实现此目的的示例： import Vue from 'vue'; // import Vue // define the ChildComp as a new Vue component const ChildComp = Vue.extend({ template: '<h2>A Child Component!</h2>' }); export default { name: 'Map', mounted() { // ... layersPane.addWidgetElement(new ChildComp().$mount().$el); // create a new instance of ChildComp and mount it to a DOM element } } 在此修改后的代码中，您将使用 Vue.extend 创建一个新的 Vue 组件，然后使用 new ChildComp() 创建该组件的一个新实例。然后，您使用 $mount 将此实例安装到新创建的 DOM 元素，并将生成的 DOM 元素传递给 addWidgetElement。 这应该允许您将 ChildComp 组件添加到 OpenLayers 侧边栏。

Flutter - 如何使用嵌套路由实现持久侧边栏？

我正在尝试在 flutter web 中实现持久菜单（侧边栏）。只要应用程序中的所有页面都直接列为菜单项，我就可以实现。 问题是我无法获得嵌套的...

在 Visual Studio 2022 的左侧边栏中恢复工具箱

我知道怎么打开工具箱，谢谢。我喜欢将它放在左侧（垂直）侧边栏中，但我不小心将其删除了。我找不到恢复它的方法。请帮助。

bootstrap 搜索网站的样式和界面问题

在过去的几天里，我一直在尝试使用 bootstrap、php、html、css 和 js 为网站编写搜索界面。我制作了一个可在移动设备上折叠的功能性顶栏，...

边栏更新时重置 SwiftUI 导航

更改侧边栏中的状态将重置导航 我希望将我保存的数据用作侧边栏中的选择，但是当我尝试将数据添加到核心数据时，侧边栏将重置状态并将我带回...

使用 Tailwind CSS、React-Pro-sidebar、React-tooltip 使 Tooltip 组件显示在 SideBar Nav 之外

我有一个用 Tailwind CSS 制作的边栏，React-Pro-sidebar。我在边栏中有一些项目，我希望项目的图像具有工具提示。我正在为工具提示使用 react-tooltip 和...

如何在 CSS 中为 CSS 侧边栏打开和关闭设置动画？

我有一个使用 css display: flex 制作的侧边栏；和一个将侧边栏显示设置为显示的按钮：无；。目前侧边栏关闭并立即打开，没有动画。什么我

dashboardBody 在使用条件面板时不显示

我正在构建一个闪亮的应用程序。当我在 sideBar 菜单中包含一个 conditionalPanel 时，我不再在 Dashboard 正文中看到任何内容。 这是我的代码： 图书馆（闪亮） 图书馆（闪亮的仪表板） 用户界面<-

Jquery 移动面板中的两个滚动条？

有没有办法消除在我的页面打开面板时出现的第二个滚动条？当面板的内容超出视口的高度时会出现此问题。 理想情况下，我会...

出现错误。无法读取未定义的属性（读取“地图”）

我无法更新我的 Wordpress 网站上的侧边栏（外观 > 小部件）。每次尝试时，我都会收到消息： “有一个错误。无法读取未定义的属性（读取'...

编辑器侧边栏中的 Android Studio 图像预览图标

在 Android Studio 的边栏编辑器中，我有小的图像预览图标， 但有时我的图像很长但很低，所以它们占了屏幕尺寸的 3/4。 如何关闭预览？

blazor 下拉菜单不会将其余项目向下推

我在 blazor 中创建了一个应用程序，下拉菜单有效，但它不会将其余项目向下推我该如何解决这个问题？这是我的代码 我在 blazor 中创建了一个应用程序，下拉菜单可以工作，但它不会将其余项目向下推，我该如何解决这个问题？这是我的代码 <div class="container-fluid"> <a class="navbar-brand" href=""><img src="/img/Boxplosive-logo.png" class="logoimg" /></a> <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> <nav class="flex-column"> <div class="nav-item px-3"> <NavLink class="nav-link" href="index"> <span class="oi oi-home" aria-hidden="true"></span> Dashboard </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-toggle" href="promotion" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <span class="oi oi-home" aria-hidden="true" href="#"></span> Create </NavLink> <ul class="dropdown-menu "> <NavLink><a class="dropdown-item" href="promotion">Promotion</a></NavLink> <NavLink><a class="dropdown-item" href="#">Loyalty</a></NavLink> <NavLink><a class="dropdown-item" href="#">News Article</a></NavLink> </ul> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="publish"> <span class="oi oi-cloud-upload" aria-hidden="true"></span> Publish </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="analyse"> <span class="oi oi-graph" aria-hidden="true"></span> Analyse </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="managment"> <span class="oi oi-cog" aria-hidden="true"></span> Managment </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="configuration"> <span class="oi oi-list" aria-hidden="true"></span> Configuration </NavLink> </div> </nav> <nav class="sidebar-footer"> <div class="nav-item px-3"> <NavLink class="nav-link" href="fetchdata"> <span class="oi oi-person" aria-hidden="true"></span> Admin </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link" href="help"> <span class="oi oi-question-mark" aria-hidden="true"></span> Help </NavLink> <button class="logoutbtn">Logout</button> </div> </nav> </div> @code { private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } private bool expandSubNav; } 我希望他在我单击它时下拉并向下推其他项目我尝试了其他确实将其他项目向下推的代码但它不会指示我在哪个页面上，我想保留这两个功能 您可以从这里开始，然后使用 css 类和样式进行自定义。 <div class="nav-item px-3"> <a class="nav-link dropdown-toggle" href="#" @onclick="ToggleSubNavMenu" @onclick:preventDefault> <span class="oi oi-home" aria-hidden="true"></span> Create </a> @if (expandSubNav) { <NavLink class="nav-link" href="promotion"> <span class="oi oi-home" aria-hidden="true"></span> Promotion </NavLink> <NavLink class="nav-link" href="loyalty"> <span class="oi oi-home" aria-hidden="true"></span> Loyalty </NavLink> <NavLink class="nav-link" href="newsarticle"> <span class="oi oi-home" aria-hidden="true"></span> News Article </NavLink> } </div> @code { private bool expandSubNav = false; private void ToggleSubNavMenu() { expandSubNav = !expandSubNav; } }

如何使用 selenium-java 点击 google-maps 结果？

我想单击左侧的 googlemaps 结果（边栏链接文本）。我只能用 xpath 或 cssSelector 方法点击第一个结果 ChromeOptions 选项=新

metrical dashboard set sidebar auto open active by take current url and checking href using javascript

https://github.com/swapan730/metrical 这是我使用的仪表板 我需要在此仪表板的侧边栏中使用 javascript，以在页面加载期间检查页面 url 并自动将其设置为活动状态，...

How to set active state on a menu tree with 2 child arrays vue 3?

我有一个带有 NavBarItem 组件的边栏，它接收一个 navItem 对象作为道具，我想在单击链接时将活动状态更改为 true。 导航栏.vue 我有一个带有 NavBarItem 组件的侧边栏，它接收一个 navItem 对象作为道具，我想在单击链接时将活动状态更改为 true。 导航栏.vue <template> <nav class="mt-2 px-2"> <NavBarItem @click="setActiveLink(item, _index)" :item="item" v-for="(item, _index) in navItems" :key="item.label" /> </nav> </template> <script setup> const setActiveLink = (el, i) => { // 🤬🤯 } const navItems = [ { href: '#', active: false, label: 'VehicleBuild', icon: vehicleTruckCube, children: [ { href: '/vehicle-packages', active: false, label: 'Paket', icon: CubeIcon, children: [], }, ], }] </script> NavBarItem.vue <script setup> import { RouterLink } from 'vue-router' import { computed } from 'vue' import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue' import { ChevronDownIcon } from '@heroicons/vue/24/outline' const props = defineProps({ item: Object, }) const hasActiveChild = computed(() => { function hasActiveItem(items) { return items.some(item => item.active || hasActiveItem(item.children)) } return hasActiveItem(props.item.children) }) const emit = defineEmits(['click']) </script> <template> <RouterLink v-if="!item.children.length" :class="[ 'group flex w-full items-center rounded-md py-2 px-3 text-sm', 'hover:bg-gray-100', item.active ? 'text-gray-800 font-semibold' : 'text-gray-600 font-medium', ]" :to="item.href" @click="emit('click', $event)" > <component :class="[ 'w-6 h-6 shrink-0 mr-2 group-hover:text-gray-600', item.active ? 'text-gray-600' : 'text-gray-400', ]" :is="item.icon" v-if="item.icon" ></component> <span>{{ item.label }}</span> </RouterLink> <Disclosure v-else v-slot="{ open }" :default-open="hasActiveChild"> <DisclosureButton :class="[ 'group flex w-full text-left items-center rounded-md py-2 px-3 text-sm', 'hover:bg-gray-100', open ? 'font-semibold text-gray-800' : 'font-medium text-gray-600', ]" > <component :class="[ 'w-6 h-6 shrink-0 mr-2 group-hover:text-gray-600', open ? 'text-gray-600' : 'text-gray-400', ]" :is="item.icon" v-if="item.icon" ></component> <span class="flex-1">{{ item.label }}</span> <ChevronDownIcon :class="['w-4 h-4 shrink-0', open ? '-rotate-180 text-gray-600' : 'text-gray-400']" /> </DisclosureButton> <DisclosurePanel class="ml-4"> <NavBarItem v-for="(child, index) in item.children" :item="child" :key="index" @click="emit('click', $event)" /> </DisclosurePanel> </Disclosure> </template> 我试图映射我从 navBarItem 中的发射返回的项目，但没有成功，有人可以帮我吗？ 您在安装navItems后对<Navbar />执行的任何突变都不会触发<template />中的更新，因为数组不是反应性的。 要为其添加反应性，请将其包裹在ref()： const navItems = ref([ /* items here */ ]) 在您的setActiveLink方法中相应地更新navItems.value，您将看到模板相应地更新。 文档这里. 重要说明：仅当您想要单独处理每个项目的活动状态时（例如：您希望一次能够拥有多个活动项目），将活动属性存储在每个项目中才有意义。如果 active 状态是互斥的（例如：制作一个项目 active 意味着前一个不再处于活动状态），您 不应该 将活动状态存储在每个项目中。 相反，您设置一个状态变量来保存当前活动项目的id。每个项目的isActive属性是一个computed，它将项目的id与状态变量的值进行比较。显然，当将状态变量设置为不同的 id 时，旧的活动项变为非活动状态，因为它的 id 不再等于状态变量的值。

如何旋转svg并将其放置在屏幕的左侧？

我的svg波浪有问题，我需要将它旋转90deg，并使它在侧边div上的屏幕全高。如果它试图转换旋转90deg，它变得非常小，我似乎不能得到......

如何在drupal 8上创建一个bootstrap手风琴菜单？

你好，我试图在Drupal 8上建立一个手风琴菜单，但需要一点帮助，如何为动态菜单写出正确的结构和正确的数据目标。我已经尝试过...

如何实现每次点击都不打开一个新的侧边栏？

我想有一个侧栏，它应该打开一个新的视图，但我不希望打开一个新的页面。我的侧栏总是一样的，我不想把它复制到所有其他页面。如果你想要一个例子，请点击...