• 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. Events
  3. Methods
    1. focusInner() => Promise<void>
    2. select() => Promise<void>
  4. Shadow Parts
Components Tabs Tab

ld-tab #

The ld-tab component is a subcomponent for ld-tabs.

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

Properties #

Property Attribute Description Type Default
disabled disabled Disables the tab. boolean undefined
key key for tracking the node's identity when working with lists string | number undefined
ldTabindex ld-tabindex Tab index of the tab. number undefined
ref ref reference to component any undefined
selected selected If present, this boolean attribute indicates that the tab is selected. boolean undefined

Events #

Event Description Type
ldtabselect Emitted with the id of the selected tab. CustomEvent<undefined>

Methods #

focusInner() => Promise<void> #

Focuses the tab

Returns #

Type: Promise<void>

select() => Promise<void> #

Set selected tab to a certain index

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"button" Actual button element
"content" Element wrapping the slot
"focusable"
"spacer" Both spacer elements
"spacer-left" Left spacer element
"spacer-right" Right spacer element