Module "components/UISrefActive"

UISrefActive

• UISrefActive(__namedParameters: { children: any; className: string; classToApply: string; exact: Boolean }): Element

• A component that applies an 'active' class when a UISref component's state is active.

  If you are using functional components, consider using the useSrefActive hook instead.

  This component works together with <a href="_components_uisref_.html#uisref">UISref</a> child components. It adds an active class to its child element when any of its children <a href="_components_uisref_.html#uisref">UISref</a>'s state is active.

  This component can be used to highlight the active state in a navigation menu.

  <UISrefActive class="active-item">
    <UISref to="homestate"><a className="menu-item">Home</a></UISref>
  </UISrefActive>
  
  // rendered when state is inactive
  <a href="/path/to/homestate" class="menu-item">Home</a>
  
  // rendered when state is active
  <a href="/path/to/homestate" class="menu-item active-item">Home</a>

  Note: A UISrefActive will add the class if any child UISref is active. This can be used to highlight a parent nav item if any nested child nav items are active.

  <UISrefActive class="active">
    <div className="menu-item-dropdown">
      <span>Admin<span>
      <ul>
        <li><UISref to="users"><a className="menu-item">Users</a></UISref></li>
        <li><UISref to="groups"><a className="menu-item">Groups</a></UISref></li>
      </ul>
    </div>
  </UISrefActive>
  
  // rendered with either users or groups states are active
  <div className="active menu-item-dropdown">

  Parameters

  • __namedParameters: { children: any; className: string; classToApply: string; exact: Boolean }

    • children: any

    • className: string

    • classToApply: string

    • exact: Boolean

  Returns Element