Skip to content

Commit 91a58a6

Browse files
web-padawanweb-padawan
authored
docs: add Combo Box item class name generator example (vaadin#3574)
1 parent d61abc9 commit 91a58a6

File tree

14 files changed

+369
-0
lines changed

14 files changed

+369
-0
lines changed

‎articles/components/combo-box/index.adoc‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,40 @@ endif::[]
166166

167167
Use a custom filter to allow the user to search by the rendered properties. It's recommended to make filtering case insensitive.
168168

169+
[role="since:com.vaadin:[email protected]"]
170+
== Item Class Names
171+
172+
Items can be styled dynamically, based on application logic and the data in the combo box, through custom class names.
173+
174+
[.example]
175+
--
176+
177+
ifdef::lit[]
178+
[source,typescript]
179+
----
180+
include::{root}/frontend/demo/component/combobox/combo-box-item-class-name.ts[render,tags=snippet,indent=0,group=Lit]
181+
----
182+
endif::[]
183+
184+
ifdef::flow[]
185+
[source,java]
186+
----
187+
include::{root}/src/main/java/com/vaadin/demo/component/combobox/ComboBoxItemClassName.java[render,tags=snippet,indent=0,group=Flow]
188+
----
189+
endif::[]
190+
191+
ifdef::react[]
192+
[source,typescript]
193+
----
194+
include::{root}/frontend/demo/component/combobox/react/combo-box-item-class-name.tsx[render,tags=snippet,indent=0,group=React]
195+
----
196+
endif::[]
197+
198+
[source,css]
199+
----
200+
include::{root}/frontend/themes/docs/combo-box-item-class-name.css[]
201+
----
202+
--
169203

170204
== Auto Open
171205

‎articles/components/multi-select-combo-box/index.adoc‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,41 @@ include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-selec
251251
endif::[]
252252
--
253253

254+
[role="since:com.vaadin:[email protected]"]
255+
== Item Class Names
256+
257+
See <<../combo-box#item-class-names, Combo Box, Item Class Names>>. In addition to items in the overlay, custom class names also apply to chips representing selected items.
258+
259+
[.example]
260+
--
261+
262+
ifdef::lit[]
263+
[source,typescript]
264+
----
265+
include::{root}/frontend/demo/component/multi-select-combo-box/multi-select-combo-box-item-class-name.ts[render,tags=snippet,indent=0,group=Lit]
266+
----
267+
endif::[]
268+
269+
ifdef::flow[]
270+
[source,java]
271+
----
272+
include::{root}/src/main/java/com/vaadin/demo/component/multiselectcombobox/MultiSelectComboBoxItemClassName.java[render,tags=snippet,indent=0,group=Flow]
273+
----
274+
endif::[]
275+
276+
ifdef::react[]
277+
[source,typescript]
278+
----
279+
include::{root}/frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-item-class-name.tsx[render,tags=snippet,indent=0,group=React]
280+
----
281+
endif::[]
282+
283+
[source,css]
284+
----
285+
include::{root}/frontend/themes/docs/multi-select-combo-box-chip-class-name.css[]
286+
----
287+
--
288+
254289

255290
== Internationalization (i18n)
256291

‎frontend/demo/component/combobox/combo-box-item-class-name.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import 'Frontend/demo/init'; // hidden-source-line
2+
3+
import { html, LitElement } from 'lit';
4+
import { customElement, state } from 'lit/decorators.js';
5+
import '@vaadin/combo-box';
6+
import { applyTheme } from 'Frontend/generated/theme';
7+
8+
@customElement('combo-box-item-class-name')
9+
export class Example extends LitElement {
10+
protected override createRenderRoot() {
11+
const root = super.createRenderRoot();
12+
// Apply custom theme (only supported if your app uses one)
13+
applyTheme(root);
14+
return root;
15+
}
16+
17+
@state()
18+
private items = ['Apple', 'Banana', 'Orange', 'Pear'];
19+
20+
// tag::snippet[]
21+
protected override render() {
22+
return html`
23+
<vaadin-combo-box
24+
label="Fruit"
25+
.items="${this.items}"
26+
.itemClassNameGenerator="${this.classNameGenerator}"
27+
></vaadin-combo-box>
28+
`;
29+
}
30+
31+
protected classNameGenerator(item: string): string {
32+
switch (item) {
33+
case 'Apple':
34+
return 'coral';
35+
case 'Banana':
36+
return 'gold';
37+
case 'Orange':
38+
return 'orange';
39+
case 'Pear':
40+
return 'yellowgreen';
41+
default:
42+
return '';
43+
}
44+
}
45+
// end::snippet[]
46+
}

‎frontend/demo/component/combobox/react/combo-box-item-class-name.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
2+
import React from 'react';
3+
import { ComboBox } from '@vaadin/react-components/ComboBox.js';
4+
5+
function Example() {
6+
// tag::snippet[]
7+
const items = ['Apple', 'Banana', 'Orange', 'Pear'];
8+
9+
const classNameGenerator = (item: string) => {
10+
switch (item) {
11+
case 'Apple':
12+
return 'coral';
13+
case 'Banana':
14+
return 'gold';
15+
case 'Orange':
16+
return 'orange';
17+
case 'Pear':
18+
return 'yellowgreen';
19+
default:
20+
return '';
21+
}
22+
};
23+
24+
return <ComboBox label="Fruit" items={items} itemClassNameGenerator={classNameGenerator} />;
25+
// end::snippet[]
26+
}
27+
28+
export default reactExample(Example); // hidden-source-line

‎frontend/demo/component/multi-select-combo-box/multi-select-combo-box-item-class-name.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import 'Frontend/demo/init'; // hidden-source-line
2+
3+
import { css, html, LitElement } from 'lit';
4+
import { customElement, state } from 'lit/decorators.js';
5+
import '@vaadin/multi-select-combo-box';
6+
import { applyTheme } from 'Frontend/generated/theme';
7+
8+
@customElement('multi-select-combo-box-item-class-name')
9+
export class Example extends LitElement {
10+
static override styles = css`
11+
vaadin-multi-select-combo-box {
12+
width: 300px;
13+
}
14+
`;
15+
16+
protected override createRenderRoot() {
17+
const root = super.createRenderRoot();
18+
// Apply custom theme (only supported if your app uses one)
19+
applyTheme(root);
20+
return root;
21+
}
22+
23+
// tag::snippet[]
24+
@state()
25+
private items = ['Apple', 'Banana', 'Orange', 'Pear'];
26+
27+
protected override render() {
28+
return html`
29+
<vaadin-multi-select-combo-box
30+
label="Fruit"
31+
.items="${this.items}"
32+
.selectedItems="${this.items.slice(0, 2)}"
33+
.itemClassNameGenerator="${this.classNameGenerator}"
34+
></vaadin-multi-select-combo-box>
35+
`;
36+
}
37+
38+
protected classNameGenerator(item: string): string {
39+
switch (item) {
40+
case 'Apple':
41+
return 'coral';
42+
case 'Banana':
43+
return 'gold';
44+
case 'Orange':
45+
return 'orange';
46+
case 'Pear':
47+
return 'yellowgreen';
48+
default:
49+
return '';
50+
}
51+
}
52+
// end::snippet[]
53+
}

‎frontend/demo/component/multi-select-combo-box/react/multi-select-combo-box-item-class-name.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
2+
import React from 'react';
3+
import { MultiSelectComboBox } from '@vaadin/react-components/MultiSelectComboBox.js';
4+
5+
function Example() {
6+
// tag::snippet[]
7+
const items = ['Apple', 'Banana', 'Orange', 'Pear'];
8+
const selectedItems = items.slice(0, 2);
9+
10+
const classNameGenerator = (item: string) => {
11+
switch (item) {
12+
case 'Apple':
13+
return 'coral';
14+
case 'Banana':
15+
return 'gold';
16+
case 'Orange':
17+
return 'orange';
18+
case 'Pear':
19+
return 'yellowgreen';
20+
default:
21+
return '';
22+
}
23+
};
24+
25+
return (
26+
<MultiSelectComboBox
27+
label="Fruit"
28+
items={items}
29+
selectedItems={selectedItems}
30+
style={{ width: '300px' }}
31+
itemClassNameGenerator={classNameGenerator}
32+
/>
33+
);
34+
// end::snippet[]
35+
}
36+
37+
export default reactExample(Example); // hidden-source-line

‎frontend/themes/docs/combo-box-item-class-name.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* Add this to your document level CSS file: */
2+
/* frontend/theme/[my-theme]/document.css */
3+
4+
vaadin-combo-box-item.coral {
5+
color: coral;
6+
}
7+
8+
vaadin-combo-box-item.gold {
9+
color: gold;
10+
}
11+
12+
vaadin-combo-box-item.orange {
13+
color: orange;
14+
}
15+
16+
vaadin-combo-box-item.yellowgreen {
17+
color: yellowgreen;
18+
}

‎frontend/themes/docs/document.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import './combo-box-item-class-name.css';
2+
@import './multi-select-combo-box-item-class-name.css';

‎frontend/themes/docs/multi-select-combo-box-chip-class-name.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* Add this to your global CSS, for example in: */
2+
/* frontend/theme/[my-theme]/styles.css */
3+
4+
vaadin-multi-select-combo-box-chip.coral {
5+
background: coral;
6+
}
7+
8+
vaadin-multi-select-combo-box-chip.gold {
9+
background: gold;
10+
}
11+
12+
vaadin-multi-select-combo-box-chip.orange {
13+
background: orange;
14+
}
15+
16+
vaadin-multi-select-combo-box-chip.yellowgreen {
17+
background: yellowgreen;
18+
}

‎frontend/themes/docs/multi-select-combo-box-item-class-name.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* Add this to your document level CSS file: */
2+
/* frontend/theme/[my-theme]/document.css */
3+
4+
vaadin-multi-select-combo-box-item.coral {
5+
color: coral;
6+
}
7+
8+
vaadin-multi-select-combo-box-item.gold {
9+
color: gold;
10+
}
11+
12+
vaadin-multi-select-combo-box-item.orange {
13+
color: orange;
14+
}
15+
16+
vaadin-multi-select-combo-box-item.yellowgreen {
17+
color: yellowgreen;
18+
}

0 commit comments

Comments
 (0)