PanePropertiesModel API in Vue Splitter API component

Interface for a class PaneProperties

Properties

collapsed

boolean

Specifies whether a pane is collapsed or not collapsed at the initial rendering of splitter.

<<template>
  <ejs-splitter height="110px">
    <e-panes>
      <e-pane collapsed=true></e-pane>
      <e-pane collapsed=true></e-pane>
    </e-panes>
  </ejs-splitter>
</template>

<script>
import Vue from "vue";
import { SplitterPlugin } from "@syncfusion/ej2-vue-layouts";

Vue.use(SplitterPlugin);

export default Vue.extend({
  data: function() {
    return {};
  }
});
</script>

collapsible

boolean

Specifies whether a pane is collapsible or not collapsible.

<<template>
  <ejs-splitter height="110px">
    <e-panes>
      <e-pane collapsible=true></e-pane>
      <e-pane collapsible=true></e-pane>
    </e-panes>
  </ejs-splitter>
</template>

<script>
import Vue from "vue";
import { SplitterPlugin } from "@syncfusion/ej2-vue-layouts";

Vue.use(SplitterPlugin);

export default Vue.extend({
  data: function() {
    return {};
  }
});
</script>

content

string | HTMLElement

Specifies the content of split pane as plain text, HTML markup, or any other JavaScript controls.

cssClass

string

Specifies the CSS class names that defines specific user-defined styles and themes to be appended on corresponding pane of the Splitter. It is used to customize the Splitter control panes. One or more custom CSS classes can be specified to the Splitter panes.

max

string

Specifies the maximum size of a pane. The pane cannot be resized if it is more than the specified maximum limit.

min

string

Specifies the minimum size of a pane. The pane cannot be resized if it is less than the specified minimum size.

resizable

boolean

Specifies the value whether a pane is resizable. By default, the Splitter is resizable in all panes. You can disable this for any specific panes using this property.

size

string

Configures the properties for each pane.