collapsible
Type:
Default Value: false
To collapse a pane, you can also double-click the separator bar.
NOTE
Splitter should have at least one non-collapsed pane without a set size.
maxSize
index.js
- $(() => {
- $("#splitter").dxSplitter({
- items: [
- {
- // ...
- maxSize: "500px",
- }
- ],
- });
- });
size
Specifies the initial size of an item (pane) in pixels or as a percentage. The size changes after any layout alteration.
index.js
- $(() => {
- $("#splitter").dxSplitter({
- items: [
- {
- // ...
- size: "50%",
- }
- ],
- });
- });
If you do not specify pane sizes, the UI component splits up the panes automatically with even distribution.
NOTE
splitter
Specifies a splitter inside an item (pane).
Type:
dxSplitter_Options | undefined
Default Value: undefined
Use this property to make the item a nested Splitter UI component.
index.js
- $(() => {
- $("#splitter").dxSplitter({
- orientation: "vertical",
- items: [{
- text: "Top Panel"
- },
- {
- splitter: {
- items: [{
- text: "Nested Left Panel"
- },{
- text: "Nested Central Panel"
- },{
- text: "Nested Right Panel"
- }
- ]
- }
- }
- ]
- });
- });
template
Type:
The following types of the specified value are available.
- Assign a string containing the name of the required template.
- Assign a jQuery object of the template's container.
- Assign a DOM Node of the template's container.
- Assign a function that returns the jQuery object or a DOM Node of the template's container.
The following example adds a custom item to the component.
index.js
- $(function() {
- $("#splitterContainer").dxSplitter({
- // ...
- items: [
- {
- // ...
- template: '<div>Custom Item</div>'
- }
- ]
- });
- });
See Also
visible
Type:
Default Value: true
When you set this property to true
at runtime, displayed pane size becomes 0. Update other pane sizes to display the pane.
Feedback