Skip to content

Add Vertical mode in TabSheet #338

Description

@TatuLund

With Hilla/Lit and old version of Hilla/React API it was possible to use TabSheet in vertical mode.

With new Hilla/React API you need to use ref to achieve this, see example below

import { TabSheet, TabSheetTab } from '@vaadin/react-components/TabSheet.js';

export default function TabSheetView() {

  return (
    <TabSheet
      className="flex-row"
      ref={(element) => {
        setTimeout(() => {
          element?.querySelector('vaadin-tabs')?.setAttribute('orientation', 'vertical');
        }, 100);
      }}
    >
      <TabSheetTab label="Hello" id="hello-tab">
        <div>Hello</div>
      </TabSheetTab>
      <TabSheetTab label="World" id="world-tab">
        <div>World</div>
      </TabSheetTab>
    </TabSheet>
  );
}

Related to: vaadin/flow-components#5232

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions