diff --git a/docs/layout/cell_configuration.md b/docs/layout/cell_configuration.md index bf890d15a..952d7a467 100644 --- a/docs/layout/cell_configuration.md +++ b/docs/layout/cell_configuration.md @@ -8,7 +8,7 @@ description: You can explore the configuration of a Cell of Layout in the docume ## HTML content -A layout cell can have any HTML content inside it. You can set it with the [](layout/api/cell/layout_cell_html_config.md) attribute in the object of a cell. +A layout cell can contain any HTML content. You can set it with the [](layout/api/cell/layout_cell_html_config.md) attribute in the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -22,7 +22,7 @@ const layout = new dhx.Layout("layout_container", { ## Hidden cell -It is possible to add the [](layout/api/cell/layout_cell_hidden_config.md) attribute into the the object of a cell(s) to render a layout with some cells hidden: +You can add the [](layout/api/cell/layout_cell_hidden_config.md) attribute to the object of a cell to render a layout with hidden cells: ~~~js const layout = new dhx.Layout("layout_container", { @@ -44,7 +44,7 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -You can also add an icon or an image into the header of a cell with the help of corresponding attributes - [](layout/api/cell/layout_cell_headericon_config.md) and [](layout/api/cell/layout_cell_headerimage_config.md). +You can also add an icon or an image into the header of a cell with the corresponding attributes - [](layout/api/cell/layout_cell_headericon_config.md) and [](layout/api/cell/layout_cell_headerimage_config.md). ~~~js const layout = new dhx.Layout("layout_container", { @@ -84,11 +84,11 @@ const layout = new dhx.Layout("layout_container", { **Related sample**: [Layout. Header](https://snippet.dhtmlx.com/bxqnzesl) -If the [](layout/api/cell/layout_cell_header_config.md) property is not set in the config of a cell, the [](layout/api/cell/layout_cell_headerheight_config.md) option will add a header without text for a cell. +If the [](layout/api/cell/layout_cell_header_config.md) property is not set in the config of a cell, the [](layout/api/cell/layout_cell_headerheight_config.md) option adds a header without text to a cell. ## Cell size -You can easily control and change the size of a cell via the [](layout/api/cell/layout_cell_width_config.md) and [](layout/api/cell/layout_cell_height_config.md) attributes of the object of a cell. +You can change the size of a cell with the [](layout/api/cell/layout_cell_width_config.md) and [](layout/api/cell/layout_cell_height_config.md) attributes of the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -137,7 +137,9 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -{{note Note, that [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) properties prevent [the width of a cell](layout/api/cell/layout_cell_width_config.md) from being less/greater than minWidth/maxWidth values accordingly. The [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) options work in the same way. }} +:::note +The [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) properties prevent [the width of a cell](layout/api/cell/layout_cell_width_config.md) from becoming less or greater than the minWidth/maxWidth values. The [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) options work in the same way. +::: ~~~js const layout = new dhx.Layout("layout_container", { @@ -151,11 +153,11 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -As you can see from the code example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px. +In the example above, the width of the cell occupies 50% of the parent container width but is not larger than 200px. ### Autosize for cells -Starting with v7.0, you can configure a cell so that its width/ height would automatically adjust to the width/ height of the cell content. For this purpose, you need to set the [width](layout/api/cell/layout_cell_width_config.md)/ [height](layout/api/cell/layout_cell_height_config.md) options to *"content"*: +Starting with v7.0, you can configure a cell so that its width or height adjusts automatically to the width or height of the cell content. For this, set the [width](layout/api/cell/layout_cell_width_config.md)/[height](layout/api/cell/layout_cell_height_config.md) options to *"content"*: ~~~js {5} const layout = new dhx.Layout("layout_container", { @@ -171,8 +173,7 @@ const layout = new dhx.Layout("layout_container", { ## Collapsibility -There are two attributes of the object of a cell: [](layout/api/cell/layout_cell_collapsable_config.md) and [](layout/api/cell/layout_cell_collapsed_config.md). The first one defines whether a cell can be collapsed and expanded, and the second one checks whether a cell is collapsed during -the initialization of a layout. +The object of a cell has two related attributes: [](layout/api/cell/layout_cell_collapsable_config.md) and [](layout/api/cell/layout_cell_collapsed_config.md). The first defines whether a cell can be collapsed and expanded; the second defines whether a cell is collapsed when a layout is initialized. ~~~js const layout = new dhx.Layout("layout_container", { @@ -188,7 +189,7 @@ const layout = new dhx.Layout("layout_container", { ## Progress bar -You can configure a Layout cell so that it would render a progress bar (in other words, a loading spinner) if there is no any component or HTML content attached to the cell. To do that, enable the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute in the configuration object of the cell: +You can configure a Layout cell to render a progress bar (in other words, a loading spinner) if no component or HTML content is attached to the cell. To do that, enable the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute in the configuration object of the cell: ~~~js {9,14} const layout = new dhx.Layout("layout_container", { @@ -210,13 +211,13 @@ const layout = new dhx.Layout("layout_container", { }); ~~~ -Note, as soon as you attach a component or HTML content to the cell, the progress bar will be hidden. +Note that as soon as you attach a component or HTML content to the cell, Layout hides the progress bar. By default, the [progressDefault](layout/api/cell/layout_cell_progressdefault_config.md) attribute is disabled. ## Resizability -To allow resizing of a cell, make use of the [](layout/api/cell/layout_cell_resizable_config.md) option in the object of a cell. +To allow resizing of a cell, use the [](layout/api/cell/layout_cell_resizable_config.md) option in the object of a cell. ~~~js const layout = new dhx.Layout("layout_container", { @@ -228,11 +229,13 @@ const layout = new dhx.Layout("layout_container", { **Related sample**: [Layout. Collapsable and resizable](https://snippet.dhtmlx.com/f1f49n35) -{{note Starting from v7.0, you can define the resizing limits by setting necessary values to the [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md), [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) properties in the config of a cell.}} +:::note +Starting from v7.0, you can define the resizing limits by setting the necessary values for the [minWidth](layout/api/cell/layout_cell_minwidth_config.md)/[maxWidth](layout/api/cell/layout_cell_maxwidth_config.md) and [minHeight](layout/api/cell/layout_cell_minheight_config.md)/[maxHeight](layout/api/cell/layout_cell_maxheight_config.md) properties in the config of a cell. +::: ## Setting borders for cells -By default, there is no space and borders between cells inside a layout and the cells look like they are merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the [](layout/api/cell/layout_cell_type_config.md) configuration property of a Layout cell: +By default, there is no space or border between cells inside a layout, and the cells look merged. Starting from v7.0, it is possible to split the cells by adding borders or space between them via the [](layout/api/cell/layout_cell_type_config.md) configuration property of a Layout cell: ~~~js {2} const layout = new dhx.Layout("layout_container", { diff --git a/docs/layout/customization.md b/docs/layout/customization.md index 3169dc655..9bf53c746 100644 --- a/docs/layout/customization.md +++ b/docs/layout/customization.md @@ -8,15 +8,15 @@ description: You can explore the customization of Layout in the documentation of ## Styling Layout cells -There is a possibility to make changes in the look and feel of a layout by styling its cells. +You can change the look and feel of a layout by styling its cells. ![Layout styled with custom CSS showing a dark header and pink, teal, and orange colored cells in DHTMLX Suite](/img/layout/custom_css.png) **Related sample**: [Layout. Styling (custom CSS)](https://snippet.dhtmlx.com/pwxmf0lx) -For this you need to take the following steps: +For this, take the following steps: -- add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case): +- add one or more CSS classes with the desired settings in the <style> section of your HTML page or in your file with styles (in this case, don't forget to include the file on the page): ~~~html ~~~ -- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [css](layout/api/cell/layout_cell_css_config.md) property in the configuration of a Layout cell: +- specify the name of the created CSS class (or names of classes separated by spaces) as the value of the [`css`](layout/api/cell/layout_cell_css_config.md) property in the configuration of a Layout cell: ~~~js const layout = new dhx.Layout("layout_container",{ - row: [ + rows: [ { header: "Sub Block Header row", css:"my_first_class my_second_class" diff --git a/docs/layout/events.md b/docs/layout/events.md index bed617005..dad51e4f3 100644 --- a/docs/layout/events.md +++ b/docs/layout/events.md @@ -8,7 +8,7 @@ description: You can explore the event handling of Layout in the documentation o ## Attaching event listeners -The user can add any user-defined handler to any of the available events. To do this, the user can use the **layout.events.on()** method with the following parameters: +You can add a user-defined handler to any of the available events. To do this, use the `layout.events.on()` method with the following parameters: @@ -29,17 +29,17 @@ layout.events.on("beforeHide", function(id){ }); ~~~ -Several handlers can be attached to one and the same event, and all of them will be executed. +You can attach several handlers to the same event, and Layout executes all of them. -{{note -The names of the events are case-insensitive. -}} +:::note +Event names are case-insensitive. +::: **Related sample**: [Layout. Events](https://snippet.dhtmlx.com/fyxw0map) ## Detaching event listeners -There is a simple way of removing an event handler via the **layout.events.detach()** method: +To remove an event handler, use the `layout.events.detach()` method: ~~~js layout.events.on("beforeHide", function(id){ @@ -51,7 +51,7 @@ layout.events.detach("beforeHide"); ## Calling events -To call events, use **layout.events.fire()**: +To call events, use the `layout.events.fire()` method: ~~~js layout.events.fire("beforeHide",args); diff --git a/docs/layout/features.md b/docs/layout/features.md index 1a6378be2..828ab0e1c 100644 --- a/docs/layout/features.md +++ b/docs/layout/features.md @@ -6,11 +6,11 @@ description: You can explore the features of Layout in the documentation of the # Features -This page contains structured information that will help you to start working with DHTMLX Layout and go into deep dive on its functionality. +This page contains structured information that helps you start working with DHTMLX Layout and dive deep into its functionality. ## How to start with DHTMLX Layout -In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate a Layout into your applications. +In this section you can find out how to initialize Layout, how to attach the necessary components to its cells, and how to integrate Layout into your applications. ### Initialization @@ -24,7 +24,7 @@ In this section you can find out how to initialize Layout, how to attach the nec | Topic | Description | | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | [Backend integration](integration/suite_and_backend.md) | Learn how to connect DHTMLX Suite to a backend ([Demo](https://github.com/DHTMLX/nodejs-suite-demo)) | -| [Optimus](/optimus_guides/) | Learn how to use DHTMLX Optimus framework for creating DHTMLX-based app
(recommended framework for creating apps with Suite components) | +| [Optimus](/optimus_guides/) | Learn how to use the DHTMLX Optimus framework for creating a DHTMLX-based app
(recommended framework for creating apps with Suite components) | | [React integration](integration/suite_and_react.md) | Learn how to use DHTMLX Layout with React ([Demo](https://github.com/DHTMLX/react-suite-demo)) | | [Angular integration](integration/suite_and_angular.md) | Learn how to use DHTMLX Layout with Angular ([Demo](https://github.com/DHTMLX/angular-suite-demo)) | | [Vue integration](integration/suite_and_vue.md) | Learn how to use DHTMLX Layout with Vue.js ([Demo](https://github.com/DHTMLX/vue-suite-demo)) | @@ -50,7 +50,7 @@ In this section you can find out how to configure the size and visibility of cel | [Configuring content alignment](layout/api/cell/layout_cell_align_config.md) | Learn how to set the alignment of content inside a cell ([Example](https://snippet.dhtmlx.com/4w1033c9)) | | [Configuring paddings](layout/api/cell/layout_cell_padding_config.md) | Learn how to configure the distance between a cell and the Layout border ([Example](https://snippet.dhtmlx.com/tk6tpwwv)) | | [Initializing a collapsed cell](layout/cell_configuration.md#collapsibility) | Learn how to initialize a collapsed cell and provide the ability to expand it ([Example 1](https://snippet.dhtmlx.com/f1f49n35), [Example 2](https://snippet.dhtmlx.com/r2e0y6n7)) | -|[Showing a progress bar by default](layout/cell_configuration.md#progress-bar)|Learn how to render the progress bar in a cell in the absence of the component/HTML content in the cell| +|[Showing a progress bar by default](layout/cell_configuration.md#progress-bar)|Learn how to render a progress bar in a cell that has no component or HTML content| ## How to configure sizes of Layout cells @@ -60,7 +60,7 @@ In this section you will learn how to configure sizes of Layout cells and their | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | [Width and height of a cell](layout/cell_configuration.md#cell-size) | Learn how to configure the width and height of a cell ([Example](https://snippet.dhtmlx.com/miej9gb9)) | | [Size of a cell within a row](layout/api/cell/layout_cell_gravity_config.md) | Learn how to define the "weight" of a cell in relation to other cells placed in the same row and within one parent ([Example](https://snippet.dhtmlx.com/1u521djj)) | -| [Height of the cell's header](layout/cell_configuration.md#height-of-a-header-cell) | Learn how to configure the height of the header of a cell | +| [Height of a cell header](layout/cell_configuration.md#height-of-a-header-cell) | Learn how to configure the height of a cell header | ## How to customize Layout and its cells @@ -69,21 +69,21 @@ In this section you can learn how to configure the style of Layout and its cells | Topic | Description | | -------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | [Rendering HTML content](layout/api/cell/layout_cell_html_config.md) | Learn how to render HTML content in a cell on Layout initialization ([Example](https://snippet.dhtmlx.com/6x76kgyq)) | -| [Attaching HTML content](layout/work_with_layout.md#attaching-an-html-content-to-a-cell) | Learn how to attach HTML content into a cell dynamically or detach it | +| [Attaching HTML content](layout/work_with_layout.md#attaching-an-html-content-to-a-cell) | Learn how to attach HTML content to a cell dynamically or detach it | | [Styling (custom CSS)](layout/customization.md) | Learn how to apply custom styles to a Layout cell ([Example](https://snippet.dhtmlx.com/pwxmf0lx)) | | [List of CSS classes](helpers/base_elements.md) | A set of CSS classes provided by the DHTMLX library | ## How to work with Layout cells -In this section you will learn how to get a cell object, how to add or remove, hide or show, expand or collapse a cell, etc. +In this section you will learn how to get a cell object, how to add or remove, hide or show, and expand or collapse a cell. | Topic | Description | | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | [Removing a cell](layout/work_with_layout.md#removing-cells) | Learn how to remove a cell from Layout ([Example](https://snippet.dhtmlx.com/tnujp7jk)) | | [Iterating over all cells](layout/api/layout_foreach_method.md) | Learn how to iterate over Layout cells ([Example](https://snippet.dhtmlx.com/9hfntqpy)) | | [Getting a cell object](layout/api/layout_getcell_method.md) | Learn how to get a configuration object of a particular cell | -| [Showing/hiding a cell](layout/work_with_layout.md#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example](https://snippet.dhtmlx.com/u0jd8ah3)) | +| [Showing/hiding a cell](layout/work_with_layout.md#hidingshowing-a-cell) | Learn how to hide/show a cell ([Example 1](https://snippet.dhtmlx.com/v0q7gq26), [Example 2](https://snippet.dhtmlx.com/u0jd8ah3)) | | [Checking visibility of a cell](layout/work_with_layout.md#checking-visibility-of-a-cell) | Learn how to check whether a Layout cell is visible | | [Expanding/collapsing a cell](layout/work_with_layout.md#collapsingexpanding-a-cell) | Learn how to collapse/expand a cell ([Example 1](https://snippet.dhtmlx.com/h0wtlpyk), [Example 2](https://snippet.dhtmlx.com/t38tqk0k)) | |[Showing/hiding a progress bar](layout/work_with_layout.md#showinghiding-a-progress-bar)|Learn how to show/hide the progress bar in a Layout container or in a cell ([Example](https://snippet.dhtmlx.com/vzrvf4rm))| @@ -139,7 +139,7 @@ This section explains how to work with Layout events. ## API reference -In this section you can find out corresponding references of Layout and Layout cells API. +In this section you can find out the corresponding references of the Layout and Layout cell API. ### Layout API @@ -158,14 +158,14 @@ In this section you can find out corresponding references of Layout and Layout c ## Common functionality -In this section you will learn about common functionality of the library which can be useful while working with Layout. +In this section you will learn about the common functionality of the library that can be useful while working with Layout. | Topic | Description | | ------------------------------------------------------------- | ------------------------------------------------------------- | | [Touch support](common_features/touch_support.md) | Learn how to work with touch support | | [TypeScript support](common_features/using_typescript.md) | Learn how to work with TypeScript | | [Custom scroll](common_features/custom_scroll.md) | Learn how to enable custom scroll in Layout cells | -| [AwaitRedraw](helpers/await_redraw.md) | Learn how to perform the code after the component’s rendering | +| [AwaitRedraw](helpers/await_redraw.md) | Learn how to run the code after the component renders | ## Any questions left? diff --git a/docs/layout/index.md b/docs/layout/index.md index d1067608c..6fae2b202 100644 --- a/docs/layout/index.md +++ b/docs/layout/index.md @@ -6,7 +6,8 @@ description: You can have an overview of Layout in the documentation of the DHTM # Layout overview -DHTMLX Layout component lets you specify the main scheme of your application or web page, as it defines the arrangement of blocks with content. Layout helps blend diverse types of data representation on one page.
+DHTMLX Layout lets you specify the main scheme of your application or web page, as it defines the arrangement of content blocks. Layout helps you combine different kinds of data on one page. + Check [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout). ![Layout structure with a header, sidebar, content, aside columns, and a footer in DHTMLX Suite](/img/layout/layout.png) @@ -23,12 +24,12 @@ You can check the following page to learn how to build a full-featured DHTMLX La ## Related resources -- You can get DHTMLX Layout as a part of the Suite library by [downloading DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) +- You can get DHTMLX Layout as a part of the Suite library: [download DHTMLX Suite](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) - There are also [online samples for DHTMLX Layout](https://snippet.dhtmlx.com/f1f49n35?tag=layout) ## Guides -You can read the following articles to find out how to add Layout on the page and work with it. +You can read the following articles to find out how to add Layout to the page and work with it. - [](layout/initialization.md) - [](layout/layout_structure.md) diff --git a/docs/layout/initialization.md b/docs/layout/initialization.md index b56099f5f..79c573d85 100644 --- a/docs/layout/initialization.md +++ b/docs/layout/initialization.md @@ -51,10 +51,10 @@ To add DHTMLX Layout into an application, you need to take the following simple Unpack the downloaded package into a folder of your project. -After that, create an HTML file and place full paths to JS and CSS files of the DHTMLX Suite library into the header of the file. The files are: +After that, create an HTML file and place the full paths to the DHTMLX Suite JS and CSS files into the header of the file. The files are: -- *suite.js* -- *suite.css* +- `suite.js` +- `suite.css` ~~~html @@ -63,7 +63,7 @@ After that, create an HTML file and place full paths to JS and CSS files of the ## Create a container -Add a container for the Layout and give it an id, e.g. "layout_container": +Add a container for Layout and give it an id, for example "layout_container": ~~~html
@@ -71,7 +71,7 @@ Add a container for the Layout and give it an id, e.g. "layout_container": ## Define Layout structure -Layout consists of a set of cells arranged either into rows or into columns. The structure of a layout can be rather complex, since there can also be nested rows and columns. +Layout consists of a set of cells arranged either into rows or into columns. A layout structure can be complex, because rows and columns can nest inside one another. For example, you can create a three-level layout structure: @@ -109,7 +109,7 @@ const cols = [ Initialize Layout with the `dhx.Layout` object constructor. The constructor takes two parameters: - the HTML object on the page that serves as the layout container -- a configuration object which contains the structure of Layout +- a configuration object that contains the structure of Layout ~~~js const layout = new dhx.Layout("layout_container", {cols}); @@ -119,15 +119,15 @@ const layout = new dhx.Layout("layout_container", {cols}); #### Layout object -The properties of the configuration object of Layout allow you to define the structure of Layout. +The properties of the Layout configuration object allow you to define its structure. See the list of Layout properties [here](layout/api/api_overview.md#layout-properties). #### Cell object -There is also a set of properties you can specify for a Layout cell to configure it according to your needs. +You can also specify a set of properties for a Layout cell to configure it according to your needs. -You will find the detailed information on configuration options of the cell object in the [Layout API overview](layout/api/api_overview.md#cell-properties) article. +You can find detailed information on the cell object configuration options in the [Layout API overview](layout/api/api_overview.md#cell-properties) article. ## Example diff --git a/docs/layout/layout_patterns.md b/docs/layout/layout_patterns.md index e086102b5..53d170bd3 100644 --- a/docs/layout/layout_patterns.md +++ b/docs/layout/layout_patterns.md @@ -6,9 +6,9 @@ description: You can explore the patterns of Layout in the documentation of the # Layout patterns -DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/layout_structure.md) that provide you with various options of arranging cells inside of a layout in a neat structure. The patterns are named in accordance with their structure. Each scheme is similar to a Latin letter. +DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/layout_structure.md) that let you arrange cells inside a layout. The patterns are named after their structure. Each one resembles a Latin letter. -**Click on the desired pattern to see its example in Snippet Tool.** +**Click the desired pattern to see an example in Snippet Tool.** [![1C layout pattern with a single cell in DHTMLX Suite](/img/layout/1c.png)](https://snippet.dhtmlx.com/mzlodj28) [![2E layout pattern with two stacked rows in DHTMLX Suite](/img/layout/2e.png)](https://snippet.dhtmlx.com/1oqx20ve) @@ -16,30 +16,30 @@ DHTMLX Layout patterns are predefined combinations of [rows and columns](layout/ [![3E layout pattern with three stacked rows in DHTMLX Suite](/img/layout/3e.png)](https://snippet.dhtmlx.com/v0w2p60c) [![3W layout pattern with three side-by-side columns in DHTMLX Suite](/img/layout/3w.png)](https://snippet.dhtmlx.com/ag01de2d) -[![3J layout pattern with a full-width top row over two columns in DHTMLX Suite](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) +[![3J layout pattern with two stacked cells on the left and a full-height column on the right in DHTMLX Suite](/img/layout/3j.png)](https://snippet.dhtmlx.com/p0fllgaa) [![3L layout pattern with a left sidebar and two stacked cells on the right in DHTMLX Suite](/img/layout/3l.png)](https://snippet.dhtmlx.com/bozlxz69) -[![3T layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) +[![3T layout pattern with a full-width top row over two columns in DHTMLX Suite](/img/layout/3t.png)](https://snippet.dhtmlx.com/jnq5cnc7) [![3U layout pattern with two top columns over a full-width bottom row in DHTMLX Suite](/img/layout/3u.png)](https://snippet.dhtmlx.com/678w7hgb) [![4E layout pattern with four stacked rows in DHTMLX Suite](/img/layout/4e.png)](https://snippet.dhtmlx.com/m6nlb0bf) [![4W layout pattern with four side-by-side columns in DHTMLX Suite](/img/layout/4w.png)](https://snippet.dhtmlx.com/uwb6hql7) -[![4T layout pattern with three top columns over a full-width bottom row in DHTMLX Suite](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) -[![4U layout pattern with a full-width top row over three columns in DHTMLX Suite](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) +[![4T layout pattern with a full-width top row over three columns in DHTMLX Suite](/img/layout/4t.png)](https://snippet.dhtmlx.com/4v52yj8w) +[![4U layout pattern with three top columns over a full-width bottom row in DHTMLX Suite](/img/layout/4u.png)](https://snippet.dhtmlx.com/2s9pdfhv) [![4H layout pattern with side columns around a stacked center column in DHTMLX Suite](/img/layout/4h.png)](https://snippet.dhtmlx.com/5ekykk2n) -[![4I layout pattern with two full-width rows over two bottom columns in DHTMLX Suite](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) -[![4A layout pattern with two outer columns around two stacked center rows in DHTMLX Suite](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) -[![4L layout pattern with a left column beside three cells on the right in DHTMLX Suite](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) +[![4I layout pattern with two middle columns between a full-width top row and a full-width bottom row in DHTMLX Suite](/img/layout/4i.png)](https://snippet.dhtmlx.com/1c9yzjeu) +[![4A layout pattern with two stacked left cells beside two full-height columns in DHTMLX Suite](/img/layout/4a.png)](https://snippet.dhtmlx.com/gjr6j6ud) +[![4L layout pattern with two full-height columns beside two stacked cells on the right in DHTMLX Suite](/img/layout/4l.png)](https://snippet.dhtmlx.com/1nqgjnqy) [![4J layout pattern with two full-width top rows over two bottom columns in DHTMLX Suite](/img/layout/4j.png)](https://snippet.dhtmlx.com/8km3g1k2) -[![4F layout pattern with a full-width top row over a column and stacked cells in DHTMLX Suite](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) +[![4F layout pattern with two top columns over two full-width rows in DHTMLX Suite](/img/layout/4f.png)](https://snippet.dhtmlx.com/l4q0cth9) [![4G layout pattern with three stacked rows beside a right column in DHTMLX Suite](/img/layout/4g.png)](https://snippet.dhtmlx.com/mwrfozsu) [![4C layout pattern with a left column beside three stacked rows on the right in DHTMLX Suite](/img/layout/4c.png)](https://snippet.dhtmlx.com/ww1qk9u7) [![5E layout pattern with five stacked rows in DHTMLX Suite](/img/layout/5e.png)](https://snippet.dhtmlx.com/wnn4xfu4) [![5W layout pattern with five side-by-side columns in DHTMLX Suite](/img/layout/5w.png)](https://snippet.dhtmlx.com/jo5z28kr) -[![5U layout pattern with a full-width top row over four columns in DHTMLX Suite](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) +[![5U layout pattern with four top columns over a full-width bottom row in DHTMLX Suite](/img/layout/5u.png)](https://snippet.dhtmlx.com/khbg58k4) [![5H layout pattern with side columns around three stacked center rows in DHTMLX Suite](/img/layout/5h.png)](https://snippet.dhtmlx.com/xr6jv9kk) -[![5I layout pattern with a full-width top row over two rows and bottom columns in DHTMLX Suite](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) -[![5K layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) -[![5S layout pattern with two stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) -[![5G layout pattern with three stacked left rows beside a right column in DHTMLX Suite](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) -[![5C layout pattern with a left column beside stacked rows on the right in DHTMLX Suite](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) +[![5I layout pattern with three middle columns between a full-width top row and a full-width bottom row in DHTMLX Suite](/img/layout/5i.png)](https://snippet.dhtmlx.com/873bxvak) +[![5K layout pattern with three stacked left cells beside two stacked right cells in DHTMLX Suite](/img/layout/5k.png)](https://snippet.dhtmlx.com/v81rvnep) +[![5S layout pattern with two stacked left cells beside three stacked right cells in DHTMLX Suite](/img/layout/5s.png)](https://snippet.dhtmlx.com/udo1jwmw) +[![5G layout pattern with three stacked left cells beside two full-height columns in DHTMLX Suite](/img/layout/5g.png)](https://snippet.dhtmlx.com/v8zw7jzr) +[![5C layout pattern with two full-height columns beside three stacked cells on the right in DHTMLX Suite](/img/layout/5c.png)](https://snippet.dhtmlx.com/rkpj3k4h) diff --git a/docs/layout/layout_structure.md b/docs/layout/layout_structure.md index 6bfc5d6b3..9ae294de3 100644 --- a/docs/layout/layout_structure.md +++ b/docs/layout/layout_structure.md @@ -10,7 +10,7 @@ You can use DHTMLX Layout to build the necessary composition of blocks to arrang - horizontal layout -This type of layout contains several [](layout/api/layout_rows_config.md) of cells which are placed horizontally. +This type of layout contains several [](layout/api/layout_rows_config.md) of cells that are placed horizontally. ~~~js const layout = new dhx.Layout("layout_container", { @@ -25,7 +25,7 @@ const layout = new dhx.Layout("layout_container", { - vertical layout -This type of layout includes a set of [columns](layout/api/layout_cols_config.md) of cells that are located vertically. +This type of layout includes a set of [columns](layout/api/layout_cols_config.md) of cells that are located vertically. ~~~js const layout = new dhx.Layout("layout_container", { @@ -40,7 +40,7 @@ const layout = new dhx.Layout("layout_container", { - mixed layout -In this layout type **both rows and columns** are used, i.e. a row may include several columns and a column may have rows inside. +This layout type uses **both rows and columns**: a row may include several columns and a column may have rows inside. ~~~js const layout = new dhx.Layout("layout_container", { diff --git a/docs/layout/work_with_layout.md b/docs/layout/work_with_layout.md index 2a373ae81..25d77583c 100644 --- a/docs/layout/work_with_layout.md +++ b/docs/layout/work_with_layout.md @@ -8,7 +8,7 @@ description: You can explore how to work with Layout in the documentation of the ## Removing cells -To remove a certain cell from a layout, apply the [](layout/api/layout_removecell_method.md) method. As a parameter it takes the id of a cell to be removed: +To remove a cell from a layout, apply the [](layout/api/layout_removecell_method.md) method. It takes as a parameter the id of a cell to be removed: ~~~js layout.removeCell(id); @@ -18,7 +18,7 @@ layout.removeCell(id); ## Getting the object of a cell -You can get the object of a cell by its id. Use the [](layout/api/layout_getcell_method.md) method for this purpose: +You can get the object of a cell by its id. Use the [](layout/api/layout_getcell_method.md) method: ~~~js layout.getCell("header"); @@ -49,7 +49,9 @@ layout.getCell("list").attach(list); **Related sample**: [Layout. Attach widget](https://snippet.dhtmlx.com/6wuxj6sh) -{{note The Message, Popup, Window components can't be attached to the Layout cell because these components can't have the parent container due to their architecture principles.}} +:::note +The Message, Popup, Window components can't be attached to the Layout cell because these components can't have the parent container due to their architecture principles. +::: ### Detach a component @@ -101,7 +103,7 @@ layout.getCell("toolbar").show(); ## Checking visibility of a cell -Since the object of a cell has the [hidden](layout/api/cell/layout_cell_hidden_config.md) attribute, a cell can be hidden in a layout. You can check the visibility of a cell via the [](layout/api/cell/layout_cell_isvisible_method.md) method. It returns *true* if the cell is visible and *false* if it is hidden. +Since the object of a cell has the [hidden](layout/api/cell/layout_cell_hidden_config.md) attribute, a cell can be hidden in a layout. You can check the visibility of a cell via the [](layout/api/cell/layout_cell_isvisible_method.md) method. It returns `true` if the cell is visible and `false` if it is hidden. ~~~js layout.getCell("sidebar").isVisible(); // -> true|false @@ -109,7 +111,7 @@ layout.getCell("sidebar").isVisible(); // -> true|false ## Collapsing/expanding a cell -You can collapse/expand a specified cell using two corresponding methods of a Layout cell - [](layout/api/cell/layout_cell_collapse_method.md) and [](layout/api/cell/layout_cell_expand_method.md): +You can collapse/expand a specified cell using two corresponding methods of a Layout cell, [](layout/api/cell/layout_cell_collapse_method.md) and [](layout/api/cell/layout_cell_expand_method.md): ~~~js // collapsing a cell by its id @@ -133,10 +135,10 @@ layout.getCell("toolbar").toggle(); ## Showing/hiding a progress bar -A progress bar is a visual component which informs users that the content is loading or updating. -You may show or hide the component via API calls either in the [Layout container](#progress-bar-in-the-layout-container) or in a [separate cell](#progress-bar-in-a-layout-cell). +A progress bar is a visual component that informs users that the content is loading or updating. +You can show or hide the component via API calls either in the [Layout container](#progress-bar-in-the-layout-container) or in a [separate cell](#progress-bar-in-a-layout-cell). -The progress bar can be also shown by default for cells without any attached component or HTML content. [Check the details](layout/cell_configuration.md#progress-bar). +The progress bar can also be shown by default for cells without any attached component or HTML content. [Check the details](layout/cell_configuration.md#progress-bar). ### Progress bar in the Layout container @@ -166,4 +168,4 @@ To hide the component, apply the [progressHide()](layout/api/cell/layout_cell_pr layout.getCell("two").progressHide(); ~~~ -**Related sample:** [Layout. Spinner (busy indicator/ progress bar) for Layout and its cells](https://snippet.dhtmlx.com/vzrvf4rm) \ No newline at end of file +**Related sample**: [Layout. Spinner (busy indicator/ progress bar) for Layout and its cells](https://snippet.dhtmlx.com/vzrvf4rm) \ No newline at end of file