突出显示导航窗格的选定项目

Question

参考 https://developer.microsoft.com/en-us/fabric#/controls/web/nav 下的示例 "Nav with nested links" ，点击导航项时，我想突出显示该项目。我已将 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'
                }
              ]
            }
          ]
        }
      ]}
    />
  );
};

Answer 1

使用 className 道具将额外的 CSS class 应用于导航，INavProps interface

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' }
    }
  },
...

突出显示导航窗格的选定项目

Highlight the selected item of a navigation pane

reactjs

office-ui-fabric

react-tsx