Sets or gets wheter a custom context menu will appear when certain elements of the widget are right-clicked.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :contextMenu="true">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets or gets the layout's height.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets or gets the layout. This property determines the position of the layout elements and their characteristics. The layout array always contains one root item of type 'layoutGroup'.

Each object in the layout array can have the following properties, with some restrictions based on the type :

• type. Possible values:
  • 'layoutGroup' - container for other groups. It has no visual features. The root item is always of this type.
  • 'tabbedGroup' - a group that contains layoutPanels. It is represented by a jqxWindow-like panel with a bottom-aligned jqxRibbon inside.
  • 'documentGroup' - a group that contains documentPanels. It is represented by a top-aligned jqxRibbon.
  • 'autoHideGroup' - a group that contains layoutPanels. It is represented by a jqxRibbon with mode: 'popup'. Each ribbon item has a jqxWindow-like panel in its content. This group has to be either the first or the last child item of its parent layoutGroup.
  • 'layoutPanel' - a panel that can be inserted in a tabbedGroup or autoHideGroup. When it is in a tabbedGroup it is represented by a ribbon item and in an autoHideGroup - by a jqxWindow-like panel inside a ribbon item.
  • 'documentPanel' - a panel that can be inserted in a documentGroup. It is represented by a ribbon item.
• alignment - sets the alignment of an autoHideGroup. Possible values:
  • 'left'
  • 'right'
  • 'top'
  • 'bottom'
• allowClose - applicable to tabbedGroups, layoutPanels and documentPanels. If set to true, the group/panel can be closed.
• allowPin - applicable only to tabbedGroups. If set to false, the group cannot be pinned.
• allowUnpin - applicable only to autoHideGroups. If set to false, the group cannot be unpinned.
• contentContainer - indicates which HTML element has the content of the panel. The required value is the value of an existing HTML element's data-container attribute. N/A to groups.
• height - sets the height of a group (N/A to panels). Used only if the parent group's orientation is 'vertical'. The heights of all such groups have to be set either in pixels or percents (not a mix of both).
• initContent - a callback function to be called when a panel is opened for the first time. Useful for initializing widgets in panels. N/A to groups.
• minHeight - sets the minimumn height (in pixels) of a group which is vertically aligned within its parent group. Disregards the value of the minGroupHeight property.
• minWidth - sets the minimumn width (in pixels) of a group which is horizontally aligned within its parent group. Disregards the value of the minGroupWidth property.
• orientation - orients child items either horizontally or vertically. Applicable only to layoutGroups. Possible values:
  • 'horizontal'
  • 'vertical'
• pinnedHeight - sets what the height of a tabbedGroup will be after it is pinned.
• pinnedWidth - sets what the width of a tabbedGroup will be after it is pinned.
• selected - sets whether a panel is initially selected. N/A to groups.
• title - sets the title of a panel. Represented by the corresponding ribbon item's title. N/A to groups.
• unpinnedHeight - sets what the height of an autoHideGroup will be after it is unpinned.
• unpinnedWidth - sets what the width of an autoHideGroup will be after it is unpinned.
• width - sets the width of a group (N/A to panels). Used only if the parent group's orientation is 'horizontal'. The widths of all such groups have to be set either in pixels or percents (not a mix of both).
• items - an array of item objects with the fields described above. N/A to panels.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets the default minimumn height for groups which are vertically aligned within their parent group.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :minGroupHeight="200">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets the default minimumn width for groups which are horizontally aligned within their parent group.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :minGroupWidth="150">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets or gets wheter panels can be dynamically resized.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :resizable="false">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :rtl="true">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
                                                                                          
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
                                  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout" :theme="'material'">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

Sets or gets the layout's width.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    }
  }
</script>

This event is triggered when a group has been pinned.

Code examples

Bind to the pin event of jqxLayout.

<template>
  <JqxLayout ref="myLayout" @pin="onPin($event)"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    methods: {
      onPin: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a group has been resized (when the group has been resized with the mouse or when an adjacent group has been pinned, unpinned or closed).

Code examples

Bind to the resize event of jqxLayout.

<template>
  <JqxLayout ref="myLayout" @resize="onResize($event)"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    methods: {
      onResize: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a group has been unpinned.

Code examples

Bind to the unpin event of jqxLayout.

<template>
  <JqxLayout ref="myLayout" @unpin="onUnpin($event)"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    methods: {
      onUnpin: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Destroys the widget.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    mounted: function () {
      this.$refs.myLayout.destroy();
    }
  }
</script>

Loads a previously saved layout.

<template>
  <div>
    <JqxLayout ref="myLayout"
          :width="800" :height="600" :layout="layout">
      <div data-container="ToolboxPanel">List of tools</div>
      <div data-container="HelpPanel"> Help topics </div>
      <!--documentGroup-->
      <div data-container="Document1Panel"> Document 1 content </div>
      <div data-container="Document2Panel"> Document 2 content </div>
      <!--bottom tabbedGroup-->
      <div data-container="ErrorListPanel"> List of errors </div>
      <div data-container="OutputPanel"> Output </div>
      <!--right tabbedGroup-->
      <div data-container="SolutionExplorerPanel"> Solution structure </div>
      <div data-container="PropertiesPanel"> List of properties </div>
    </JqxLayout>
    <JqxButton @click="saveLayoutBtnOnClick()">Save Layout</JqxButton>
    <JqxButton ref="myLoadLayoutBtn" @click="loadLayoutBtnOnClick()" :disabled="true">Load Layout</JqxButton>
  </div>
</template>

<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
  import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";

  export default {
    components: {
      JqxLayout,
      JqxButton
    },
    data: function () {
      return {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, {
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    methods: {
      saveLayoutBtnOnClick: function () {
        this.savedLayout = this.$refs.myLayout.saveLayout();
        this.$refs.myLoadLayoutBtn.disabled = false;
      },
      loadLayoutBtnOnClick: function () {
        this.$refs.myLayout.loadLayout(this.savedLayout);
        this.$refs.myLoadLayoutBtn.disabled = true;
      }
    }
  }
</script>
<style>
  .jqx-button {
    width: 100px;
    display: inline-block;
    margin-top: 20px;
    margin-right: 5px;
  }
</style>

Refreshes the widget.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    mounted: function () {
      this.$refs.myLayout.refresh();
    }
  }
</script>

Renders the widget.

<template>
  <JqxLayout ref="myLayout"
    :width="800" :height="600" :layout="layout">
    <div data-container="ToolboxPanel">List of tools</div>
    <div data-container="HelpPanel"> Help topics </div>
    <!--documentGroup-->
    <div data-container="Document1Panel"> Document 1 content </div>
    <div data-container="Document2Panel"> Document 2 content </div>
    <!--bottom tabbedGroup-->
    <div data-container="ErrorListPanel"> List of errors </div>
    <div data-container="OutputPanel"> Output </div>
    <!--right tabbedGroup-->
    <div data-container="SolutionExplorerPanel"> Solution structure </div>
    <div data-container="PropertiesPanel"> List of properties </div>
  </JqxLayout>
</template>

 
<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
 
  export default {
    components: {
      JqxLayout
    },
    data: function () {
      return  {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, { 
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    mounted: function () {
      this.$refs.myLayout.render();
    }
  }
</script>

Saves the current layout of the widget. The object returned by this method can be passed to the method loadLayout.

<template>
  <div>
    <JqxLayout ref="myLayout"
          :width="800" :height="600" :layout="layout">
      <div data-container="ToolboxPanel">List of tools</div>
      <div data-container="HelpPanel"> Help topics </div>
      <!--documentGroup-->
      <div data-container="Document1Panel"> Document 1 content </div>
      <div data-container="Document2Panel"> Document 2 content </div>
      <!--bottom tabbedGroup-->
      <div data-container="ErrorListPanel"> List of errors </div>
      <div data-container="OutputPanel"> Output </div>
      <!--right tabbedGroup-->
      <div data-container="SolutionExplorerPanel"> Solution structure </div>
      <div data-container="PropertiesPanel"> List of properties </div>
    </JqxLayout>
    <JqxButton @click="saveLayoutBtnOnClick()">Save Layout</JqxButton>
    <JqxButton ref="myLoadLayoutBtn" @click="loadLayoutBtnOnClick()" :disabled="true">Load Layout</JqxButton>
  </div>
</template>

<script>
  import JqxLayout from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlayout.vue';
  import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";

  export default {
    components: {
      JqxLayout,
      JqxButton
    },
    data: function () {
      return {
        layout: [{
          type: 'layoutGroup',
          orientation: 'horizontal',
          items: [{
            type: 'autoHideGroup',
            alignment: 'left',
            width: 80,
            unpinnedWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Toolbox',
              contentContainer: 'ToolboxPanel'
            }, {
              type: 'layoutPanel',
              title: 'Help',
              contentContainer: 'HelpPanel'
            }]
          }, {
            type: 'layoutGroup',
            orientation: 'vertical',
            width: 500,
            items: [{
              type: 'documentGroup',
              height: 400,
              minHeight: 200,
              items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
              }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
              }]
            }, {
              type: 'tabbedGroup',
              height: 200,
              pinnedHeight: 30,
              items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
              }, {
                type: 'layoutPanel',
                title: 'Output',
                contentContainer: 'OutputPanel',
                selected: true
              }]
            }]
          }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
              type: 'layoutPanel',
              title: 'Solution Explorer',
              contentContainer: 'SolutionExplorerPanel'
            }, {
              type: 'layoutPanel',
              title: 'Properties',
              contentContainer: 'PropertiesPanel'
            }]
          }]
        }]
      }
    },
    methods: {
      saveLayoutBtnOnClick: function () {
        this.savedLayout = this.$refs.myLayout.saveLayout();
        this.$refs.myLoadLayoutBtn.disabled = false;
      },
      loadLayoutBtnOnClick: function () {
        this.$refs.myLayout.loadLayout(this.savedLayout);
        this.$refs.myLoadLayoutBtn.disabled = true;
      }
    }
  }
</script>
<style>
  .jqx-button {
    width: 100px;
    display: inline-block;
    margin-top: 20px;
    margin-right: 5px;
  }
</style>