Skip to content

Latest commit

 

History

History
135 lines (112 loc) · 4.52 KB

styling-component-instances.adoc

File metadata and controls

135 lines (112 loc) · 4.52 KB
title page-title description meta-description order
Styling Component Instances
How to style Component instances | Vaadin
Configuring and applying styles to specific instances of a component.
Style individual component instances in Vaadin for tailored user interfaces.
20

Styling Component Instances

Sometimes you need to apply different styles to specific instances of a component, instead of all components of a particular type. This can be done by applying a CSS class name to the components and using that in your CSS selector, or by scoping the styles to components contained in a particular parent element.

Applying CSS to Component Instances

CSS can be scoped to specific component instances by applying CSS class names to the components with the addClassName method and adding them to the HTML element selector prefixed with a period, as shown in the example here:

<source-info group="Flow"></source-info>
TextField tf = new TextField();
tf.addClassName("bordered");
<source-info group="React"></source-info>
<TextField className="bordered" />
<source-info group="Lit"></source-info>
<vaadin-text-field class="bordered"></vaadin-text-field>
vaadin-text-field.bordered::part(input-field) {
  background: white;
  border: 1px solid gray;
}
Note
CSS Class Names

CSS class names are identifier-attributes applied to HTML elements to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes.

Components with overlay elements – like Combo Box, Date Picker, and Menu Bar – have a separate API for applying class names to their overlays:

<source-info group="Flow"></source-info>
Select localeSelector = new Select("Locale", locChangeListener, locales);
localeSelector.setOverlayClassName("locales");
<source-info group="React"></source-info>
<Select overlayClass="locales" label="Locale" items={locales} />
<source-info group="Lit"></source-info>
<vaadin-select overlayClass="locales" label="Locale" .items="${this.locales}" />
vaadin-select-overlay.locales::part(overlay) {
  background: black;
  color: white;
}

Some components like Grid provide APIs for applying custom shadow part names to their internal elements, instead of class names.

The same approach can be used to scope styles to a particular view or other UI element.

Note
Custom Theme Names Supported, Not Recommended

In previous versions of Vaadin, a different feature called theme names was used to apply identifiers that were also propagated to overlays. This feature is still supported and is used for the built-in style variants in Vaadin components. However, it’s no longer the recommended approach for styling components or their overlays.

Applying CSS Based on Parent Element

CSS can also be scoped to components based on their parent elements – such as Horizontal Layout and Vertical Layout or HTML elements like divs – in which they are placed. This is done by applying a CSS class name to the parent element, and prefixing the selector with it:

<source-info group="Flow"></source-info>
VerticalLayout filterLayout = new VerticalLayout();
filters.addClassName("filter-layout");
TextField nameFilterField = new TextField();
filterLayout.add(nameFilterField);
<source-info group="React"></source-info>
<VerticalLayout className="filter-layout">
  <TextField />
</VerticalLayout>
<source-info group="Lit"></source-info>
<vaadin-vertical-layout class="filter-layout">
  <vaadin-text-field></vaadin-text-field>
</vaadin-vertical-layout>
.filterLayout vaadin-text-field::part(input-field) {
  background: white;
  border: 1px solid gray;
}

The parent element can be either the component’s nearest parent element or any outer parent element in the element hierarchy. This can be used to apply CSS to components in a specific view in the application, by applying a CSS class name to the view’s root layout element, and scoping component CSS blocks to it.

a83c6e13-e0fc-4e34-bcad-15dff01f8840