From e7a99d4869ed2b9f5052823b4f869a34c03159c6 Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Tue, 25 Nov 2025 13:41:38 +0200 Subject: [PATCH 1/3] Changed all component page tabs to subpages --- articles/components/accordion/index.adoc | 2 -- articles/components/accordion/styling.adoc | 2 +- articles/components/app-layout/index.adoc | 2 -- articles/components/app-layout/styling.adoc | 2 +- articles/components/avatar/index.adoc | 2 -- articles/components/avatar/styling.adoc | 2 +- articles/components/button/index.adoc | 2 -- articles/components/button/styling.adoc | 2 +- articles/components/card/index.adoc | 1 - articles/components/card/styling.adoc | 2 +- articles/components/charts/basic-use.adoc | 2 +- articles/components/charts/styling/styling.adoc | 2 +- articles/components/charts/timeline.adoc | 2 +- articles/components/charts/usage-with-lit.adoc | 2 +- articles/components/charts/usage-with-react.adoc | 2 +- articles/components/checkbox/index.adoc | 2 -- articles/components/checkbox/styling.adoc | 2 +- articles/components/combo-box/index.adoc | 2 -- articles/components/combo-box/styling.adoc | 2 +- articles/components/confirm-dialog/index.adoc | 2 -- articles/components/confirm-dialog/styling.adoc | 2 +- articles/components/context-menu/index.adoc | 2 -- articles/components/context-menu/styling.adoc | 2 +- articles/components/crud/index.adoc | 2 -- articles/components/crud/styling.adoc | 2 +- articles/components/custom-field/index.adoc | 2 -- articles/components/custom-field/styling.adoc | 2 +- articles/components/dashboard/index.adoc | 2 -- articles/components/dashboard/styling.adoc | 2 +- articles/components/date-picker/date-formats.adoc | 2 +- articles/components/date-picker/index.adoc | 2 -- articles/components/date-picker/styling.adoc | 2 +- articles/components/date-time-picker/index.adoc | 2 -- articles/components/date-time-picker/styling.adoc | 2 +- articles/components/details/index.adoc | 2 -- articles/components/details/styling.adoc | 2 +- articles/components/dialog/index.adoc | 2 -- articles/components/dialog/styling.adoc | 2 +- articles/components/email-field/index.adoc | 2 -- articles/components/email-field/styling.adoc | 2 +- articles/components/form-layout/index.adoc | 2 -- articles/components/form-layout/styling.adoc | 2 +- articles/components/grid-pro/index.adoc | 2 -- articles/components/grid-pro/styling.adoc | 2 +- articles/components/grid/columns.adoc | 2 +- articles/components/grid/drag-drop.adoc | 2 +- articles/components/grid/index.adoc | 2 -- articles/components/grid/inline-editing.adoc | 2 +- articles/components/grid/renderers.adoc | 4 ++-- articles/components/grid/selection.adoc | 4 ++-- articles/components/grid/styling.adoc | 4 ++-- articles/components/icons/default-icons.adoc | 2 +- articles/components/icons/index.adoc | 2 -- articles/components/list-box/index.adoc | 2 -- articles/components/list-box/styling.adoc | 2 +- articles/components/login/index.adoc | 2 -- articles/components/login/styling.adoc | 2 +- articles/components/master-detail-layout/index.adoc | 2 -- articles/components/master-detail-layout/styling.adoc | 2 +- articles/components/menu-bar/index.adoc | 2 -- articles/components/menu-bar/styling.adoc | 2 +- articles/components/message-input/index.adoc | 2 -- articles/components/message-input/styling.adoc | 2 +- articles/components/message-list/index.adoc | 2 -- articles/components/message-list/styling.adoc | 2 +- articles/components/multi-select-combo-box/index.adoc | 2 -- articles/components/multi-select-combo-box/styling.adoc | 2 +- articles/components/notification/index.adoc | 2 -- articles/components/notification/styling.adoc | 2 +- articles/components/number-field/index.adoc | 2 -- articles/components/number-field/styling.adoc | 2 +- articles/components/password-field/index.adoc | 2 -- articles/components/password-field/styling.adoc | 2 +- articles/components/popover/index.adoc | 2 -- articles/components/popover/styling.adoc | 2 +- articles/components/progress-bar/index.adoc | 2 -- articles/components/progress-bar/styling.adoc | 2 +- articles/components/radio-button/index.adoc | 2 -- articles/components/radio-button/styling.adoc | 2 +- articles/components/rich-text-editor/index.adoc | 2 -- articles/components/rich-text-editor/styling.adoc | 2 +- articles/components/scroller/index.adoc | 2 -- articles/components/scroller/styling.adoc | 2 +- articles/components/select/index.adoc | 2 -- articles/components/select/styling.adoc | 2 +- articles/components/side-nav/index.adoc | 2 -- articles/components/side-nav/styling.adoc | 2 +- articles/components/split-layout/index.adoc | 2 -- articles/components/split-layout/styling.adoc | 2 +- articles/components/spreadsheet/index.adoc | 2 -- articles/components/spreadsheet/styling.adoc | 2 +- articles/components/tabs/index.adoc | 2 -- articles/components/tabs/styling.adoc | 2 +- articles/components/text-area/index.adoc | 2 -- articles/components/text-area/styling.adoc | 2 +- articles/components/text-field/index.adoc | 2 -- articles/components/text-field/styling.adoc | 2 +- articles/components/time-picker/index.adoc | 2 -- articles/components/time-picker/styling.adoc | 2 +- articles/components/tooltip/index.adoc | 2 -- articles/components/tooltip/styling.adoc | 2 +- articles/components/tree-grid/index.adoc | 2 -- articles/components/tree-grid/styling.adoc | 2 +- articles/components/upload/file-handling.adoc | 2 +- articles/components/upload/index.adoc | 2 -- articles/components/upload/styling.adoc | 2 +- 106 files changed, 62 insertions(+), 155 deletions(-) diff --git a/articles/components/accordion/index.adoc b/articles/components/accordion/index.adoc index e850f6bc8a..0a2a60a3cd 100644 --- a/articles/components/accordion/index.adoc +++ b/articles/components/accordion/index.adoc @@ -3,8 +3,6 @@ title: Accordion page-title: Accordion component | Vaadin components description: Accordion is a vertically stacked set of expandable panels. meta-description: The Vaadin component Accordion is a vertically stacked set of expandable panels you can leverage in your application's layout -tab-title: Usage -layout: tabbed-page page-links: - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/accordion}/elements/vaadin-accordion[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/accordion/Accordion.html[Java]' - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/accordion}/packages/accordion[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-accordion-flow-parent[Java]' diff --git a/articles/components/accordion/styling.adoc b/articles/components/accordion/styling.adoc index eec3756352..512b8c1f11 100644 --- a/articles/components/accordion/styling.adoc +++ b/articles/components/accordion/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Accordion component. meta-description: Explore options to customize the appearance of the Accordion component in your Vaadin apps. order: 50 --- -= Styling += Accordion Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/app-layout/index.adoc b/articles/components/app-layout/index.adoc index 2581f92363..a2ae861a01 100644 --- a/articles/components/app-layout/index.adoc +++ b/articles/components/app-layout/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: App Layout page-title: App Layout component | Vaadin components description: App Layout is a component for building common application layouts. diff --git a/articles/components/app-layout/styling.adoc b/articles/components/app-layout/styling.adoc index 1768126d56..4b2a9c6400 100644 --- a/articles/components/app-layout/styling.adoc +++ b/articles/components/app-layout/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the App Layout component. meta-description: Customize the App Layout component in Vaadin to suit your application’s branding and style. order: 50 --- -= Styling += App Layout Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/avatar/index.adoc b/articles/components/avatar/index.adoc index 862bc21e09..3beb8f53c4 100644 --- a/articles/components/avatar/index.adoc +++ b/articles/components/avatar/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Avatar page-title: Avatar component | Vaadin components description: Avatar is a graphical representation of an object or entity, for example, a person or an organization. diff --git a/articles/components/avatar/styling.adoc b/articles/components/avatar/styling.adoc index 09694ae317..d9ae138a32 100644 --- a/articles/components/avatar/styling.adoc +++ b/articles/components/avatar/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Avatar and Avatar Group components. meta-description: Customize the appearance of the Avatar component in Vaadin applications. order: 50 --- -= Styling += Avatar Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/button/index.adoc b/articles/components/button/index.adoc index f70035d6b4..90d4ea5993 100644 --- a/articles/components/button/index.adoc +++ b/articles/components/button/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Button page-title: Button Component | Vaadin components description: The Button component allows users to perform actions. It comes in several different style variants and supports icons, as well as text labels. diff --git a/articles/components/button/styling.adoc b/articles/components/button/styling.adoc index 3324c02884..85b9466a9f 100644 --- a/articles/components/button/styling.adoc +++ b/articles/components/button/styling.adoc @@ -7,7 +7,7 @@ order: 50 --- -= Styling += Button Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/card/index.adoc b/articles/components/card/index.adoc index 019774f8d5..c3ba9ac970 100644 --- a/articles/components/card/index.adoc +++ b/articles/components/card/index.adoc @@ -4,7 +4,6 @@ page-title: Card component | Vaadin components description: The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance. meta-description: The Card component is a versatile container for grouping related content and actions, with several customization options for layout and appearance. version: since:com.vaadin:vaadin@V24.8 -layout: tabbed-page page-links: - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/card}/elements/vaadin-card[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/card/Card.html[Java]' - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/card}/packages/card[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-card-flow-parent[Java]' diff --git a/articles/components/card/styling.adoc b/articles/components/card/styling.adoc index f4869198dc..446010cc3d 100644 --- a/articles/components/card/styling.adoc +++ b/articles/components/card/styling.adoc @@ -7,7 +7,7 @@ order: 50 --- -= Styling += Card Styling == Style Variants diff --git a/articles/components/charts/basic-use.adoc b/articles/components/charts/basic-use.adoc index 98002bf0eb..c952cf6956 100644 --- a/articles/components/charts/basic-use.adoc +++ b/articles/components/charts/basic-use.adoc @@ -8,7 +8,7 @@ order: 3 [[charts.basic-use]] -= Basic Use += Charts – Basic Use The [classname]`Chart` class is a regular component which you can add to a layout. You can give the chart type in the constructor or set it later in the chart model. diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc index b92f28d956..3db06859ca 100644 --- a/articles/components/charts/styling/styling.adoc +++ b/articles/components/charts/styling/styling.adoc @@ -7,7 +7,7 @@ order: 50 --- -= Styling += Chart Style Properties include::../../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/charts/timeline.adoc b/articles/components/charts/timeline.adoc index 835056f347..d1e26aadd2 100644 --- a/articles/components/charts/timeline.adoc +++ b/articles/components/charts/timeline.adoc @@ -8,7 +8,7 @@ order: 8 [[charts.timeline]] -= Timeline += Chart Timeline A charts timeline feature allows selecting different time ranges for which to display the chart data, as well as navigating between such ranges. It's especially useful when working with large time <>. diff --git a/articles/components/charts/usage-with-lit.adoc b/articles/components/charts/usage-with-lit.adoc index 29ee1e1f29..ccbea214c8 100644 --- a/articles/components/charts/usage-with-lit.adoc +++ b/articles/components/charts/usage-with-lit.adoc @@ -7,7 +7,7 @@ order: 11 --- -= Usage with Lit += Using Charts with Lit The sections that follow provide examples of certain Chart types with Lit. diff --git a/articles/components/charts/usage-with-react.adoc b/articles/components/charts/usage-with-react.adoc index d7d6dca863..d4b7501ac5 100644 --- a/articles/components/charts/usage-with-react.adoc +++ b/articles/components/charts/usage-with-react.adoc @@ -7,7 +7,7 @@ order: 10 --- -= Usage with React += Using Charts with React The sections that follow provide examples of certain Chart types with React. diff --git a/articles/components/checkbox/index.adoc b/articles/components/checkbox/index.adoc index 670b946f06..18633bb329 100644 --- a/articles/components/checkbox/index.adoc +++ b/articles/components/checkbox/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Checkbox page-title: Checkbox component | Vaadin components description: How to use Checkbox, an input field for a binary choice and Checkbox Group to group related items. diff --git a/articles/components/checkbox/styling.adoc b/articles/components/checkbox/styling.adoc index a20afae4a0..0541172bf0 100644 --- a/articles/components/checkbox/styling.adoc +++ b/articles/components/checkbox/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Checkbox component. meta-description: Customize the appearance of the Vaadin Checkbox component to align with your application’s theme. order: 50 --- -= Styling += Checkbox Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/combo-box/index.adoc b/articles/components/combo-box/index.adoc index 1a95620317..c97e39fae1 100644 --- a/articles/components/combo-box/index.adoc +++ b/articles/components/combo-box/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Combo Box page-title: Combo Box component | Vaadin components description: Combo Box allows the user to choose a value from a filterable list of options presented in an overlay. diff --git a/articles/components/combo-box/styling.adoc b/articles/components/combo-box/styling.adoc index a6c2294c59..d826ba2789 100644 --- a/articles/components/combo-box/styling.adoc +++ b/articles/components/combo-box/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Combo Box component. meta-description: Customize and style the Vaadin Combo Box component to fit your app's design system. order: 50 --- -= Styling += Combo Box Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/confirm-dialog/index.adoc b/articles/components/confirm-dialog/index.adoc index ba2678c442..8f9e046f23 100644 --- a/articles/components/confirm-dialog/index.adoc +++ b/articles/components/confirm-dialog/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Confirm Dialog page-title: Confirm Dialog component | Vaadin components description: Confirm Dialog is a modal Dialog used to confirm user actions. diff --git a/articles/components/confirm-dialog/styling.adoc b/articles/components/confirm-dialog/styling.adoc index 024f1e372f..6b86346382 100644 --- a/articles/components/confirm-dialog/styling.adoc +++ b/articles/components/confirm-dialog/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Confirm Dialog component. meta-description: Learn to style the Vaadin Confirm Dialog component with custom themes and CSS. Discover tips and examples for creating visually consistent and unique dialogs. order: 50 --- -= Styling += Confirm Dialog Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/context-menu/index.adoc b/articles/components/context-menu/index.adoc index eb47fc0929..71af9bc206 100644 --- a/articles/components/context-menu/index.adoc +++ b/articles/components/context-menu/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Context Menu page-title: Context Menu component | Vaadin components description: Context Menu is a component that can be attached to any component to display a context menu. diff --git a/articles/components/context-menu/styling.adoc b/articles/components/context-menu/styling.adoc index e28dd79b66..ed459de98b 100644 --- a/articles/components/context-menu/styling.adoc +++ b/articles/components/context-menu/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Context Menu component. meta-description: Customize the Vaadin Context Menu component for an intuitive user interface. order: 50 --- -= Styling += Context Menu Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/crud/index.adoc b/articles/components/crud/index.adoc index 7e22e0d5aa..d81c7b6e40 100644 --- a/articles/components/crud/index.adoc +++ b/articles/components/crud/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: CRUD page-title: CRUD component | Vaadin components description: CRUD is a component for managing a dataset. It allows for easy displaying, editing, creating, and deleting of items. diff --git a/articles/components/crud/styling.adoc b/articles/components/crud/styling.adoc index 274a04572c..6fd3fd6ed8 100644 --- a/articles/components/crud/styling.adoc +++ b/articles/components/crud/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the CRUD component. meta-description: Style the Vaadin CRUD component for a polished and user-friendly data management interface. order: 50 --- -= Styling += Crud Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/custom-field/index.adoc b/articles/components/custom-field/index.adoc index f7cd4e1036..9eb1185663 100644 --- a/articles/components/custom-field/index.adoc +++ b/articles/components/custom-field/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Custom Field page-title: Custom Field component | Vaadin components description: Use Custom Field for wrapping multiple components as a single field. diff --git a/articles/components/custom-field/styling.adoc b/articles/components/custom-field/styling.adoc index 7d4a9f877c..e3abab417e 100644 --- a/articles/components/custom-field/styling.adoc +++ b/articles/components/custom-field/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Custom Field component. meta-description: Learn to style the Vaadin Custom Field component to align with your application’s design requirements. order: 50 --- -= Styling += Custom Field Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/dashboard/index.adoc b/articles/components/dashboard/index.adoc index c17e73588d..e52ae27527 100644 --- a/articles/components/dashboard/index.adoc +++ b/articles/components/dashboard/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Dashboard description: A component for building static dashboard layouts and dynamic, user-configurable dashboards. page-links: diff --git a/articles/components/dashboard/styling.adoc b/articles/components/dashboard/styling.adoc index d57fb343ae..f10bbfb0ce 100644 --- a/articles/components/dashboard/styling.adoc +++ b/articles/components/dashboard/styling.adoc @@ -3,7 +3,7 @@ title: Styling description: Styling API reference for the Dashboard component. order: 50 --- -= Styling += Dashboard Styling == Style Variants diff --git a/articles/components/date-picker/date-formats.adoc b/articles/components/date-picker/date-formats.adoc index 39f7d17b80..94a48822c7 100644 --- a/articles/components/date-picker/date-formats.adoc +++ b/articles/components/date-picker/date-formats.adoc @@ -7,7 +7,7 @@ order: 60 --- -= Date Formats += Date Picker Formats Date Picker can be configured to display dates and parse user input in a specific format. In Flow, you can control the date format using <> or <>. The default format is based on the user's locale. In React and Lit, you can customize the date format with <>. The default format is US English. diff --git a/articles/components/date-picker/index.adoc b/articles/components/date-picker/index.adoc index 3138a3dda4..f471101f7c 100644 --- a/articles/components/date-picker/index.adoc +++ b/articles/components/date-picker/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Date Picker page-title: Date Picker component | Vaadin components description: Date Picker is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay. diff --git a/articles/components/date-picker/styling.adoc b/articles/components/date-picker/styling.adoc index 0a0ec49b18..09e161b0af 100644 --- a/articles/components/date-picker/styling.adoc +++ b/articles/components/date-picker/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Date Picker component. meta-description: Learn how to customize the appearance of the Vaadin Date Picker component. order: 50 --- -= Styling += Date Picker Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/date-time-picker/index.adoc b/articles/components/date-time-picker/index.adoc index 8a9cdf5e45..c3697b7179 100644 --- a/articles/components/date-time-picker/index.adoc +++ b/articles/components/date-time-picker/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Date Time Picker page-title: Date Time Picker component | Vaadin components description: Date Time Picker is an input field for selecting both a date and a time. diff --git a/articles/components/date-time-picker/styling.adoc b/articles/components/date-time-picker/styling.adoc index cf05fb2cdf..9998ef7c05 100644 --- a/articles/components/date-time-picker/styling.adoc +++ b/articles/components/date-time-picker/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Date Time Picker component. meta-description: Customize the design of the Vaadin Date Time Picker component for a better user experience. order: 50 --- -= Styling += Date Time Picker Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/details/index.adoc b/articles/components/details/index.adoc index 85ccb6dde5..f513d00034 100644 --- a/articles/components/details/index.adoc +++ b/articles/components/details/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Details page-title: Details component | Vaadin components description: Details is an expandable panel for showing and hiding content from the user, to make the UI less cluttered. diff --git a/articles/components/details/styling.adoc b/articles/components/details/styling.adoc index 2c106391d6..4cc1cb6d95 100644 --- a/articles/components/details/styling.adoc +++ b/articles/components/details/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Details component. meta-description: Customize the Vaadin Details component for a cohesive application user interface. order: 50 --- -= Styling += Details Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/dialog/index.adoc b/articles/components/dialog/index.adoc index 99c59ad7f7..05e4bf5649 100644 --- a/articles/components/dialog/index.adoc +++ b/articles/components/dialog/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Dialog page-title: Dialog component | Vaadin components description: Dialog is a small window that can be used to present information and user interface elements in an overlay. diff --git a/articles/components/dialog/styling.adoc b/articles/components/dialog/styling.adoc index d289624062..547ab6240a 100644 --- a/articles/components/dialog/styling.adoc +++ b/articles/components/dialog/styling.adoc @@ -6,7 +6,7 @@ meta-description: Customize the Vaadin Dialog component to match your applicatio order: 50 --- -= Styling += Dialog Styling :toclevels: 2 include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index d07927dbe6..3e5c5530e5 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Email Field page-title: Email Field component | Vaadin components description: Email Field is an extension of Text Field that accepts only email addresses as input. diff --git a/articles/components/email-field/styling.adoc b/articles/components/email-field/styling.adoc index 92a666c56b..0337a36825 100644 --- a/articles/components/email-field/styling.adoc +++ b/articles/components/email-field/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Email Field component. meta-description: Customize the Vaadin Email Field component with CSS to match your application's theme. Learn tips for enhancing user input fields. order: 50 --- -= Styling += Email Field Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/form-layout/index.adoc b/articles/components/form-layout/index.adoc index 00ccd1364e..7db020aa86 100644 --- a/articles/components/form-layout/index.adoc +++ b/articles/components/form-layout/index.adoc @@ -3,8 +3,6 @@ title: Form Layout page-title: Form Layout component | Vaadin components description: Using Form Layout to build responsive forms with multiple columns and better positioned input labels. meta-description: Use the Form Layout component in Vaadin to create responsive and structured forms. -tab-title: Usage -layout: tabbed-page page-links: - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/form-layout}/elements/vaadin-form-layout[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/formlayout/FormLayout.html[Java]' - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/form-layout}/packages/form-layout[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-form-layout-flow-parent[Java]' diff --git a/articles/components/form-layout/styling.adoc b/articles/components/form-layout/styling.adoc index 0833eda9fa..ed584d1fb3 100644 --- a/articles/components/form-layout/styling.adoc +++ b/articles/components/form-layout/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Form Layout component. meta-description: Customize the Vaadin Form layout component to match your application's style and improve user experience. order: 50 --- -= Styling += Form Layout Styling include::../_styling-section-intros.adoc[tag=properties] diff --git a/articles/components/grid-pro/index.adoc b/articles/components/grid-pro/index.adoc index 18d091ba25..2b770f64f6 100644 --- a/articles/components/grid-pro/index.adoc +++ b/articles/components/grid-pro/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Grid Pro page-title: Grid Pro component | Vaadin components description: Grid Pro, an extension of Grid, provides inline editing with full keyboard navigation. diff --git a/articles/components/grid-pro/styling.adoc b/articles/components/grid-pro/styling.adoc index f752075378..e25f1855a1 100644 --- a/articles/components/grid-pro/styling.adoc +++ b/articles/components/grid-pro/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Grid Pro component. meta-description: Learn to style the Grid Pro component for your Vaadin applications with examples and best practices. order: 50 --- -= Styling += Grid Pro Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/grid/columns.adoc b/articles/components/grid/columns.adoc index 48aa5028ba..4565640863 100644 --- a/articles/components/grid/columns.adoc +++ b/articles/components/grid/columns.adoc @@ -6,7 +6,7 @@ order: 10 --- -= Columns += Grid Columns Column alignment, freezing (i.e. fixed positioning), grouping, headers and footers, visibility, and width can be configured. Users can be allowed to resize and reorder columns. diff --git a/articles/components/grid/drag-drop.adoc b/articles/components/grid/drag-drop.adoc index 98461011b8..d6aae68ada 100644 --- a/articles/components/grid/drag-drop.adoc +++ b/articles/components/grid/drag-drop.adoc @@ -6,7 +6,7 @@ order: 40 --- -= Drag & Drop += Grid Drag & Drop Grid supports drag-and-drop actions. This feature might be used, for example, to reorder rows and to drag rows between grids. diff --git a/articles/components/grid/index.adoc b/articles/components/grid/index.adoc index 3c7cc00d7a..6e663f46e9 100644 --- a/articles/components/grid/index.adoc +++ b/articles/components/grid/index.adoc @@ -3,8 +3,6 @@ title: Grid page-title: Grid component | Vaadin components description: Vaadin Grid is a component for displaying tabular data, including various enhancements to grid renderings. meta-description: Use the Vaadin Grid component to display tabular data, including various enhancements to grid renderings. -tab-title: Usage -layout: tabbed-page page-links: - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/grid}/elements/vaadin-grid[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/grid/Grid.html[Java]' - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/grid}/packages/grid[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-grid-flow-parent[Java]' diff --git a/articles/components/grid/inline-editing.adoc b/articles/components/grid/inline-editing.adoc index 8c25ad32e4..ec7f0156ee 100644 --- a/articles/components/grid/inline-editing.adoc +++ b/articles/components/grid/inline-editing.adoc @@ -7,7 +7,7 @@ section-nav: badge-flow --- -= Inline Editing [badge-flow]#Flow# += Grid Inline Editing [badge-flow]#Flow# The Flow Grid component can be configured to allow inline editing. Editing can be either buffered or non-buffered. Buffered means changes must be explicitly committed, while non-buffered means it automatically commits changes on blur -- that is to say, when a field loses focus. diff --git a/articles/components/grid/renderers.adoc b/articles/components/grid/renderers.adoc index 17eb84e3b2..c139de614b 100644 --- a/articles/components/grid/renderers.adoc +++ b/articles/components/grid/renderers.adoc @@ -2,11 +2,11 @@ title: Renderers page-title: Using renderers in the Vaadin Grid component meta-description: Use renderers to render the contents of a Vaadin Grid component's specific columns using components and native HTML elements. -order: 20 +order: 30 --- -= Renderers += Grid Renderers Although most grid content is typically plain text, cell renderers can be used to render the contents of specific columns using components and native HTML elements. diff --git a/articles/components/grid/selection.adoc b/articles/components/grid/selection.adoc index 63e8223c55..87263823d9 100644 --- a/articles/components/grid/selection.adoc +++ b/articles/components/grid/selection.adoc @@ -1,10 +1,10 @@ --- title: Selection -order: 40 +order: 20 --- -= Selection += Grid Selection Grid supports single and multi-select modes. Neither is enabled by default. diff --git a/articles/components/grid/styling.adoc b/articles/components/grid/styling.adoc index d22912e42d..0b3e044917 100644 --- a/articles/components/grid/styling.adoc +++ b/articles/components/grid/styling.adoc @@ -3,11 +3,11 @@ title: Styling page-title: How to style the Grid component | Vaadin components description: Styling API reference for the Grid component. meta-description: Learn how to style the Vaadin Grid component to match your Vaadin application's design. -order: 30 +order: 60 --- -= Styling += Grid Styling The look and feel of the Grid component can be customized in several ways: a set of built-in theme variants, customizable style properties and CSS selectors, and several different APIs for applying part names to header, footer and body cells. diff --git a/articles/components/icons/default-icons.adoc b/articles/components/icons/default-icons.adoc index 6f72d3f825..599ad4ef6c 100644 --- a/articles/components/icons/default-icons.adoc +++ b/articles/components/icons/default-icons.adoc @@ -6,7 +6,7 @@ order: 50 --- -= Default Icons += Built-In Icons The icon component renders these icons as inline SVGs by default, but both are also available as font icons and standalone SVG images. diff --git a/articles/components/icons/index.adoc b/articles/components/icons/index.adoc index 53c7f84a7d..f68c5a659c 100644 --- a/articles/components/icons/index.adoc +++ b/articles/components/icons/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Icons page-title: Icons | Vaadin components description: Lumo and Vaadin icons and how to use them in your projects. diff --git a/articles/components/list-box/index.adoc b/articles/components/list-box/index.adoc index e1cb418b7f..8eb9cedabf 100644 --- a/articles/components/list-box/index.adoc +++ b/articles/components/list-box/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: List Box page-title: List Box component | Vaadin components description: List Box allows the user to select one or more values from a scrollable list of items. diff --git a/articles/components/list-box/styling.adoc b/articles/components/list-box/styling.adoc index 1596a07e81..17f8ddffec 100644 --- a/articles/components/list-box/styling.adoc +++ b/articles/components/list-box/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the List Box component. meta-description: Learn how to customize the appearance of the Vaadin List Box component with CSS for a better user experience. order: 50 --- -= Styling += List Box Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/login/index.adoc b/articles/components/login/index.adoc index 2d33659e71..ef99cbaab6 100644 --- a/articles/components/login/index.adoc +++ b/articles/components/login/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Login page-title: Login component | Vaadin components description: Login is a component that contains a log-in form. You can use it to authenticate the user with a username and password. diff --git a/articles/components/login/styling.adoc b/articles/components/login/styling.adoc index 97c28cdb3b..349d1e9bd2 100644 --- a/articles/components/login/styling.adoc +++ b/articles/components/login/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Login component. meta-description: Learn how to customize the appearance of the Vaadin List Box component with CSS for a better user experience. order: 50 --- -= Styling += Login Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/master-detail-layout/index.adoc b/articles/components/master-detail-layout/index.adoc index 5597e0dc34..b6ebeade6e 100644 --- a/articles/components/master-detail-layout/index.adoc +++ b/articles/components/master-detail-layout/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Master-Detail Layout page-title: Master-Detail component | Vaadin components description: Master-Detail Layout makes it easy to create responsive horizontally or vertically split UIs. diff --git a/articles/components/master-detail-layout/styling.adoc b/articles/components/master-detail-layout/styling.adoc index 16029eb735..2d120f45d7 100644 --- a/articles/components/master-detail-layout/styling.adoc +++ b/articles/components/master-detail-layout/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Master Detail Layout component. meta-description: Customize the appearance of the Vaadin Master Detail Layout component to align with your application's theme. order: 50 --- -= Styling += Master-Detail Layout Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/menu-bar/index.adoc b/articles/components/menu-bar/index.adoc index 8bf97fc2e9..1203549448 100644 --- a/articles/components/menu-bar/index.adoc +++ b/articles/components/menu-bar/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Menu Bar page-title: Menu Bar Component | Vaadin components description: Menu Bar is a horizontal button bar with hierarchical drop-down menus. diff --git a/articles/components/menu-bar/styling.adoc b/articles/components/menu-bar/styling.adoc index ebffba05c3..3151779e67 100644 --- a/articles/components/menu-bar/styling.adoc +++ b/articles/components/menu-bar/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Menu Bar component. meta-description: Customize the appearance of the Vaadin Menu Bar component to align with your application's theme. order: 50 --- -= Styling += Menu Bar Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/message-input/index.adoc b/articles/components/message-input/index.adoc index 95eb1e9c01..7739ef6fe8 100644 --- a/articles/components/message-input/index.adoc +++ b/articles/components/message-input/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Message Input page-title: Message Input component | Vaadin components description: Message Input allows users to author and send messages. diff --git a/articles/components/message-input/styling.adoc b/articles/components/message-input/styling.adoc index 0ad00a083c..bca30705c2 100644 --- a/articles/components/message-input/styling.adoc +++ b/articles/components/message-input/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Message Input component. meta-description: Style the Vaadin Message Input component to align with your application's design and enhance user experience. order: 50 --- -= Styling += Message Input Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/message-list/index.adoc b/articles/components/message-list/index.adoc index d64e1f7e92..ee1f936805 100644 --- a/articles/components/message-list/index.adoc +++ b/articles/components/message-list/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Message List page-title: Message List component | Vaadin components description: Message List allows you to show a list of messages, for example, a chat log. diff --git a/articles/components/message-list/styling.adoc b/articles/components/message-list/styling.adoc index 7b630b2244..2cef34a1bf 100644 --- a/articles/components/message-list/styling.adoc +++ b/articles/components/message-list/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Message List component. meta-description: Customize the appearance of the Vaadin Message List component for a polished user interface. order: 50 --- -= Styling += Message List Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/multi-select-combo-box/index.adoc b/articles/components/multi-select-combo-box/index.adoc index c1a573aab5..f7de16ea7d 100644 --- a/articles/components/multi-select-combo-box/index.adoc +++ b/articles/components/multi-select-combo-box/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Multi-Select Combo Box page-title: Multi-Select Combo Box component | Vaadin components description: Adding a combo box to a project for users to be able to make multiple selections. diff --git a/articles/components/multi-select-combo-box/styling.adoc b/articles/components/multi-select-combo-box/styling.adoc index b7dc1b605b..94337b6cfb 100644 --- a/articles/components/multi-select-combo-box/styling.adoc +++ b/articles/components/multi-select-combo-box/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Multi-Select Combo Box component. meta-description: Customize the look and behavior of multi-select combo boxes in your Vaadin applications for a better user experience. order: 50 --- -= Styling += Multi-Select Combo Box Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/notification/index.adoc b/articles/components/notification/index.adoc index cf8d7e52f7..afcf75fe1f 100644 --- a/articles/components/notification/index.adoc +++ b/articles/components/notification/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Notification page-title: Notification component | Vaadin components description: Notification is used to provide feedback to the user about activities, processes, and events in the application. diff --git a/articles/components/notification/styling.adoc b/articles/components/notification/styling.adoc index b84cfccdee..c2d5a1c68b 100644 --- a/articles/components/notification/styling.adoc +++ b/articles/components/notification/styling.adoc @@ -7,7 +7,7 @@ order: 50 --- -= Styling += Notification Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index 6a03f8bb2d..2dbdae61db 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Number Field page-title: Number Field component | Vaadin components description: Number Field is an input field that accepts only numeric input. diff --git a/articles/components/number-field/styling.adoc b/articles/components/number-field/styling.adoc index cd0034a3c3..37d35d1d02 100644 --- a/articles/components/number-field/styling.adoc +++ b/articles/components/number-field/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Number Field component. meta-description: Style the Vaadin Number Field component to align it with your application's design requirements. order: 50 --- -= Styling += Number Field Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index cfde866b76..3c02aba696 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Password Field page-title: Password Field component | Vaadin components description: Password Field is an input field for entering passwords. diff --git a/articles/components/password-field/styling.adoc b/articles/components/password-field/styling.adoc index c4ab9e4e2b..c43be51a31 100644 --- a/articles/components/password-field/styling.adoc +++ b/articles/components/password-field/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Password Field component. meta-description: Discover techniques for styling the Vaadin Password Field component for better user experience. order: 50 --- -= Styling += Password Field Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/popover/index.adoc b/articles/components/popover/index.adoc index 868b382878..f3b5b600fd 100644 --- a/articles/components/popover/index.adoc +++ b/articles/components/popover/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Popover page-title: Popover component | Vaadin components description: Popover is a generic overlay whose position is anchored to an element in the UI. diff --git a/articles/components/popover/styling.adoc b/articles/components/popover/styling.adoc index affcde8848..f82e2ef4ca 100644 --- a/articles/components/popover/styling.adoc +++ b/articles/components/popover/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Popover component. meta-description: Style the Vaadin Popover component to align it with your application's design requirements. order: 50 --- -= Styling += Popover Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/progress-bar/index.adoc b/articles/components/progress-bar/index.adoc index fb85c7b4cf..64956d9746 100644 --- a/articles/components/progress-bar/index.adoc +++ b/articles/components/progress-bar/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Progress Bar page-title: Progress Bar component | Vaadin components description: Progress Bar shows the amount of completion of a task or process. diff --git a/articles/components/progress-bar/styling.adoc b/articles/components/progress-bar/styling.adoc index 7fd72d724b..e906ae2972 100644 --- a/articles/components/progress-bar/styling.adoc +++ b/articles/components/progress-bar/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Progress Bar component. meta-description: Enhance the look of your Vaadin Progress Bar component using CSS. Customize styles to align with your application's design. order: 50 --- -= Styling += Progress Bar Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/radio-button/index.adoc b/articles/components/radio-button/index.adoc index 051fa74e8b..bfef464fdf 100644 --- a/articles/components/radio-button/index.adoc +++ b/articles/components/radio-button/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Radio Button page-title: Radio Button component | Vaadin components description: Radio Button Group allows users to select one value among multiple choices. diff --git a/articles/components/radio-button/styling.adoc b/articles/components/radio-button/styling.adoc index f7958b0f6f..74904ceee8 100644 --- a/articles/components/radio-button/styling.adoc +++ b/articles/components/radio-button/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Radio Button and Radio Button Group c meta-description: Customize the look of the Vaadin Radio Button component in your applications to align with your design system. order: 50 --- -= Styling += Radio Button Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index bb210b4d4d..aff06ed24e 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Rich Text Editor page-title: Rich Text Editor component | Vaadin components description: Rich Text Editor allows the user to author text that has rich formatting. diff --git a/articles/components/rich-text-editor/styling.adoc b/articles/components/rich-text-editor/styling.adoc index 43fa31134b..690bb4aba4 100644 --- a/articles/components/rich-text-editor/styling.adoc +++ b/articles/components/rich-text-editor/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Rich Text Editor component. meta-description: Customize the Vaadin Rich Text Editor component to align with your application’s theme and branding. order: 50 --- -= Styling += Rich Text Editor Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/scroller/index.adoc b/articles/components/scroller/index.adoc index 95c82df5ed..946872bf9f 100644 --- a/articles/components/scroller/index.adoc +++ b/articles/components/scroller/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Scroller page-title: Scroller component | Vaadin components description: Scroller is a component container for creating scrollable areas in the UI. diff --git a/articles/components/scroller/styling.adoc b/articles/components/scroller/styling.adoc index 29da75c9a8..0909075819 100644 --- a/articles/components/scroller/styling.adoc +++ b/articles/components/scroller/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Scroller component. meta-description: Customize the Vaadin Rich Text Editor component to align with your application’s theme and branding. order: 50 --- -= Styling += Scroller Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/select/index.adoc b/articles/components/select/index.adoc index 3c87e4e667..a24e60d80b 100644 --- a/articles/components/select/index.adoc +++ b/articles/components/select/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Select page-title: Select component | Vaadin components description: Select allows users to choose a single value from a list of options presented in an overlay. diff --git a/articles/components/select/styling.adoc b/articles/components/select/styling.adoc index b658d6579a..5fe0114974 100644 --- a/articles/components/select/styling.adoc +++ b/articles/components/select/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Select component. meta-description: Learn to customize the appearance and behavior of the Vaadin Select component in your application. Create visually cohesive and user-friendly dropdowns. order: 50 --- -= Styling += Select Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/side-nav/index.adoc b/articles/components/side-nav/index.adoc index 51c3785c56..a97cb096bf 100644 --- a/articles/components/side-nav/index.adoc +++ b/articles/components/side-nav/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Side Navigation page-title: Side Navigation component | Vaadin components description: Side Navigation provides a vertical list of navigation links with support for collapsible, nested sections. diff --git a/articles/components/side-nav/styling.adoc b/articles/components/side-nav/styling.adoc index 03afb4183b..d49db122a7 100644 --- a/articles/components/side-nav/styling.adoc +++ b/articles/components/side-nav/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Side Nav component. meta-description: Explore styling options for creating a visually appealing side navigation in your Vaadin applications. order: 50 --- -= Styling += Side Navigation Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/split-layout/index.adoc b/articles/components/split-layout/index.adoc index 274127e4ba..7059d20950 100644 --- a/articles/components/split-layout/index.adoc +++ b/articles/components/split-layout/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Split Layout page-title: Split Layout component | Vaadin components description: Split Layout is a component with two content areas and a draggable split handle between them. diff --git a/articles/components/split-layout/styling.adoc b/articles/components/split-layout/styling.adoc index 2540d836d2..c7f65093b9 100644 --- a/articles/components/split-layout/styling.adoc +++ b/articles/components/split-layout/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Split Layout component. meta-description: Learn various ways to customize and style the Vaadin Split Layout component in your applications. order: 50 --- -= Styling += Split Layout Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/spreadsheet/index.adoc b/articles/components/spreadsheet/index.adoc index e7b1ef739a..85b20f6024 100644 --- a/articles/components/spreadsheet/index.adoc +++ b/articles/components/spreadsheet/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Spreadsheet page-title: Spreadsheet component | Vaadin components description: Spreadsheet allows displaying and interacting with the contents of an Excel file. diff --git a/articles/components/spreadsheet/styling.adoc b/articles/components/spreadsheet/styling.adoc index 924268a35f..fd16829c56 100644 --- a/articles/components/spreadsheet/styling.adoc +++ b/articles/components/spreadsheet/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Spreadsheet component. meta-description: Customize the appearance of the Spreadsheet in Vaadin applications. order: 50 --- -= Styling += Spreadsheet Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/tabs/index.adoc b/articles/components/tabs/index.adoc index 34d0ee51b0..72499b3ca2 100644 --- a/articles/components/tabs/index.adoc +++ b/articles/components/tabs/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Tabs page-title: Tabs component | Vaadin components description: Tabs are used to organize and group content into sections that the user can navigate. diff --git a/articles/components/tabs/styling.adoc b/articles/components/tabs/styling.adoc index 44a1740281..960b2d6358 100644 --- a/articles/components/tabs/styling.adoc +++ b/articles/components/tabs/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Tab Sheet and Tabs components. meta-description: Learn how to customize the appearance of the Tab Sheet and Tabs components to match your application design. order: 50 --- -= Styling += Tabs Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index 0943996dfb..5e67d584d0 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Text Area page-title: Text Area component | Vaadin components description: Text Area is an input field component that allows entry of multiple lines of text. diff --git a/articles/components/text-area/styling.adoc b/articles/components/text-area/styling.adoc index 4402ca7fb8..8bd99895b4 100644 --- a/articles/components/text-area/styling.adoc +++ b/articles/components/text-area/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Text Area component. meta-description: Learn various ways to customize and style the Vaadin Text Area component in your application. order: 50 --- -= Styling += Text Area Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index b2146035ba..14cd073b82 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Text Field page-title: Text Field component | Vaadin components description: Text Field allows users to enter text. diff --git a/articles/components/text-field/styling.adoc b/articles/components/text-field/styling.adoc index debba35057..674215e352 100644 --- a/articles/components/text-field/styling.adoc +++ b/articles/components/text-field/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Text Field component. meta-description: Customize the Vaadin Text Field component to align with the design requirements of your application. order: 50 --- -= Styling += Text Field Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/time-picker/index.adoc b/articles/components/time-picker/index.adoc index b47a82bacd..c98becfa1c 100644 --- a/articles/components/time-picker/index.adoc +++ b/articles/components/time-picker/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Time Picker page-title: Time Picker component | Vaadin components description: Time Picker is an input field used for entering or selecting a specific time. diff --git a/articles/components/time-picker/styling.adoc b/articles/components/time-picker/styling.adoc index 8d945ee6ba..56ceff9825 100644 --- a/articles/components/time-picker/styling.adoc +++ b/articles/components/time-picker/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Time Picker component. meta-description: Customize the appearance of the Vaadin Time Picker component with advanced styling options. order: 50 --- -= Styling += Time Picker Styling include::../_styling-section-theming-props.adoc[tag=style-properties] diff --git a/articles/components/tooltip/index.adoc b/articles/components/tooltip/index.adoc index cbf3b30c46..778726f0bf 100644 --- a/articles/components/tooltip/index.adoc +++ b/articles/components/tooltip/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Tooltip page-title: Tooltip component | Vaadin components description: Tooltips are small pop-ups for providing additional information about other UI elements. diff --git a/articles/components/tooltip/styling.adoc b/articles/components/tooltip/styling.adoc index 3854aa2593..6f606acd2e 100644 --- a/articles/components/tooltip/styling.adoc +++ b/articles/components/tooltip/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Tooltip component. meta-description: Explore how to style the Vaadin Tooltip component for better contextual information display in your application. order: 50 --- -= Styling += Tooltip Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/tree-grid/index.adoc b/articles/components/tree-grid/index.adoc index 489812577e..206541f7ed 100644 --- a/articles/components/tree-grid/index.adoc +++ b/articles/components/tree-grid/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: Usage -layout: tabbed-page title: Tree Grid page-title: Tree Grid component | Vaadin components description: The Tree Grid component displays hierarchical tabular data grouped in expandable nodes. diff --git a/articles/components/tree-grid/styling.adoc b/articles/components/tree-grid/styling.adoc index fc6d0c5ab6..689995c17f 100644 --- a/articles/components/tree-grid/styling.adoc +++ b/articles/components/tree-grid/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Tree Grid component. meta-description: Customize the appearance and behavior of the Vaadin Tree Grid component in your application. order: 50 --- -= Styling += Tree Grid Styling include::../_styling-section-intros.adoc[tag=selectors] diff --git a/articles/components/upload/file-handling.adoc b/articles/components/upload/file-handling.adoc index 1aa4dfeb97..0ec58db9b4 100644 --- a/articles/components/upload/file-handling.adoc +++ b/articles/components/upload/file-handling.adoc @@ -7,7 +7,7 @@ order: 60 --- -= File Handling += Upload File Handling The uploading of files may be handled either with Vaadin Flow using Java, or with Hilla using Lit and React. These are described in the two major sections here. diff --git a/articles/components/upload/index.adoc b/articles/components/upload/index.adoc index 4aa65abea8..0f7c02920d 100644 --- a/articles/components/upload/index.adoc +++ b/articles/components/upload/index.adoc @@ -3,8 +3,6 @@ title: Upload page-title: Upload component | Vaadin components description: Upload allows the user to upload files, giving feedback to the user during the upload process. meta-description: Use the Vaadin Upload component to allow users to upload files, giving feedback during the upload process in your application. -tab-title: Usage -layout: tabbed-page page-links: - 'API: https://cdn.vaadin.com/vaadin-web-components/{moduleNpmVersion:@vaadin/upload}/elements/vaadin-upload[TypeScript] / https://vaadin.com/api/platform/{moduleMavenVersion:com.vaadin:vaadin}/com/vaadin/flow/component/upload/Upload.html[Java]' - 'Source: https://github.com/vaadin/web-components/tree/v{moduleNpmVersion:@vaadin/upload}/packages/upload[TypeScript] / https://github.com/vaadin/flow-components/tree/{moduleMavenVersion:com.vaadin:vaadin}/vaadin-upload-flow-parent[Java]' diff --git a/articles/components/upload/styling.adoc b/articles/components/upload/styling.adoc index cf76f1473c..375b80dac7 100644 --- a/articles/components/upload/styling.adoc +++ b/articles/components/upload/styling.adoc @@ -5,7 +5,7 @@ description: Styling API reference for the Upload component. meta-description: Learn how to style and customize the Vaadin Upload component for your application. order: 50 --- -= Styling += Upload Styling include::../_styling-section-intros.adoc[tag=selectors] From 1fab6be9d7beb914621dba253d19926a4a4d7e87 Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Tue, 25 Nov 2025 13:51:35 +0200 Subject: [PATCH 2/3] Rephrased references to "tab" to say "page" --- articles/components/grid/index.adoc | 2 +- articles/components/icons/index.adoc | 2 +- articles/styling/styling-components.adoc | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/articles/components/grid/index.adoc b/articles/components/grid/index.adoc index 6e663f46e9..9a7332bafb 100644 --- a/articles/components/grid/index.adoc +++ b/articles/components/grid/index.adoc @@ -15,7 +15,7 @@ page-links: Vaadin Grid is a component for displaying tabular data, including various enhancements to grid renderings. // end::description[] -Some of the more complex features of this component are described on separate tabs: +Some of the more complex features of this component are described on separate pages: * <> * <> diff --git a/articles/components/icons/index.adoc b/articles/components/icons/index.adoc index f68c5a659c..e4bbe15f17 100644 --- a/articles/components/icons/index.adoc +++ b/articles/components/icons/index.adoc @@ -79,7 +79,7 @@ include::{root}/frontend/demo/component/icons/react/vaadin-icons.tsx[render,tags endif::[] -- -The <<./default-icons#,Default Icons>> tab contains a list of the full Vaadin Icons collection. +The <<./default-icons#,Built-In Icons>> page contains a list of the full Vaadin Icons collection. ==== Lumo Icons diff --git a/articles/styling/styling-components.adoc b/articles/styling/styling-components.adoc index 9ebfb57128..1b11cb70e7 100644 --- a/articles/styling/styling-components.adoc +++ b/articles/styling/styling-components.adoc @@ -189,7 +189,7 @@ Various types of CSS selectors are used when applying custom CSS to Vaadin compo === Stylable Parts of Components -The various HTML elements that make up Vaadin components are listed on the Styling tab of each <<{articles}/components#,component documentation>> page. You'll see there four primary types of parts, each of which is associated with a different type of CSS selector. +The various HTML elements that make up Vaadin components are listed on the Styling page under each <<{articles}/components#,component documentation>> page. You'll see there four primary types of parts, each of which is associated with a different type of CSS selector. ==== Root Elements @@ -261,7 +261,7 @@ vaadin-month-calendar::part(date) { === Component States -The various states of a Vaadin component are listed on the Styling tab of each <<{articles}/components#,component documentation>> page. There you'll see three types of CSS selectors used for states: state attributes; state part-names; and pseudo classes. They're each described below, as well as how to negate state selectors. +The various states of a Vaadin component are listed on the Styling page under each <<{articles}/components#,component documentation>> page. There you'll see three types of CSS selectors used for states: state attributes; state part-names; and pseudo classes. They're each described below, as well as how to negate state selectors. ==== State Attributes From 912c6c4bde3fdf2808967a7eab6af08c734e096a Mon Sep 17 00:00:00 2001 From: rolfsmeds Date: Tue, 25 Nov 2025 13:53:35 +0200 Subject: [PATCH 3/3] A few more fixes --- articles/components/charts/styling/index.adoc | 2 -- articles/components/charts/styling/styling.adoc | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/articles/components/charts/styling/index.adoc b/articles/components/charts/styling/index.adoc index af71f8eb82..e6a80088b4 100644 --- a/articles/components/charts/styling/index.adoc +++ b/articles/components/charts/styling/index.adoc @@ -1,6 +1,4 @@ --- -tab-title: CSS Styling -layout: tabbed-page title: Chart Styling page-title: How to customize Vaadin charts with CSS description: How to style a chart with CSS in your project. diff --git a/articles/components/charts/styling/styling.adoc b/articles/components/charts/styling/styling.adoc index 3db06859ca..c1a18e10e3 100644 --- a/articles/components/charts/styling/styling.adoc +++ b/articles/components/charts/styling/styling.adoc @@ -7,7 +7,7 @@ order: 50 --- -= Chart Style Properties += Charts Style Properties include::../../_styling-section-theming-props.adoc[tag=style-properties]