• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Properties
  2. Methods
    1. focusInner() => Promise<void>
  3. Shadow Parts
  4. Dependencies
    1. Depends on
    2. Graph
Components Sidenav Sidenav Toggle Outsid

ld-sidenav-toggle-outside #

The ld-sidenav-toggle-outside component is supposed to be used in combination with the ld-sidenav component.

Please refer to the ld-sidenav documentation for usage examples.

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
labelExpand label-expand Label to be used for the toggle button when navigation is collapsed. string 'Expand side navigation'
ldTabindex ld-tabindex Tab index of the toggle. number undefined
ref ref reference to component any undefined

Methods #

focusInner() => Promise<void> #

Sets focus on the radio button.

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"focusable"
"toggle"
"toggle-icon"

Dependencies #

Depends on #

  • ld-tooltip
  • ld-icon
  • ld-sr-only
  • ld-typo

Graph #

graph TD;
  ld-sidenav-toggle-outside --> ld-tooltip
  ld-sidenav-toggle-outside --> ld-icon
  ld-sidenav-toggle-outside --> ld-sr-only
  ld-sidenav-toggle-outside --> ld-typo
  ld-tooltip --> ld-sr-only
  ld-tooltip --> ld-tooltip-popper
  style ld-sidenav-toggle-outside fill:#f9f,stroke:#333,stroke-width:4px