标签页
API: TypeScript / Java
Source: TypeScript / Java
标签页用于将内容组织和分组到用户可导航的部分中。
- 使用说明
- Styling
标签页用于将内容组织和分组到用户可导航的部分中。
下面是一个带标签的简单示例：
Open in a
new tab
new tab
Source code
TabsBasic.java
package 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.tsx
import 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.ts
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('tabs-basic')
export class Example extends LitElement {
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[] -->
`;
}
}
当您想在 UI 的某一特定区域内进行本地导航时，请使用标签页。也就是说，无需加载另一页面，也无需一次性显示所有内容或迫使用户切换到不同视图。
Tab Sheet
标签页最便捷的用途是作为 Tab Sheet 的组成部分，Tab Sheet 为每个标签页自动切换内容区。尝试点击下面示例中的标签页，注意每个标签页会显示不同的文本。
Open in a
new tab
new tab
Source code
TabSheetBasic.java
package 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.tsx
import 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.ts
import '@vaadin/tabs';
import '@vaadin/tabsheet';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';
@customElement('tabsheet-basic')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
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[] -->
`;
}
}
状态
标签页可以是选中的、未选中的或已禁用的。
Open in a
new tab
new tab
Source code
TabsStates.java
package 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.tsx
import 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.ts
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('tabs-states')
export class Example extends LitElement {
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[] -->
`;
}
}
您可以将标签页设置为禁用状态，表示该标签页暂不可用。禁用的标签页无法获得焦点，可能会对屏幕阅读器等辅助技术隐藏。
相较于直接隐藏某个元素，有时候禁用该元素更佳，能够避免其隐藏和显示时导致的布局变化，还能告知用户存在但当前不可用的状况 。
自动选择 (Flow)
添加到 Tabs 或 Tab Sheet 的第一个标签页会自动被选中。同理，移除一个选中的标签页后，下一个可用的标签页会自动被选中。
自动选择默认启用，但您也可以按需禁用此行为。注意下面示例中起初没有选中任何标签页。
Open in a
new tab
new tab
Source code
TabsAutoselect.java
package com.vaadin.demo.component.tabs;
import com.vaadin.demo.DemoExporter;
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"));
}
}
}
当同时使用自动选择和标签页选择变更监听器时，如果希望监听器对自动选择的标签页起作用，应先添加监听器后再添加标签页。
排列方向与溢出处理
标签页支持两种方向：默认的水平排列，以及垂直排列（当前不支持 Tab Sheet）。根据具体用例和可用空间决定选择哪一种排列方式。
水平排列
水平排列可能更易于用户理解，并将其与内容进行关联。此方式适合少量标签页，超过容器宽度后还可滚动。尝试在下面示例中横向滚动标签页，您会看到有超出初始可见范围的更多标签页存在。
Open in a
new tab
new tab
Source code
TabsHorizontal.java
package 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.tsx
import 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.ts
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('tabs-horizontal')
export class Example extends LitElement {
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[] -->
`;
}
}
在使用水平布局时，默认会显示滚动按钮辅助滑动标签页。可以通过添加 hide-scroll-buttons 主题变量隐藏滚动按钮。请注意下例中没有显示滚动条或滚动按钮，但仍可滚动以显现已溢出部分的标签页。
|
Note
|
若 UI 是针对非触摸屏设备设计的，不建议隐藏滚动按钮，因为在没有滚动按钮时横向滚动可能比较困难。 |
垂直排列
当标签页较多时，垂直排列可能更佳。用户更容易扫描纵向列出的选项。但垂直标签页与内容之间有时可能没有那么直观的关联。
垂直排布标签页在溢出时同样提供滚动能力，但不提供滚动按钮。此外，垂直方向目前不可用于 Tab Sheet。
Open in a
new tab
new tab
Source code
TabsVertical.java
package 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.tsx
import 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.ts
import '@vaadin/tabs';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('tabs-vertical')
export class Example extends LitElement {
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[] -->
`;
}
}