diff --git a/articles/components/grid-pro/index.adoc b/articles/components/grid-pro/index.adoc index 72ccccc01f..ed8c3e93c3 100644 --- a/articles/components/grid-pro/index.adoc +++ b/articles/components/grid-pro/index.adoc @@ -20,7 +20,7 @@ include::{articles}/_commercial-banner.adoc[opts=optional] Grid Pro is an extension of the Grid component that provides inline editing with full keyboard navigation. // end::description[] -[.example] +[.example,themes="lumo,aura"] -- ifdef::lit[] @@ -285,89 +285,6 @@ endif::[] -- -== Distinguish Editable from Read-Only - -Editable cells are indicated with a hover effect, by default. You can also distinguish them by highlighting either editable or read-only cells. This is good for grids containing both types of cells. - - -=== Highlight Editable - -Editable cells can be highlighted by applying the `highlight-editable-cells` theme variant. - -[.example] --- -ifdef::lit[] -[source,typescript] ----- -include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-editable-cells.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightEditableCells.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - -You can also apply custom styling to editable cells by targeting the `editable-cell` part in CSS. The following example shows how to apply custom styling to all Grid Pro elements that have the `editable-custom-effect` class name: - -[.example] --- -[source,css] ----- -/* Add this to your global CSS, for example in: */ -/* frontend/theme/[my-theme]/styles.css */ - -vaadin-grid-pro.editable-custom-effect::part(editable-cell):hover, -vaadin-grid-pro.editable-custom-effect::part(editable-cell focused-cell) { - background: var(--lumo-contrast-10pct); -} - -vaadin-grid-pro.editable-custom-effect::part(editable-cell) { - background: var(--lumo-contrast-5pct); -} ----- --- - - -=== Highlight Read-Only - -Read-only cells can be highlighted by applying the `highlight-read-only-cells` theme variant. - -[.example] --- -ifdef::lit[] -[source,typescript] ----- -include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-read-only-cells.ts[render,tags=snippet,indent=0,group=Lit] ----- -endif::[] - -ifdef::flow[] -[source,java] ----- -include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightReadOnlyCells.java[render,tags=snippet,indent=0,group=Flow] ----- -endif::[] - -ifdef::react[] -[source,tsx] ----- -include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx[render,tags=snippet,indent=0,group=React] ----- -endif::[] --- - - == Best Practices === Inline vs. Non-Inline Editing diff --git a/articles/components/grid-pro/styling.adoc b/articles/components/grid-pro/styling.adoc index e25f1855a1..56edd7d5d5 100644 --- a/articles/components/grid-pro/styling.adoc +++ b/articles/components/grid-pro/styling.adoc @@ -7,6 +7,116 @@ order: 50 --- = Grid Pro Styling +== Style Variants + +Grid Pro supports the following style variants: + +[cols="1,3,1"] +|=== +| Variant | Description | Supported by + +|`highlight-editable-cells` +|Highlights editable cells with a background color +|Aura, Lumo + +|`highlight-read-only-cells` +|Highlights read-only cells with a background color +|Aura, Lumo + +|=== + +In addition, Grid Pro also supports all <<../grid/styling#style-variants,Grid Style Variants>>. + +=== Highlight Editable + +Editable cells are indicated with a hover effect, by default. They can be highlighted by applying the `highlight-editable-cells` style variant. + +[.example] +-- +ifdef::lit[] +[source,typescript] +---- +include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-editable-cells.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightEditableCells.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-editable-cells.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] +-- + +You can also apply custom styling to editable cells by targeting the `editable-cell` part in CSS. The following example shows how to apply custom styling to all Grid Pro elements that have the `editable-custom-effect` class name: + +[.example] +-- +[source,css] +---- +vaadin-grid-pro.editable-custom-effect::part(editable-cell):hover, +vaadin-grid-pro.editable-custom-effect::part(editable-cell focused-cell) { + background: var(--lumo-contrast-10pct); +} + +vaadin-grid-pro.editable-custom-effect::part(editable-cell) { + background: var(--lumo-contrast-5pct); +} +---- + +-- + + +=== Highlight Read-Only + +Read-only cells can be highlighted by applying the `highlight-read-only-cells` style variant. + +[.example] +-- +ifdef::lit[] +[source,typescript] +---- +include::{root}/frontend/demo/component/gridpro/grid-pro-highlight-read-only-cells.ts[render,tags=snippet,indent=0,group=Lit] +---- +endif::[] + +ifdef::flow[] +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/gridpro/GridProThemeHighlightReadOnlyCells.java[render,tags=snippet,indent=0,group=Flow] +---- +endif::[] + +ifdef::react[] +[source,tsx] +---- +include::{root}/frontend/demo/component/gridpro/react/grid-pro-highlight-read-only-cells.tsx[render,tags=snippet,indent=0,group=React] +---- +endif::[] + +-- + +include::../_styling-section-theming-props.adoc[tag=style-properties] + +[cols="3,1"] +|=== +| Property | Supported by + +|`--vaadin-grid-pro-editable-cell-background-color` +|Aura + +|=== + +In addition, Grid Pro also supports all <<../grid/styling#style-properties,Grid Style Properties>>. + + include::../_styling-section-intros.adoc[tag=selectors]