Document Flow UI div HTML element jmix-framework#514

content/modules/flow-ui/examples/onboarding/src/main/java/com/company/onboarding/view/htmlcomponent/div/DivView.java

@@ -0,0 +1,12 @@
+package com.company.onboarding.view.htmlcomponent.div;
+
+
+import com.company.onboarding.view.main.MainView;
+import com.vaadin.flow.router.Route;
+import io.jmix.flowui.view.*;
+
+@Route(value = "DivView", layout = MainView.class)
+@ViewController("DivView")
+@ViewDescriptor("div-view.xml")
+public class DivView extends StandardView {
+}

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/menu.xml

@@ -66,6 +66,7 @@
             <item view="ImageResourcesView"
                   title="msg://com.company.onboarding.view.htmlcomponent.image/imageResourcesView.title"/>
         </menu>
+        <item view="DivView" title="msg://com.company.onboarding.view.htmlcomponent.div/divView.title"/>
     </menu>
 
     <menu id="dialogsAndNotifications" title = "msg://com.company.onboarding/menu_config.dialogsAndNotifications.title">

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/messages_en.properties

@@ -147,6 +147,8 @@ com.company.onboarding.view.htmlcomponent.image/imageView.title=image
 
 com.company.onboarding.view.htmlcomponent.image/imageResourcesView.title=Image resources
 
+com.company.onboarding.view.htmlcomponent.div/divView.title=div
+
 com.company.onboarding.view.layout.details/detailsView.title = details
 
 com.company.onboarding.view.layout.formlayout/formLayoutView.title=formLayout

content/modules/flow-ui/examples/onboarding/src/main/resources/com/company/onboarding/view/htmlcomponent/div/div-view.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<view xmlns="http://jmix.io/schema/flowui/view"
+      title="msg://divView.title">
+    <layout>
+        <!-- tag::basics[] -->
+        <div themeNames="success">
+            <p text="This paragraph has green text and a light green background."/>
+        </div>
+        <!-- end::basics[] -->
+    </layout>
+</view>

content/modules/flow-ui/pages/vc/html-components/div.adoc

@@ -0,0 +1,85 @@
+= div
+
+`div` wraps related components together, so they can be easily styled. If there are no nested components and styles, it represents nothing -- the user will see an empty space.
+
+* XML element: `div`
+
+* Java class: `Div`
+
+== Basics
+
+The following example shows `div` that applies a standard theme to its nested component:
+
+[source,xml,indent=0]
+----
+include::example$onboarding/src/main/resources/com/company/onboarding/view/htmlcomponent/div/div-view.xml[tags=basics]
+----
+
+image::visual-components/html-components/div-basic.png[align="center", width="430"]
+
+
+[[attributes]]
+== Attributes
+
+xref:vc/common-attributes.adoc#id[id] -
+xref:vc/common-attributes.adoc#classNames[classNames] -
+xref:vc/common-attributes.adoc#colspan[colspan] -
+xref:vc/common-attributes.adoc#enabled[enabled] -
+xref:vc/common-attributes.adoc#height[height] -
+xref:vc/common-attributes.adoc#maxHeight[maxHeight] -
+xref:vc/common-attributes.adoc#maxWidth[maxWidth] -
+xref:vc/common-attributes.adoc#minHeight[minHeight] -
+xref:vc/common-attributes.adoc#minWidth[minWidth] -
+xref:vc/common-attributes.adoc#text[text] -
+<<themeNames,themeNames>> -
+xref:vc/common-attributes.adoc#title[title] -
+xref:vc/common-attributes.adoc#visible[visible] -
+<<whiteSpace, whiteSpace>> -
+xref:vc/common-attributes.adoc#width[width]
+
+[[themeNames]]
+=== themeNames
+
+Adds a theme to the component. Possible values are:
+
+* `normal`
+* `success`
+* `error`
+* `contrast`
+* `primary`
+* `small`
+* `pill`
+
+[[whiteSpace]]
+=== whiteSpace
+
+++++
+<div class="jmix-ui-live-demo-container">
+    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" class="mdn-docs-btn" target="_blank">MDN</a>
+</div>
+++++
+
+Defines the component's `white-space` style value. Possible values are:
+
+* `NORMAL`
+* `NOWRAP`
+* `PRE`
+* `PRE_WRAP`
+* `PRE_LINE`
+* `BREAK_SPACES`
+* `INHERIT`
+* `INITIAL`
+
+[[handlers]]
+== Handlers
+
+xref:vc/common-handlers.adoc#AttachEvent[AttachEvent] -
+<<ClickEvent, ClickEvent>> -
+xref:vc/common-handlers.adoc#DetachEvent[DetachEvent]
+
+include::../handler-generation-tip.adoc[]
+
+[[ClickEvent]]
+=== ClickEvent
+
+`com.vaadin.flow.component.ClickEvent` is sent when the user clicks on the component.

content/modules/flow-ui/partials/nav.adoc

@@ -36,6 +36,7 @@
 **** xref:flow-ui:vc/layouts/tabSheet.adoc[]
 **** xref:flow-ui:vc/layouts/vbox.adoc[]
 *** xref:flow-ui:vc/html.adoc[]
+**** xref:flow-ui:vc/html-components/div.adoc[]
 **** xref:flow-ui:vc/html-components/image.adoc[]
 *** xref:flow-ui:vc/common-attributes.adoc[]
 *** xref:flow-ui:vc/common-handlers.adoc[]