reactjs - 突出显示导航窗格的选定项目
问题描述
参考https://developer.microsoft.com/en-us/fabric#/controls/web/nav下的示例“带有嵌套链接的导航”,单击导航项目时,我想突出显示该项目。我已将 url 设置为 ' ',以便单击某个项目不会执行任何操作。但是,我希望在点击时突出显示该项目。我该怎么做呢?任何指针都会有所帮助。
import * as React from 'react';
import { Nav,INavStyles } from 'office-ui-fabric-react/lib/Nav';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();
const navStyles: INavStyles = {
root:{
boxSizing: 'border-box',
border: '1px solid lightgrey',
overflowY: 'auto',
height: 300
},
chevronButton: {
height: 30
},
chevronIcon:{
height: 30,
lineHeight: 30
},
compositeLink: {},
group:{},
groupContent: {},
link: {},
linkText:{},
navItem:{},
navItems:{
margin: 0
},
};
export const NavNestedExample1: React.FunctionComponent = () => {
return (
<Nav
styles={navStyles}
ariaLabel="Nav example with nested links"
groups={[
{
links: [
{
name: 'Parent link 1',
url: '',
target: '_blank',
expandAriaLabel: 'Expand Parent link 1',
collapseAriaLabel: 'Collapse Parent link 1',
links: [
{
name: 'Child link 1',
url: '',
target: '_blank'
},
{
name: 'Child link 2',
url: '',
target: '_blank',
expandAriaLabel: 'Expand Child link 2',
collapseAriaLabel: 'Collapse Child link 2',
links: [
{
name: '3rd level link 1',
url: '',
target: '_blank'
},
{
name: '3rd level link 2',
url: '',
target: '_blank'
}
]
},
{
name: 'Child link 3',
url: '',
target: '_blank'
}
]
},
{
name: 'Parent link 2',
url: '',
target: '_blank',
expandAriaLabel: 'Expand Parent link 2',
collapseAriaLabel: 'Collapse Parent link 2',
links: [
{
name: 'Child link 4',
url: '',
target: '_blank'
}
]
}
]
}
]}
/>
);
};
解决方案
使用className
props 将额外的 CSS 类应用到 Nav、INavProps 接口
export const App: React.FunctionComponent = () => {
return (
<Nav
className='nav' //here
ariaLabel="Nav example with nested links"
groups={[
....
//App.css
.nav :focus{
color: brown;
background-color: darksalmon ;
}
.nav :hover{
color: .....;
background-color: ......;
}
.nav :active{
color: .....;
background-color: ......;
}
INavStyles
和
_selectors
const navStyles: INavStyles = {
root: {
boxSizing: 'border-box',
border: '1px solid lightgrey',
overflowY: 'auto',
height: 300
},
linkText: {
color: 'green',
selectors: { '&:hover': { color: 'red' } }
},
compositeLink: {
selectors: {
'&:active ,&:focus-within': { backgroundColor: 'orange' }
}
},
...
推荐阅读
- arrays - 尝试添加到数组时 C 命令行参数中的分段错误
- kubernetes - 使用 CDK EKS 的私有 Helm 存储库
- c++ - 对于我的 for 循环,我在“=”之前收到错误预期的主表达式
- javascript - 如何访问数组内的对象属性?
- authentication - 有没有办法知道Keycloak的用户账户管理页面是从客户端打开的?
- azure - 无法在 PowerApps 中将自定义 API 添加为自定义连接器
- sql - 根据sql中的字段值乘以字段
- c# - 使用 HttpClient 下载 CSV 文件并使用 CsvHelper onfly 处理
- debugging - 使用 Blazor 调试断点后出现脚本窗口
- php - 如何使用 PHP cURL 使用 OAuth2