Tabs

Välilehtiä käytetään sisällön järjestämiseen ja ryhmittelyyn osioihin, joissa käyttäjä voi navigoida.

Alla on yksinkertainen esimerkki välilehdistä, joissa on otsikot:

Source code

TabsBasic.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-basic")
public class TabsBasic extends Div {

    public TabsBasic() {
        // tag::snippet[]
        Tab details = new Tab("Details");
        Tab payment = new Tab("Payment");
        Tab shipping = new Tab("Shipping");

        Tabs tabs = new Tabs(details, payment, shipping);
        // end::snippet[]
        add(tabs);
    }

}
tabs-basic.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs>
      <Tab>Details</Tab>
      <Tab>Payment</Tab>
      <Tab>Shipping</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-basic.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs>
        <vaadin-tab>Details</vaadin-tab>
        <vaadin-tab>Payment</vaadin-tab>
        <vaadin-tab>Shipping</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Käytä Tabs-komponenttia, kun haluat mahdollistaa paikallisen navigoinnin tietyssä käyttöliittymän osassa — eli ilman uuden sivun lataamista ja sen sijaan, että näyttäisit kaiken kerralla tai pakottaisit käyttäjän siirtymään eri näkymiin.

Tab Sheet

Tabs on kätevimmin käytössä osana Tab Sheet -rakennetta, joka sisältää automaattisesti vaihtuvat sisältöalueet jokaiselle välilehdelle. Kokeile napsauttaa välilehtiä alla olevassa esimerkissä. Huomaa, että jokaisella välilehdellä näkyy eri teksti.

Open in a
new tab

Source code

TabSheetBasic.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.TabSheet;
import com.vaadin.flow.router.Route;

@Route("tabsheet-basic")
public class TabSheetBasic extends Div {

    public TabSheetBasic() {
        // tag::snippet[]
        TabSheet tabSheet = new TabSheet();
        tabSheet.add("Dashboard",
                new Div(new Text("This is the Dashboard tab content")));
        tabSheet.add("Payment",
                new Div(new Text("This is the Payment tab content")));
        tabSheet.add("Shipping",
                new Div(new Text("This is the Shipping tab content")));
        add(tabSheet);
        // end::snippet[]
    }

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

function Example() {
  return (
    // tag::snippet[]
    <TabSheet>
      <TabSheetTab label="Dashboard">
        <div>This is the Dashboard tab content</div>
      </TabSheetTab>

      <TabSheetTab label="Payment">
        <div>This is the Payment tab content</div>
      </TabSheetTab>

      <TabSheetTab label="Shipping">
        <div>This is the Shipping tab content</div>
      </TabSheetTab>
    </TabSheet>
    // end::snippet[]
  );
}

tabsheet-basic.tsimport '@vaadin/tabs';
import '@vaadin/tabsheet';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabsheet-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabsheet>
        <vaadin-tabs slot="tabs">
          <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
          <vaadin-tab id="payment-tab">Payment</vaadin-tab>
          <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
        </vaadin-tabs>

        <div tab="dashboard-tab">This is the Dashboard tab content</div>
        <div tab="payment-tab">This is the Payment tab content</div>
        <div tab="shipping-tab">This is the Shipping tab content</div>
      </vaadin-tabsheet>
      <!-- end::snippet[] -->
    `;
  }
}

Tilat

Tab voi olla valittuna, valitsematta tai poissa käytöstä.

Open in a
new tab

Source code

TabsStates.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-states")
public class TabsStates extends Div {

    public TabsStates() {
        // tag::snippet[]
        Tab selected = new Tab("Selected");

        Tab unselected = new Tab("Unselected");

        Tab disabled = new Tab("Disabled");
        disabled.setEnabled(false);

        Tabs tabs = new Tabs(selected, unselected, disabled);
        tabs.setSelectedTab(selected);
        // end::snippet[]
        add(tabs);
    }

}
tabs-states.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs>
      <Tab>Selected</Tab>
      <Tab>Unselected</Tab>
      <Tab disabled>Disabled</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-states.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-states')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs>
        <vaadin-tab>Selected</vaadin-tab>
        <vaadin-tab>Unselected</vaadin-tab>
        <vaadin-tab disabled>Disabled</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Voit poistaa välilehden käytöstä merkitäksesi sen ei-käytettäväksi. Poistetut välilehdet eivät voi saada kohdistusta, ja ne saattavat olla näkymättömiä avustaville teknologioille, kuten ruudunlukijoille.

Poistaminen käytöstä voi olla parempi vaihtoehto kuin elementin piilottaminen, jotta asettelussa ei tapahdu muutoksia elementin näkyvyyden muuttuessa. Näin käyttäjät voivat myös olla tietoisia sen olemassaolosta, vaikka se ei olisi käytettävissä.

Automaattinen valinta (Flow)

Ensimmäinen Tabs- tai Tab Sheet -komponenttiin lisätty välilehti valitaan automaattisesti. Samoin, kun valittu välilehti poistetaan, seuraava saatavilla oleva välilehti valitaan automaattisesti.

Automaattinen valinta on oletuksena käytössä, mutta tämän toiminnon voi tarvittaessa poistaa käytöstä. Huomaa, että alla olevassa esimerkissä mikään välilehdistä ei ole aluksi valittuna.

Open in a
new tab

Source code

TabsAutoselect.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-autoselect")
public class TabsAutoselect extends Div {

    private final Tab details;
    private final Tab payment;
    private final Tab shipping;
    private final VerticalLayout content;

    public TabsAutoselect() {
        details = new Tab("Details");
        payment = new Tab("Payment");
        shipping = new Tab("Shipping");

        // tag::snippet[]
        Tabs tabs = new Tabs();
        tabs.setAutoselect(false);
        // end::snippet[]

        tabs.addSelectedChangeListener(
                event -> setContent(event.getSelectedTab()));
        tabs.add(details, payment, shipping);

        content = new VerticalLayout();
        content.setSpacing(false);

        add(tabs, content);
    }

    private void setContent(Tab tab) {
        content.removeAll();
        if (tab == null) {
            return;
        }
        if (tab.equals(details)) {
            content.add(new Paragraph("This is the Details tab"));
        } else if (tab.equals(payment)) {
            content.add(new Paragraph("This is the Payment tab"));
        } else {
            content.add(new Paragraph("This is the Shipping tab"));
        }
    }

}

Kun käytät automaattista valintaa ja välilehden valinnan muutoskuuntelijoita, sinun tulisi lisätä valinnan muutoskuuntelijat ennen välilehtien lisäämistä, jos haluat kuuntelijoiden laukeavan automaattisesti valitulle välilehdelle.

Suunta & Ylivuoto

Tabs tukee kahta erilaista suuntaa: vaakasuuntainen (oletus) ja pystysuuntainen, jota ei tällä hetkellä tueta Tab Sheet -komponentissa. Valitse suunta käyttötapauksen ja käytettävissä olevan tilan perusteella. Molemmat selitetään alla.

Vaaka

Vaakasuorat välilehdet voivat olla käyttäjille helpompia ymmärtää ja yhdistää sisältöön. Ne sopivat parhaiten pienelle määrälle kohteita, mutta tarjoavat vierityksen ylivuodon sattuessa. Kokeile vierittää välilehtiä vaakasuunnassa tässä esimerkissä: huomaat, että niitä on enemmän kuin aluksi näkyy.

Open in a
new tab

Source code

TabsHorizontal.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-horizontal")
public class TabsHorizontal extends Div {

    public TabsHorizontal() {
        // tag::snippet[]
        Tab analytics = new Tab("Analytics");
        Tab customers = new Tab("Customers");
        Tab dashboards = new Tab("Dashboards");
        Tab documents = new Tab("Documents");
        Tab orders = new Tab("Orders");

        Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
                orders);
        tabs.setMaxWidth("100%");
        tabs.setWidth("400px");
        // end::snippet[]
        add(tabs);
    }

}
tabs-horizontal.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs style={{ maxWidth: '100%', width: '400px' }}>
      <Tab>Analytics</Tab>
      <Tab>Customers</Tab>
      <Tab>Dashboards</Tab>
      <Tab>Documents</Tab>
      <Tab>Orders</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-horizontal.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-horizontal')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs style="max-width: 100%; width: 400px;">
        <vaadin-tab>Analytics</vaadin-tab>
        <vaadin-tab>Customers</vaadin-tab>
        <vaadin-tab>Dashboards</vaadin-tab>
        <vaadin-tab>Documents</vaadin-tab>
        <vaadin-tab>Orders</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Vaakasuunnassa vierityspainikkeet näytetään oletuksena helpottamaan välilehtien vierittämistä. Nämä voi poistaa käytöstä käyttämällä hide-scroll-buttons -teemavaihtoehtoa. Huomaa alla olevassa esimerkissä, ettei vierityspalkkia tai vierityspainikkeita ole, mutta voit silti vierittää nähdäksesi ylivuotavat välilehdet.

Open in a
new tab

Source code

TabsHideScrollButtons.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.component.tabs.TabsVariant;
import com.vaadin.flow.router.Route;

@Route("tabs-hide-scroll-buttons")
public class TabsHideScrollButtons extends Div {

    public TabsHideScrollButtons() {
        // tag::snippet[]
        Tab analytics = new Tab("Analytics");
        Tab customers = new Tab("Customers");
        Tab dashboards = new Tab("Dashboards");
        Tab documents = new Tab("Documents");
        Tab orders = new Tab("Orders");
        Tab products = new Tab("Products");
        Tab tasks = new Tab("Tasks");

        Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
                orders, products, tasks);
        tabs.addThemeVariants(TabsVariant.HIDE_SCROLL_BUTTONS);
        tabs.setMaxWidth("100%");
        tabs.setWidth("400px");
        // end::snippet[]
        add(tabs);
    }

}
tabs-hide-scroll-buttons.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs theme="hide-scroll-buttons" style={{ maxWidth: '100%', width: '400px' }}>
      <Tab>Analytics</Tab>
      <Tab>Customers</Tab>
      <Tab>Dashboards</Tab>
      <Tab>Documents</Tab>
      <Tab>Orders</Tab>
      <Tab>Products</Tab>
      <Tab>Tasks</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-hide-scroll-buttons.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-hide-scroll-buttons')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs theme="hide-scroll-buttons" style="max-width: 100%; width: 400px;">
        <vaadin-tab>Analytics</vaadin-tab>
        <vaadin-tab>Customers</vaadin-tab>
        <vaadin-tab>Dashboards</vaadin-tab>
        <vaadin-tab>Documents</vaadin-tab>
        <vaadin-tab>Orders</vaadin-tab>
        <vaadin-tab>Products</vaadin-tab>
        <vaadin-tab>Tasks</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Note	Vierityspainikkeiden piilottamista ei kuitenkaan suositella käyttöliittymissä, jotka on suunniteltu käytettäväksi ei-kosketusnäytöllisillä laitteilla, sillä vaakasuuntainen vieritys voi olla hankalaa ilman niitä.

Pysty

Pystysuuntaiset välilehdet voivat joskus olla parempi valinta suurelle määrälle kohteita. Käyttäjän on helpompi silmäillä pystysuoraa vaihtoehtolistaa. Ne eivät kuitenkaan aina ole yhtä helppoja ymmärtää ja yhdistää sisältöön.

Pystysuuntaiset välilehdet mahdollistavat myös vierityksen ylivuodon sattuessa, mutta vierityspainikkeita ei ole. Huomaa, että pystysuunta ei ole käytettävissä Tab Sheet -komponentissa.

Open in a
new tab

Source code

TabsVertical.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-vertical")
public class TabsVertical extends Div {

    public TabsVertical() {
        // tag::snippet[]
        Tab analytics = new Tab("Analytics");
        Tab customers = new Tab("Customers");
        Tab dashboards = new Tab("Dashboards");
        Tab documents = new Tab("Documents");
        Tab orders = new Tab("Orders");
        Tab products = new Tab("Products");
        Tab tasks = new Tab("Tasks");

        Tabs tabs = new Tabs(analytics, customers, dashboards, documents,
                orders, products, tasks);
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        tabs.setHeight("240px");
        tabs.setWidth("240px");
        // end::snippet[]
        add(tabs);
    }

}
tabs-vertical.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs orientation="vertical" style={{ height: '240px', width: '240px' }}>
      <Tab>Analytics</Tab>
      <Tab>Customers</Tab>
      <Tab>Dashboards</Tab>
      <Tab>Documents</Tab>
      <Tab>Orders</Tab>
      <Tab>Products</Tab>
      <Tab>Tasks</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-vertical.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-vertical')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs orientation="vertical" style="height: 240px; width: 240px;">
        <vaadin-tab>Analytics</vaadin-tab>
        <vaadin-tab>Customers</vaadin-tab>
        <vaadin-tab>Dashboards</vaadin-tab>
        <vaadin-tab>Documents</vaadin-tab>
        <vaadin-tab>Orders</vaadin-tab>
        <vaadin-tab>Products</vaadin-tab>
        <vaadin-tab>Tasks</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Kuvakkeet & Muut välilehtien sisällöt

Tekstin lisäksi välilehdissä voi olla kuvakkeita ja muuta sisältöä.

Kuvakkeet

Kuvakkeita voidaan käyttää tekemään välilehdistä näkyvämpiä ja helpommin tunnistettavia. Ne voidaan lisätä otsikoiden viereen tai niiden yläpuolelle (vain Lumo). Yleensä vaakasuorat välilehdet toimivat parhaiten, kun kuvakkeet ovat otsikoiden yläpuolella, kuten alla olevassa esimerkissä.

Open in a
new tab

Source code

TabsIconsHorizontal.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.TabVariant;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-icons-horizontal")
public class TabsIconsHorizontal extends Div {

    public TabsIconsHorizontal() {
        // tag::snippet[]
        Tab profile = new Tab(VaadinIcon.USER.create(), new Span("Profile"));
        Tab settings = new Tab(VaadinIcon.COG.create(), new Span("Settings"));
        Tab notifications = new Tab(VaadinIcon.BELL.create(),
                new Span("Notifications"));

        // Set the icon on top
        for (Tab tab : new Tab[] { profile, settings, notifications }) {
            tab.addThemeVariants(TabVariant.LUMO_ICON_ON_TOP);
        }

        Tabs tabs = new Tabs(profile, settings, notifications);
        // end::snippet[]
        add(tabs);
    }

}
tabs-icons-horizontal.tsximport '@vaadin/icons';
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs>
      <Tab theme="icon-on-top">
        <Icon icon="vaadin:user" />
        <span>Profile</span>
      </Tab>

      <Tab theme="icon-on-top">
        <Icon icon="vaadin:cog" />
        <span>Settings</span>
      </Tab>

      <Tab theme="icon-on-top">
        <Icon icon="vaadin:bell" />
        <span>Notifications</span>
      </Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-icons-horizontal.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-icons-horizontal')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs>
        <vaadin-tab theme="icon-on-top">
          <vaadin-icon icon="vaadin:user"></vaadin-icon>
          <span>Profile</span>
        </vaadin-tab>
        <vaadin-tab theme="icon-on-top">
          <vaadin-icon icon="vaadin:cog"></vaadin-icon>
          <span>Settings</span>
        </vaadin-tab>
        <vaadin-tab theme="icon-on-top">
          <vaadin-icon icon="vaadin:bell"></vaadin-icon>
          <span>Notifications</span>
        </vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Pystysuuntaiset välilehdet toimivat parhaiten, kun kuvakkeet ovat otsikoiden vieressä, kuten tässä näkyy.

Open in a
new tab

Source code

TabsIconsVertical.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-icons-vertical")
public class TabsIconsVertical extends Div {

    public TabsIconsVertical() {
        // tag::snippet[]
        Tab profile = new Tab(VaadinIcon.USER.create(), new Span("Profile"));
        Tab settings = new Tab(VaadinIcon.COG.create(), new Span("Settings"));
        Tab notifications = new Tab(VaadinIcon.BELL.create(),
                new Span("Notifications"));

        Tabs tabs = new Tabs(profile, settings, notifications);
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        // end::snippet[]
        add(tabs);
    }

}
tabs-icons-vertical.tsximport '@vaadin/icons';
import React from 'react';
import { Icon } from '@vaadin/react-components/Icon.js';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs orientation="vertical">
      <Tab>
        <Icon icon="vaadin:user" />
        <span>Profile</span>
      </Tab>

      <Tab>
        <Icon icon="vaadin:cog" />
        <span>Settings</span>
      </Tab>

      <Tab>
        <Icon icon="vaadin:bell" />
        <span>Notifications</span>
      </Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-icons-vertical.tsimport '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-icons-vertical')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs orientation="vertical">
        <vaadin-tab>
          <vaadin-icon icon="vaadin:user"></vaadin-icon>
          <span>Profile</span>
        </vaadin-tab>
        <vaadin-tab>
          <vaadin-icon icon="vaadin:cog"></vaadin-icon>
          <span>Settings</span>
        </vaadin-tab>
        <vaadin-tab>
          <vaadin-icon icon="vaadin:bell"></vaadin-icon>
          <span>Notifications</span>
        </vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Pelkästään kuvakkeista koostuvat otsikot voivat joskus olla houkuttelevia, mutta niiden tulisi tarjota tekstikuvaus käyttämällä Tooltip-komponenttia tai aria-label-attribuuttia avustaville teknologioille.

Muut elementit

Välilehdet voivat sisältää lähes mitä tahansa käyttöliittymäelementtejä. Esimerkiksi ne voivat sisältää merkkejä, jotka osoittavat välilehden kohteiden määrän. Tässä esimerkissä jokaisen välilehden otsikon oikealla puolella on harmaa laatikko, jossa on luku, joka ilmaisee määrän.

Open in a
new tab

Source code

TabsBadges.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.badge.Badge;
import com.vaadin.flow.component.badge.BadgeVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-badges")
public class TabsBadges extends Div {

    public TabsBadges() {
        // tag::snippet[]
        Tab open = new Tab(new Span("Open"), createBadge(24));
        Tab completed = new Tab(new Span("Completed"), createBadge(49));
        Tab cancelled = new Tab(new Span("Cancelled"), createBadge(5));

        Tabs tabs = new Tabs(open, completed, cancelled);
        // end::snippet[]
        add(tabs);
    }

    /**
     * Helper method for creating a badge.
     */
    private Badge createBadge(int value) {
        Badge badge = new Badge();
        badge.setNumber(value);
        badge.addThemeVariants(BadgeVariant.FILLED);
        badge.getStyle().set("margin-inline-start", "var(--vaadin-gap-xs)");
        return badge;
    }

}
tabs-badges.tsximport React from 'react';
import { Badge, Tab, Tabs } from '@vaadin/react-components';

const badgeStyle = {
  marginInlineStart: 'var(--vaadin-gap-xs)',
};

function Example() {
  return (
    // tag::snippet[]
    <Tabs>
      <Tab>
        <span>Open</span>
        <Badge number={24} theme="filled" style={badgeStyle} />
      </Tab>

      <Tab>
        <span>Completed</span>
        <Badge number={49} theme="filled" style={badgeStyle} />
      </Tab>

      <Tab>
        <span>Cancelled</span>
        <Badge number={5} theme="filled" style={badgeStyle} />
      </Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-badges.tsimport '@vaadin/badge';
import '@vaadin/tabs';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-badges')
export class Example extends LitElement {
  static override styles = [
    css`
      vaadin-badge {
        margin-inline-start: var(--vaadin-gap-xs);
      }
    `,
  ];

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs>
        <vaadin-tab>
          <span>Open</span>
          <vaadin-badge number="24" theme="filled"></vaadin-badge>
        </vaadin-tab>
        <vaadin-tab>
          <span>Completed</span>
          <vaadin-badge number="49" theme="filled"></vaadin-badge>
        </vaadin-tab>
        <vaadin-tab>
          <span>Cancelled</span>
          <vaadin-badge number="5" theme="filled"></vaadin-badge>
        </vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Prefix & Suffix

Mukautettua sisältöä voidaan sijoittaa välilehtien eteen tai jälkeen Tab Sheet -komponentissa sijoittamalla sisältö prefix- ja suffix-sloteihin. Huomaa välilehtipalkin molemmissa päissä oleva lisäsisältö tässä esimerkissä.

Open in a
new tab

Source code

TabSheetPrefixSuffix.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;
import com.vaadin.flow.component.tabs.TabSheet;
import com.vaadin.flow.router.Route;

@Route("tabsheet-prefix-suffix")
public class TabSheetPrefixSuffix extends Div {

    public TabSheetPrefixSuffix() {
        TabSheet tabSheet = new TabSheet();
        tabSheet.add("Dashboard",
                new Div(new Text("This is the Dashboard tab content")));
        tabSheet.add("Payment",
                new Div(new Text("This is the Payment tab content")));
        tabSheet.add("Shipping",
                new Div(new Text("This is the Shipping tab content")));

        // tag::snippet[]
        tabSheet.setPrefixComponent(new Button("Close all"));

        Button plusButton = new Button(new Icon(VaadinIcon.PLUS));
        plusButton.addThemeVariants(ButtonVariant.LUMO_ICON);
        plusButton.setAriaLabel("Add tab");
        tabSheet.setSuffixComponent(plusButton);
        // end::snippet[]

        add(tabSheet);
    }

}
tabsheet-prefix-suffix.tsximport '@vaadin/icons';
import React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { Icon } from '@vaadin/react-components/Icon.js';
import { TabSheet, TabSheetTab } from '@vaadin/react-components/TabSheet.js';

function Example() {
  return (
    // tag::snippet[]
    <TabSheet>
      <Button slot="prefix">Close all</Button>

      <Button slot="suffix" theme="icon" aria-label="Add tab">
        <Icon icon="vaadin:plus" />
      </Button>

      <TabSheetTab label="Dashboard">
        <div>This is the Dashboard tab content</div>
      </TabSheetTab>

      <TabSheetTab label="Payment">
        <div>This is the Payment tab content</div>
      </TabSheetTab>

      <TabSheetTab label="Shipping">
        <div>This is the Shipping tab content</div>
      </TabSheetTab>
    </TabSheet>
    // end::snippet[]
  );
}

tabsheet-prefix-suffix.tsimport '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/tabs';
import '@vaadin/tabsheet';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabsheet-prefix-suffix')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-tabsheet>
        <!-- tag::snippet[] -->
        <vaadin-button slot="prefix">Close all</vaadin-button>

        <vaadin-button slot="suffix" theme="icon" aria-label="Add tab">
          <vaadin-icon icon="vaadin:plus"></vaadin-icon>
        </vaadin-button>
        <!-- end::snippet[] -->

        <vaadin-tabs slot="tabs">
          <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
          <vaadin-tab id="payment-tab">Payment</vaadin-tab>
          <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
        </vaadin-tabs>

        <div tab="dashboard-tab">This is the Dashboard tab content</div>
        <div tab="payment-tab">This is the Payment tab content</div>
        <div tab="shipping-tab">This is the Shipping tab content</div>
      </vaadin-tabsheet>
    `;
  }
}

Kohdistus & Näppäimistö

Välilehden kohdistus näytetään eri tavalla, kun se on valittu näppäimistöllä. Kun välilehti on kohdistettu, nuolinäppäimiä voidaan käyttää siirtämään kohdistusta välilehdeltä toiselle. Kokeile painaa Enter tai Space valitaksesi välilehden, johon kohdistus on asetettu — tai napsauta välilehteä hiirelläsi. Käytä sitten vasenta ja oikeaa nuolinäppäintä siirtääksesi kohdistusta.

Open in a
new tab

Source code

tabs-focus-ring.tsximport React from 'react';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs } from '@vaadin/react-components/Tabs.js';

function Example() {
  return (
    // tag::snippet[]
    <Tabs>
      <Tab {...{ 'focus-ring': '' }}>Details</Tab>
      <Tab>Payment</Tab>
      <Tab>Shipping</Tab>
    </Tabs>
    // end::snippet[]
  );
}

tabs-focus-ring.tsimport '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-focus-ring')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs>
        <vaadin-tab focus-ring>Details</vaadin-tab>
        <vaadin-tab>Payment</vaadin-tab>
        <vaadin-tab>Shipping</vaadin-tab>
      </vaadin-tabs>
      <!-- end::snippet[] -->
    `;
  }
}

Yleiset tapaukset

Sisällön vaihto ilman Tab Sheet -komponenttia

Tab Sheet -komponentin integroitujen sisältöalueiden käyttäminen on helpoin tapa vaihtaa välilehtien eri sisällön välillä. Joskus, esimerkiksi kun välilehdet täytyy erottaa rakenteellisesti niiden sisältöalueista, voi olla tarpeen käyttää itsenäistä Tabs-komponenttia ja toteuttaa sisällön vaihto manuaalisesti.

Kokeile napsauttaa jokaista välilehteä tässä. Huomaa, kuinka tekstisisältö muuttuu valitun välilehden mukaan.

Open in a
new tab

Source code

TabsContent.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Paragraph;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("tabs-content")
public class TabsContent extends Div {

    private final Tab details;
    private final Tab payment;
    private final Tab shipping;
    private final VerticalLayout content;

    public TabsContent() {
        // tag::snippet[]
        details = new Tab("Details");
        payment = new Tab("Payment");
        shipping = new Tab("Shipping");

        Tabs tabs = new Tabs(details, payment, shipping);
        tabs.addSelectedChangeListener(
                event -> setContent(event.getSelectedTab()));
        // end::snippet[]

        content = new VerticalLayout();
        content.setSpacing(false);
        setContent(tabs.getSelectedTab());

        add(tabs, content);
    }

    private void setContent(Tab tab) {
        content.removeAll();

        if (tab.equals(details)) {
            content.add(new Paragraph("This is the Details tab"));
        } else if (tab.equals(payment)) {
            content.add(new Paragraph("This is the Payment tab"));
        } else {
            content.add(new Paragraph("This is the Shipping tab"));
        }
    }

}
tabs-content.tsximport React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { Tab } from '@vaadin/react-components/Tab.js';
import { Tabs, type TabsSelectedChangedEvent } from '@vaadin/react-components/Tabs.js';
import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';

function Example() {
  const value = useSignal(0);
  const pages = ['Dashboard', 'Payment', 'Shipping'];

  const selectedChanged = (e: TabsSelectedChangedEvent) => {
    value.value = e.detail.value;
  };

  return (
    <>
      {/* tag::snippet[] */}
      <Tabs selected={value.value} onSelectedChanged={selectedChanged}>
        <Tab>Dashboard</Tab>
        <Tab>Payment</Tab>
        <Tab>Shipping</Tab>
      </Tabs>

      <VerticalLayout theme="padding">
        <p>{`This is the ${pages[value.value]} tab`}</p>
      </VerticalLayout>
      {/* end::snippet[] */}
    </>
  );
}

tabs-content.tsimport '@vaadin/tabs';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { TabsSelectedChangedEvent } from '@vaadin/tabs';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabs-content')
export class Example extends LitElement {
  @state()
  private content = '';

  @state()
  private pages = ['Dashboard', 'Payment', 'Shipping'];

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-tabs @selected-changed="${this.selectedChanged}">
        <vaadin-tab>Dashboard</vaadin-tab>
        <vaadin-tab>Payment</vaadin-tab>
        <vaadin-tab>Shipping</vaadin-tab>
      </vaadin-tabs>

      <vaadin-vertical-layout theme="padding">
        <p>${this.content}</p>
      </vaadin-vertical-layout>
      <!-- end::snippet[] -->
    `;
  }

  selectedChanged(e: TabsSelectedChangedEvent) {
    this.content = `This is the ${this.pages[e.detail.value]} tab`;
  }
}

Välilehtien sisällön laiska alustus

Joskus voi olla toivottavaa alustaa välilehden sisältö laiskasti, eli viivästyttää sen alustusta, kunnes välilehti valitaan. Kun napsautat ensimmäistä kertaa jotakin alla olevista välilehdistä, näet latausilmaisimen ja pienen viiveen ennen kuin välilehden sisältö näytetään.

Open in a
new tab

Source code

TabSheetLazyInitialization.javapackage com.vaadin.demo.component.tabs;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.tabs.TabSheet;
import com.vaadin.flow.function.SerializableSupplier;
import com.vaadin.flow.router.Route;

@Route("tabsheet-lazy-initialization")
public class TabSheetLazyInitialization extends Div {

    public TabSheetLazyInitialization() {
        TabSheet tabSheet = new TabSheet();
        // tag::snippet[]
        tabSheet.add("Dashboard", new LazyComponent(
                () -> new Text("This is the Dashboard tab content")));
        // end::snippet[]
        tabSheet.add("Payment", new LazyComponent(
                () -> new Text("This is the Payment tab content")));
        tabSheet.add("Shipping", new LazyComponent(
                () -> new Text("This is the Shipping tab content")));
        add(tabSheet);

    }
    // tag::snippet[]

    public class LazyComponent extends Div {
        public LazyComponent(
                SerializableSupplier<? extends Component> supplier) {
            addAttachListener(e -> {
                if (getElement().getChildCount() == 0) {
                    add(supplier.get());
                }
            });
        }
    }
    // end::snippet[]

}
tabsheet-lazy-initialization.tsximport React from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import {
  TabSheet,
  type TabSheetSelectedChangedEvent,
  TabSheetTab,
} from '@vaadin/react-components/TabSheet.js';

function Example() {
  // tag::snippet[]
  const visitedTabs = useSignal(new Set<number>([0]));

  const selectedTabChanged = (event: TabSheetSelectedChangedEvent) => {
    visitedTabs.value = new Set([...visitedTabs.value, event.detail.value]);
  };

  return (
    <TabSheet onSelectedChanged={selectedTabChanged}>
      <TabSheetTab label="Dashboard">
        {visitedTabs.value.has(0) && <div>This is the Dashboard tab content</div>}
      </TabSheetTab>

      <TabSheetTab label="Payment">
        {visitedTabs.value.has(1) && <div>This is the Payment tab content</div>}
      </TabSheetTab>

      <TabSheetTab label="Shipping">
        {visitedTabs.value.has(2) && <div>This is the Shipping tab content</div>}
      </TabSheetTab>
    </TabSheet>
  );
  // end::snippet[]
}

tabsheet-lazy-initialization.tsimport '@vaadin/tabs';
import '@vaadin/tabsheet';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { TabSheetSelectedChangedEvent } from '@vaadin/tabsheet';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('tabsheet-lazy-initialization')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  @state()
  private visitedTabs = new Set<number>();

  private selectedTabChanged(event: TabSheetSelectedChangedEvent) {
    this.visitedTabs = new Set([...this.visitedTabs, event.detail.value]);
  }

  protected override render() {
    return html`
      <vaadin-tabsheet @selected-changed=${this.selectedTabChanged}>
        <vaadin-tabs slot="tabs">
          <vaadin-tab id="dashboard-tab">Dashboard</vaadin-tab>
          <vaadin-tab id="payment-tab">Payment</vaadin-tab>
          <vaadin-tab id="shipping-tab">Shipping</vaadin-tab>
        </vaadin-tabs>

        ${this.visitedTabs.has(0)
          ? html`<div tab="dashboard-tab">This is the Dashboard tab content</div>`
          : ''}
        ${this.visitedTabs.has(1)
          ? html`<div tab="payment-tab">This is the Payment tab content</div>`
          : ''}
        ${this.visitedTabs.has(2)
          ? html`<div tab="shipping-tab">This is the Shipping tab content</div>`
          : ''}
      </vaadin-tabsheet>
    `;
  }
  // end::snippet[]
}

Liittyvät komponentit

Komponentti	Käyttösuositukset
Accordion	Accordion on pystysuunnassa pinottu joukko laajennettavia paneeleita.
Details	Details-komponentti on laajennettava paneeli, jolla voidaan näyttää ja piilottaa sisältöä käyttöliittymän selkeyttämiseksi.

Komponentti

Käyttösuositukset

Accordion

Accordion on pystysuunnassa pinottu joukko laajennettavia paneeleita.

Details

Details-komponentti on laajennettava paneeli, jolla voidaan näyttää ja piilottaa sisältöä käyttöliittymän selkeyttämiseksi.

D66CE920-3532-41D6-9EB3-C2B91F77CC40

Docs

Docs

Tabs

Tab Sheet

Tilat

Automaattinen valinta (Flow)

Suunta & Ylivuoto

Vaaka

Pysty

Kuvakkeet & Muut välilehtien sisällöt

Kuvakkeet

Muut elementit

Prefix & Suffix

Kohdistus & Näppäimistö

Yleiset tapaukset

Sisällön vaihto ilman Tab Sheet -komponenttia

Välilehtien sisällön laiska alustus

Liittyvät komponentit