diff --git a/docs/form/api/avatar/api_avatar_properties.md b/docs/form/api/avatar/api_avatar_properties.md index 0b4df6f3..e4ecdf2d 100644 --- a/docs/form/api/avatar/api_avatar_properties.md +++ b/docs/form/api/avatar/api_avatar_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Avatar control of Form in the { type: "avatar", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set target?: string, value?: object, @@ -70,7 +70,7 @@ description: You can explore the Properties of the Avatar control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set target diff --git a/docs/form/api/button/api_button_properties.md b/docs/form/api/button/api_button_properties.md index be6bea01..4c745133 100644 --- a/docs/form/api/button/api_button_properties.md +++ b/docs/form/api/button/api_button_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Button control of Form in the { type: "button", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set text?: string, submit?: boolean, // false by default @@ -50,7 +50,7 @@ description: You can explore the Properties of the Button control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set text diff --git a/docs/form/api/calendar/api_calendar_properties.md b/docs/form/api/calendar/api_calendar_properties.md index d8308b81..3cd0c567 100644 --- a/docs/form/api/calendar/api_calendar_properties.md +++ b/docs/form/api/calendar/api_calendar_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Datepicker control of Form in { type: "datepicker", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: Date | string, css?: string, @@ -65,7 +65,7 @@ description: You can explore the Properties of the Datepicker control of Form in id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/checkbox/api_checkbox_properties.md b/docs/form/api/checkbox/api_checkbox_properties.md index fbb0390c..6e37ec5d 100644 --- a/docs/form/api/checkbox/api_checkbox_properties.md +++ b/docs/form/api/checkbox/api_checkbox_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Checkbox control of Form in t { type: "checkbox", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string, checked?: boolean, // false by default text?: string, @@ -51,7 +51,7 @@ description: You can explore the Properties of the Checkbox control of Form in t id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/checkbox_group/api_checkboxgroup_properties.md b/docs/form/api/checkbox_group/api_checkboxgroup_properties.md index 9cbd99b6..eb376570 100644 --- a/docs/form/api/checkbox_group/api_checkboxgroup_properties.md +++ b/docs/form/api/checkbox_group/api_checkboxgroup_properties.md @@ -12,12 +12,12 @@ description: You can explore the Properties of the Checkbox Group control of For { type: "checkboxGroup", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set options: { rows?: [ { type: "checkbox", - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string, checked?: boolean, css?: string, @@ -32,7 +32,7 @@ description: You can explore the Properties of the Checkbox Group control of For cols?: [ { type: "checkbox", - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string, checked?: boolean, css?: string, @@ -90,7 +90,7 @@ description: You can explore the Properties of the Checkbox Group control of For id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set options @@ -173,7 +173,7 @@ description: You can explore the Properties of the Checkbox Group control of For id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/colorpicker/api_colorpicker_properties.md b/docs/form/api/colorpicker/api_colorpicker_properties.md index fdfdb383..2785b7fc 100644 --- a/docs/form/api/colorpicker/api_colorpicker_properties.md +++ b/docs/form/api/colorpicker/api_colorpicker_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Colorpicker control of Form i { type: "colorpicker", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string, css?: string, @@ -60,7 +60,7 @@ description: You can explore the Properties of the Colorpicker control of Form i id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/combo/api_combo_properties.md b/docs/form/api/combo/api_combo_properties.md index 28e7595a..9e4a3fae 100644 --- a/docs/form/api/combo/api_combo_properties.md +++ b/docs/form/api/combo/api_combo_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Combo Box control of Form in { type: "combo", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set data?: object[], value?: string | number | array, @@ -68,7 +68,7 @@ description: You can explore the Properties of the Combo Box control of Form in id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set data diff --git a/docs/form/api/container/api_container_properties.md b/docs/form/api/container/api_container_properties.md index 768d298f..d22010b4 100644 --- a/docs/form/api/container/api_container_properties.md +++ b/docs/form/api/container/api_container_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Container control of Form in { type: "container", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set html?: HTMLElement | string, css?: string, @@ -34,7 +34,7 @@ description: You can explore the Properties of the Container control of Form in - `type` - (required) the type of a control, set it to "container" - `name` - (optional) the name of a control -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `html` - (optional) the HTML content of a control - `css` - (optional) adds style classes to a control string - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default diff --git a/docs/form/api/fieldset/api_fieldset_properties.md b/docs/form/api/fieldset/api_fieldset_properties.md index 8c28e709..d1f158db 100644 --- a/docs/form/api/fieldset/api_fieldset_properties.md +++ b/docs/form/api/fieldset/api_fieldset_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Fieldset control of Form in t { type: "fieldset", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set hidden?: boolean, // false by default disabled?: boolean, // false by default @@ -34,7 +34,7 @@ description: You can explore the Properties of the Fieldset control of Form in t - `type` - (required) the type of a control, set it to "fieldset" - `name` - (optional) the name of a control -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `hidden` - (optional) defines whether a control is hidden, *false* by default - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default - `css` - (optional) the name of a CSS class(es) applied to the control group diff --git a/docs/form/api/form_cols_config.md b/docs/form/api/form_cols_config.md index babffb00..385fd16b 100644 --- a/docs/form/api/form_cols_config.md +++ b/docs/form/api/form_cols_config.md @@ -6,7 +6,7 @@ description: You can explore the cols Config of Form in the documentation of the # cols -@short: Optional. Arranges controls inside the control group horizontally +@short: Optional. Arranges [controls](/suite/category/list-of-form-controls/) inside the control group horizontally @signature: {'cols?: object[];'} @@ -35,6 +35,9 @@ const form = new dhx.Form("form_container", { }); @descr: +:::info +Please note that if you specify the `id` fields for controls, their values should be **unique**. You can also omit the `id` fields in the configuration of controls. In this case they will be generated automatically. +::: @changelog: added in v6.4 diff --git a/docs/form/api/form_rows_config.md b/docs/form/api/form_rows_config.md index 60b702ef..926959e6 100644 --- a/docs/form/api/form_rows_config.md +++ b/docs/form/api/form_rows_config.md @@ -6,7 +6,7 @@ description: You can explore the rows Config of Form in the documentation of the # rows -@short: Optional. Arranges controls inside the control group vertically +@short: Optional. Arranges [controls](/suite/category/list-of-form-controls/) inside the control group vertically @signature: {'rows?: object[];'} @@ -41,6 +41,9 @@ const form = new dhx.Form("form_container", { }); @descr: +:::info +Please note that if you specify the `id` fields for controls, their values should be **unique**. You can also omit the `id` fields in the configuration of controls. In this case they will be generated automatically. +::: @changelog: added in v6.4 diff --git a/docs/form/api/input/api_input_properties.md b/docs/form/api/input/api_input_properties.md index a0be9113..fdb82764 100644 --- a/docs/form/api/input/api_input_properties.md +++ b/docs/form/api/input/api_input_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Input control of Form in the { type: "input", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string | number, css?: string, @@ -60,7 +60,7 @@ description: You can explore the Properties of the Input control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/radiogroup/api_radiogroup_properties.md b/docs/form/api/radiogroup/api_radiogroup_properties.md index 80ed5c9b..95610da8 100644 --- a/docs/form/api/radiogroup/api_radiogroup_properties.md +++ b/docs/form/api/radiogroup/api_radiogroup_properties.md @@ -12,12 +12,12 @@ description: You can explore the Properties of the RadioGroup and RadioButton co { type: "radiogroup", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set options: { rows?: [ { type: "radiobutton", - id?: string, + id?: string, // must be unique if set, auto-generated if not set value: string, checked?: boolean, // false by default css?: string, @@ -33,7 +33,7 @@ description: You can explore the Properties of the RadioGroup and RadioButton co cols?: [ { type: "radiobutton", - id?: string, + id?: string, // must be unique if set, auto-generated if not set value: string, checked?: boolean, css?: string, @@ -89,7 +89,7 @@ description: You can explore the Properties of the RadioGroup and RadioButton co id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set options @@ -172,7 +172,7 @@ description: You can explore the Properties of the RadioGroup and RadioButton co id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/select/api_select_properties.md b/docs/form/api/select/api_select_properties.md index e0587274..dcb7554d 100644 --- a/docs/form/api/select/api_select_properties.md +++ b/docs/form/api/select/api_select_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Select control of Form in the { type: "select", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set options: [ { value: string | number, @@ -60,7 +60,7 @@ description: You can explore the Properties of the Select control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set options diff --git a/docs/form/api/simplevault/api_simplevault_properties.md b/docs/form/api/simplevault/api_simplevault_properties.md index 67f68b1f..c060f38c 100644 --- a/docs/form/api/simplevault/api_simplevault_properties.md +++ b/docs/form/api/simplevault/api_simplevault_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Simple Vault control of Form { type: "simplevault", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set target?: string, value?: [ { @@ -76,7 +76,7 @@ description: You can explore the Properties of the Simple Vault control of Form id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set target diff --git a/docs/form/api/slider/api_slider_properties.md b/docs/form/api/slider/api_slider_properties.md index 051b410f..bad15674 100644 --- a/docs/form/api/slider/api_slider_properties.md +++ b/docs/form/api/slider/api_slider_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Slider control of Form in the { type: "slider", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: number | number[], css?: string, @@ -56,7 +56,7 @@ description: You can explore the Properties of the Slider control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/spacer/api_spacer_properties.md b/docs/form/api/spacer/api_spacer_properties.md index c86461a0..6c42f2de 100644 --- a/docs/form/api/spacer/api_spacer_properties.md +++ b/docs/form/api/spacer/api_spacer_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Spacer control of Form in the { type: "spacer", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set css?: string, height?: string | number | "content", // "content" by default @@ -36,7 +36,7 @@ description: You can explore the Properties of the Spacer control of Form in the id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set css diff --git a/docs/form/api/text/api_text_properties.md b/docs/form/api/text/api_text_properties.md index 007ed8e3..fb3632b1 100644 --- a/docs/form/api/text/api_text_properties.md +++ b/docs/form/api/text/api_text_properties.md @@ -12,8 +12,8 @@ description: You can explore the Properties of the Text control of Form in the d { type: "text", name?: string, - id?: string, - value?: number | string, + id?: string, // must be unique if set, auto-generated if not set + value?: number | string, css?: string, disabled?: boolean, // false by default @@ -50,7 +50,7 @@ description: You can explore the Properties of the Text control of Form in the d id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/textarea/api_textarea_properties.md b/docs/form/api/textarea/api_textarea_properties.md index 16f428cd..a9cc362b 100644 --- a/docs/form/api/textarea/api_textarea_properties.md +++ b/docs/form/api/textarea/api_textarea_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Textarea control of Form in t { type: "textarea", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: string, css?: string, @@ -56,7 +56,7 @@ description: You can explore the Properties of the Textarea control of Form in t id - (optional) the id of a control, auto-generated if not set + (optional) the id of a control, must be unique if set, auto-generated if not set value diff --git a/docs/form/api/timepicker/api_timepicker_properties.md b/docs/form/api/timepicker/api_timepicker_properties.md index 8bb6f536..184dc0fa 100644 --- a/docs/form/api/timepicker/api_timepicker_properties.md +++ b/docs/form/api/timepicker/api_timepicker_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Timepicker control of Form in { type: "timepicker", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set value?: Date | number | string | array | object, css?: string, @@ -47,7 +47,7 @@ description: You can explore the Properties of the Timepicker control of Form in - `type` - (required) the type of a control, set it to "timepicker" - `name` - (optional) the name of a control -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `value` - (optional) the initial value of the TimePicker control: - The date set as a number is the number of milliseconds since January 1, 1970, 00:00:00 UTC returned by the `getTime()` method of the `Date` object. - The value of a timepicker set as an array should have the following elements: diff --git a/docs/form/api/toggle/api_toggle_properties.md b/docs/form/api/toggle/api_toggle_properties.md index 51973a8d..df6ecd8b 100644 --- a/docs/form/api/toggle/api_toggle_properties.md +++ b/docs/form/api/toggle/api_toggle_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Toggle control of Form in the { type: "toggle", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set hidden?: boolean, // false by default disabled?: boolean, // false by default @@ -36,7 +36,7 @@ description: You can explore the Properties of the Toggle control of Form in the - `type` - (required) the type of a control, set it to "toggle" - `name` - (optional) the name of a control -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `hidden`- (optional) defines whether a toggle is hidden, *false* by default - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default - `selected` - (optional) defines the initial state of the toggle as selected (pressed), *false* by default diff --git a/docs/form/api/togglegroup/api_togglegroup_properties.md b/docs/form/api/togglegroup/api_togglegroup_properties.md index 01575e85..e54e75e4 100644 --- a/docs/form/api/togglegroup/api_togglegroup_properties.md +++ b/docs/form/api/togglegroup/api_togglegroup_properties.md @@ -12,7 +12,7 @@ description: You can explore the Properties of the Toggle Group control of Form { type: "toggleGroup", name?: string, - id?: string, + id?: string, // must be unique if set, auto-generated if not set hidden?: boolean, // false by default disabled?: boolean, // false by default @@ -23,7 +23,7 @@ description: You can explore the Properties of the Toggle Group control of Form options: [ { - id?: string, + id?: string, // must be unique if set, auto-generated if not set hidden?: boolean, disabled?: boolean, selected?: boolean, @@ -52,14 +52,14 @@ description: You can explore the Properties of the Toggle Group control of Form - `type` - (required) the type of a control, set it to "toggleGroup" - `name` - (optional) the name of a control -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `hidden`- (optional) defines whether a ToggleGroup is hidden, *false* by default - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default - `full` - (optional) defines whether the ToggleGroup will be extended to the width specified by the **width** property, *false* by default - `gap` - (optional) sets an offset between the elements (buttons) of an option, *0* by default - `multiselection` - (optional) defines the behavior that allows a multiple choice, *false* by default - `options` - (required) an array of ToggleGroup elements. An object of an element can contain the following attributes: - - `id` - (optional) the id of a control, auto-generated if not set + - `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `hidden`- (optional) defines whether a toggle button is hidden, *false* by default - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default - `selected` - (optional) defines the initial state of the toggle as selected (pressed), *false* by default @@ -78,7 +78,7 @@ description: You can explore the Properties of the Toggle Group control of Form ### Properties of a Toggle of ToggleGroup -- `id` - (optional) the id of a control, auto-generated if not set +- `id` - (optional) the id of a control, must be **unique** if set, auto-generated if not set - `hidden`- (optional) defines whether a toggle button is hidden, *false* by default - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*), *false* by default - `selected` - (optional) defines the initial state of the toggle as selected (pressed), *false* by default diff --git a/docs/form/configuration.md b/docs/form/configuration.md index f6e87a61..83b37fa2 100644 --- a/docs/form/configuration.md +++ b/docs/form/configuration.md @@ -135,6 +135,10 @@ const form = new dhx.Form("form_container", { }); ~~~ +:::info +Please note that if you specify the `id` fields for controls, their values should be **unique**. You can also omit the `id` fields in the configuration of controls. In this case they will be generated automatically. +::: + **Related sample**: [Form. Change Form configuration](https://snippet.dhtmlx.com/1pzybtja) ## Making Form disabled diff --git a/docs/form/how_to_start.md b/docs/form/how_to_start.md index 67a2f32e..988a9807 100644 --- a/docs/form/how_to_start.md +++ b/docs/form/how_to_start.md @@ -114,6 +114,10 @@ rows: [ ] ~~~ +:::info +Please note that if you specify the `id` fields for controls, their values should be **unique**. You can also omit the `id` fields in the configuration of controls. In this case they will be generated automatically. +::: + ## Initialize Form Initialize Form with the `dhx.Form` object constructor. The constructor takes two parameters: diff --git a/docs/layout/api/cell/layout_cell_id_config.md b/docs/layout/api/cell/layout_cell_id_config.md index a3293b7d..02caf481 100644 --- a/docs/layout/api/cell/layout_cell_id_config.md +++ b/docs/layout/api/cell/layout_cell_id_config.md @@ -18,5 +18,8 @@ const layout = new dhx.Layout("layout_container", { }); @descr: +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the configuration of cells. In this case they will be generated automatically. +::: [comment]: # (@related: layout/initialization.md#initialize-layout) diff --git a/docs/layout/api/layout_cols_config.md b/docs/layout/api/layout_cols_config.md index 5062a146..86f7d91a 100644 --- a/docs/layout/api/layout_cols_config.md +++ b/docs/layout/api/layout_cols_config.md @@ -6,7 +6,7 @@ description: You can explore the cols config of Layout in the documentation of t # cols -@short: Optional. An array of columns objects +@short: Optional. An array of columns objects that may contain cells or other rows/columns @signature: {'cols?: object[];'} @@ -38,6 +38,9 @@ const layout = new dhx.Layout("layout_container", { }); @descr: +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the [configuration of cells](layout/cell_configuration.md). In this case they will be generated automatically. +::: [comment]: # (@relatedapi: layout/api/layout_rows_config.md) diff --git a/docs/layout/api/layout_rows_config.md b/docs/layout/api/layout_rows_config.md index 28658ad6..e0995540 100644 --- a/docs/layout/api/layout_rows_config.md +++ b/docs/layout/api/layout_rows_config.md @@ -6,7 +6,7 @@ description: You can explore the rows config of Layout in the documentation of t # rows -@short: Optional. An array of rows objects +@short: Optional. An array of rows objects that may contain cells or other rows/columns @signature: {'rows?: object[];'} @@ -42,6 +42,10 @@ const layout = new dhx.Layout("layout_container", { }); @descr: +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the [configuration of cells](layout/cell_configuration.md). In this case they will be generated automatically. +::: + [comment]: # (@relatedapi: layout/api/layout_cols_config.md) diff --git a/docs/layout/cell_configuration.md b/docs/layout/cell_configuration.md index a3920193..12df1b6e 100644 --- a/docs/layout/cell_configuration.md +++ b/docs/layout/cell_configuration.md @@ -6,6 +6,10 @@ description: You can explore the configuration of a Cell of Layout in the docume # Configuration of a Cell +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the configuration of cells. In this case they will be generated automatically. +::: + ## 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. diff --git a/docs/layout/initialization.md b/docs/layout/initialization.md index b56099f5..32969c2a 100644 --- a/docs/layout/initialization.md +++ b/docs/layout/initialization.md @@ -121,13 +121,17 @@ const layout = new dhx.Layout("layout_container", {cols}); The properties of the configuration object of Layout allow you to define the structure of Layout. -See the list of Layout properties [here](layout/api/api_overview.md#layout-properties). +[See the list of Layout properties](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 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 will find the detailed information on configuration options of the cell object in the [Layout Cell API overview](layout/api/api_overview.md#cell-properties) article. + +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the [configuration of cells](layout/cell_configuration.md). In this case they will be generated automatically. +::: ## Example diff --git a/docs/layout/layout_structure.md b/docs/layout/layout_structure.md index 6bfc5d6b..3c26eb9a 100644 --- a/docs/layout/layout_structure.md +++ b/docs/layout/layout_structure.md @@ -68,3 +68,7 @@ const layout = new dhx.Layout("layout_container", { ] }); ~~~ + +:::info +Please note that if you specify the `id` fields for cells, their values should be **unique**. You can also omit the `id` fields in the [configuration of cells](layout/cell_configuration.md). In this case they will be generated automatically. +::: \ No newline at end of file diff --git a/docs/tabbar/api/tabbar_addtab_method.md b/docs/tabbar/api/tabbar_addtab_method.md index 6e6b0b55..36c578cb 100644 --- a/docs/tabbar/api/tabbar_addtab_method.md +++ b/docs/tabbar/api/tabbar_addtab_method.md @@ -12,12 +12,21 @@ description: You can explore the addTab method of Tabbar in the documentation of @params: - `config: object` - an object of a tab. It may include the following properties: + - `id: string` - the id of a tab - `tab: string` - the name of a tab - `tabCss: string` - the name of the CSS class used for a tab - `css: string` - the name of the CSS class used for a cell - - `header: string` - the header of a cell + - `header: string` - the header of a cell + - `html: string` - HTML content for a tab + - `padding: number | string` - the distance between the content of a cell and the border of tabbar + - `tabWidth: number | string` - the width of a tab + - `tabHeight: number | string` - the height of a tab - `index: number` - the position to add a tab into +:::info +Please note that if you specify the `id` fields for tabs, their values should be **unique**. You can also omit the `id` fields in the configuration of tabs. In this case they will be generated automatically. +::: + @example: tabbar.addTab({tab: "tab-" + nextTab++, css:"panel flex"}, 0); diff --git a/docs/tabbar/api/tabbar_views_config.md b/docs/tabbar/api/tabbar_views_config.md index 365e14b6..d1d9bae0 100644 --- a/docs/tabbar/api/tabbar_views_config.md +++ b/docs/tabbar/api/tabbar_views_config.md @@ -11,7 +11,7 @@ description: You can explore the views config of Tabbar in the documentation of @signature: {'views: object[];'} @params: -The **views** array contains a set of objects that describe configuration of tabs. Each tab object may include the following properties: +The `views` array contains a set of objects that describe configuration of tabs. Each tab object may include the following properties: - `id: string` - the id of a tab - `tab: string` - the name of a tab @@ -23,6 +23,10 @@ The **views** array contains a set of objects that describe configuration of tab - `tabWidth: number | string` - the width of a tab - `tabHeight: number | string` - the height of a tab +:::info +Please note that if you specify the `id` fields for tabs, their values should be **unique**. You can also omit the `id` fields in the configuration of tabs. In this case they will be generated automatically. +::: + @example: const tabbar = new dhx.Tabbar("tabbar_container", { views:[ @@ -37,6 +41,8 @@ const tabbar = new dhx.Tabbar("tabbar_container", { **Related sample**: [Tabbar. Tab size](https://snippet.dhtmlx.com/yy841z3j) +## Tabs sizing + 1\. In case you specify both the sizes for a separate tab and the sizes for all tabs, the sizes set for a separate tab are a priority. For example: ~~~js @@ -60,6 +66,6 @@ As a result, the height of a tab is 45 and the width is 100. @changelog: -The **tabWidth** and **tabHeight** properties of a tab object are added in v7.0. +The `tabWidth` and `tabHeight` properties of a tab object are added in v7.0. [comment]: # (@related: tabbar/init.md#define-tabbar-structure tabbar/configuring_tabbar.md#structure-of-tabs) diff --git a/docs/tabbar/configuring_tabbar.md b/docs/tabbar/configuring_tabbar.md index fccb8054..131340a8 100644 --- a/docs/tabbar/configuring_tabbar.md +++ b/docs/tabbar/configuring_tabbar.md @@ -64,9 +64,9 @@ const tabbar = new dhx.Tabbar("tabbar_container", { }); ~~~ -## Size of tabs +## Sizing of tabs -DHTMLX Tabbar allows you to control the height and width of tabs with the help of appropriate configuration options - [tabWidth](tabbar/api/tabbar_tabwidth_config.md) and [tabHeight](tabbar/api/tabbar_tabheight_config.md). By default, they are set to 200px and 45px, correspondingly. This is how you can change the default settings: +DHTMLX Tabbar allows you to control the height and width of tabs with the help of the corresponding configuration options: [tabWidth](tabbar/api/tabbar_tabwidth_config.md) and [tabHeight](tabbar/api/tabbar_tabheight_config.md). By default, they are set to 200px and 45px, correspondingly. This is how you can change the default settings: ~~~js const tabbar = new dhx.Tabbar("tabbar_container", { @@ -79,18 +79,22 @@ const tabbar = new dhx.Tabbar("tabbar_container", { ## Structure of tabs -The structure of Tabbar should be defined during initialization of the component. It is set within the [views](tabbar/api/tabbar_views_config.md) property. Each tab is an object with attributes, which are: - -- **id** - the id of a tab -- **tab** - the name of a tab -- **tabCss** - the name of the CSS class used for a tab -- **css** - the name of the CSS class used for a cell -- **header** - the header of a cell -- **html** - HTML content for a tab -- **padding** - the distance between the content of a cell and the border of tabbar -- **tabWidth** - the width of a tab (for more information, see [](tabbar/api/tabbar_views_config.md)) -- **tabHeight** - the height of a tab (for more information, see [](tabbar/api/tabbar_views_config.md)) - +The structure of Tabbar should be defined during initialization of the component. It is set within the +[`views`](tabbar/api/tabbar_views_config.md) property. Each tab is an object with attributes, which are: + +- `id` - the id of a tab +- `tab` - the name of a tab +- `tabCss` - the name of the CSS class used for a tab +- `css` - the name of the CSS class used for a cell +- `header` - the header of a cell +- `html` - HTML content for a tab +- `padding` - the distance between the content of a cell and the border of tabbar +- `tabWidth` - the width of a tab (for more information, see [](tabbar/api/tabbar_views_config.md)) +- `tabHeight` - the height of a tab (for more information, see [](tabbar/api/tabbar_views_config.md)) + +:::info +Please note that if you specify the `id` fields for tabs, their values should be **unique**. You can also omit the `id` fields in the configuration of tabs. In this case they will be generated automatically. +::: ~~~js const tabbar = new dhx.Tabbar("tabbar_container", { diff --git a/docs/tabbar/init.md b/docs/tabbar/init.md index bd6d34a8..08225bbc 100644 --- a/docs/tabbar/init.md +++ b/docs/tabbar/init.md @@ -67,7 +67,8 @@ Add a container for the Tabbar and give it an id, e.g. "tabbar_container": ## Define Tabbar structure At this step you should specify the structure of your future Tabbar. Each tab represents an object with attributes, such as the name of a tab and a CSS class applied to a tab. -For example, Tabbar can have 4 tabs. You need to define their configuration objects and place them into the **views** array, like this: +For example, Tabbar can have 4 tabs. You need to define their configuration objects and place them into the +[`views`](tabbar/api/tabbar_views_config.md) array, like this: ~~~js const views = [ @@ -78,6 +79,10 @@ const views = [ ]; ~~~ +:::info +Please note that if you specify the `id` fields for tabs, their values should be **unique**. You can also omit the `id` fields in the configuration of tabs. In this case they will be generated automatically. +::: + ## Initialize Tabbar Initialize Tabbar with the `dhx.Tabbar` object constructor. The constructor takes two parameters: diff --git a/docs/tabbar/work_with_tabbar.md b/docs/tabbar/work_with_tabbar.md index 86436501..694e4e7a 100644 --- a/docs/tabbar/work_with_tabbar.md +++ b/docs/tabbar/work_with_tabbar.md @@ -14,19 +14,21 @@ You can quickly add/remove tabs of Tabbar on the fly with the help of the corres The [](tabbar/api/tabbar_addtab_method.md) method takes two parameters: - - - - - - - - - - - -
view(object) an object of a tab. It may include the following properties:
  • tab - the name of a tab
  • tabCss - the name of the CSS class used for a tab
  • css - the name of the CSS class used for a cell
  • header - the header of a cell
index(number) the position to add a tab into
-
+- `config` - an object of a tab. It may include the following properties: + - `id` - the id of a tab + - `tab` - the name of a tab + - `tabCss` - the name of the CSS class used for a tab + - `css` - the name of the CSS class used for a cell + - `header` - the header of a cell + - `html` - HTML content for a tab + - `padding` - the distance between the content of a cell and the border of tabbar + - `tabWidth` - the width of a tab (for more information, see [Tabs sizing](tabbar/api/tabbar_views_config.md#tabs-sizing)) + - `tabHeight` - the height of a tab (for more information, see [Tabs sizing](tabbar/api/tabbar_views_config.md#tabs-sizing)) +- `index` - the position to add a tab into + +:::info +Please note that if you specify the `id` fields for tabs, their values should be **unique**. You can also omit the `id` fields in the configuration of tabs. In this case they will be generated automatically. +::: ~~~js // adding a new tab