如何解决Quasar Expansion Item:如何为选定的子菜单赋予不同的颜色?
是否可以为扩展项目的选定项目设置高亮颜色?
<q-expansion-item
expand-separator
v-for="(menu,index) in menus"
:style="index === 0 && 'margin-top: 20px'"
:icon="menu.icon"
:label="menu.title"
:key="menu.id"
:expand-icon="menu.subMenus.length === 0 && 'none'"
>
<q-expansion-item
v-for="(sub,index) in menu.subMenus"
:label="sub"
expand-icon="none"
class="sub-content"
/>
</q-expansion-item>
解决方法
是的,你可以。
由于 quasar 在 HTML DOM 元素上提供了样式化的包装器,因此可以将自定义 CSS 应用于可以通过在 chrome 开发工具中进行检查来找到的类。
在您的情况下,类名是:.q-expansion-item--expanded
将此添加到组件 CSS:
.q-expansion-item--expanded {
border:1px solid #000000;
border-color: cyan;
background-color: cyan;
}
这将在项目展开时添加这些属性。 还有其他一些方法可以使用 JS 来解决这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。