Выделите выбранный элемент на панели навигации

Ссылаясь на пример «Навигация с вложенными ссылками» в разделе 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'
                }
              ]
            }
          ]
        }
      ]}
    />
  );
};

reactjs office-ui-fabric react-tsx
person Putta    schedule 22.01.2020    source источник
comment
вы можете предоставить код?   -  person Jatin Parmar    schedule 22.01.2020
comment
Код добавлен в основной поток.   -  person Putta    schedule 22.01.2020
comment
Я никогда не работал с этой библиотекой, но при нажатии на элемент, вероятно, запускается событие, согласно doc, вы должны оставить selectedKey в состоянии   -  person Amir-Mousavi    schedule 22.01.2020

Ответы (1)


arrow_upward
4
arrow_downward

Используйте 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' }
    }
  },
...
person Alex    schedule 22.01.2020
comment
Это решает эту проблему. Но я больше искал использование атрибута «стили» типа INavStyles. В моем компоненте Nav уже определены стили, и я хочу обработать это выделение в самих стилях, а не добавлять атрибут className. Спасибо за ваш вклад, Алекс. - person Putta; 22.01.2020
comment
Я отредактировал код и теперь использую свойство стилей компонента Nav. - person Putta; 23.01.2020
comment
это просто меняет цвет текста с зеленого на красный при наведении курсора на элемент навигации. Я ищу ... когда я нажимаю на элемент, скажем, "Дочерняя ссылка1", этот элемент должен оставаться выделенным (в основном меняет цвет фона). В настоящее время, когда вы наводите курсор на элемент, мы можем видеть изменение цвета фона для каждого элемента. Я хочу выделить элемент, по которому в данный момент щелкнули мышью. - person Putta; 23.01.2020
comment
What I am looking for is... when I click on an item say "Child link1" он отличается от вашего вопроса, поэтому я попросил создать новый. для выделения элемента, по которому в данный момент щелкнули мышью, вы можете использовать compositeLink, как я показал в обновленном. Также вы можете попробовать с другими, такими как _3 _, _ 4_, _5 _, ... для достижения разных стилей. удачи. - person Alex; 23.01.2020
comment
Спасибо, Алекс. Попытаюсь. - person Putta; 23.01.2020