Panel

Example

Panel body

<wui-panel panel-title="Panel Title">
<wui-panel-body>Panel body</wui-panel-body>
</wui-panel>

import { Panel } from "@wui/wui-vue/lib/panel";

Prop	Type	Default	Required	Description
variant	`String`	`default`	`false`	You can change the color of the panel by one of these defined variations `["default", "primary", "success", "info", "warning", "danger"]`
panelTitle	`String`	`undefined`	`false`	The panel title used in the panel header
collapsible	`Boolean`	`false`	`false`	When set, renders a toggle element in the panel header and activates the collapse feature
collapsed	`Boolean`	`false`	`false`	Whether or not the panel body is collapsed. It will toggle the caret icon's direction. `collapsible` must be `true`. Syncable with the .sync prop modifier.

Name	Description
default	The default slot content without the `panel-body` (no padding). Use this slot if you need the whole space from left to right without padding. Can be used together with `<wui-panel-body/>` together.
body	Use the `body` slot instead of the `default` slot if you want to have your content wrapper by the wui `panel-body`, which means you will get a nice padding for your content
header	Optional header slot to pass any custom header content
footer	Optional footer slot to pass any custom footer content

Event	Arguments	Description
`update:collapsed`	`collapsed` - `Boolean` - current state of the `collapsed` prop	Emitted when the `collapsed` prop has been changed by the component

import { PanelHeader } from "@wui/wui-vue/lib/panel";

Hint: collapsed prop can be used with .sync modifier e.g.

<wui-panel>
  <wui-panel-header
    panel-title="Panel title"
    collapsible
    :collapsed.sync="localCollapsed"
  />
  ...
</wui-panel>

Prop	Type	Default	Required	Description
panelTitle	`String`	`undefined`	`false`	will be displayed with a `<h2>` element
isExpandable	`Boolean`	`false`	`false`	Whether or not you want to create a custom facet header. If set to `true` a modifier CSS class `panel-heading--expandable` will be added to the root element.
collapsible	`Boolean`	`false`	`false`	When set, renders a toggle element in the panel header and activates the collapse feature
collapsed	`Boolean`	`false`	`false`	Whether or not the panel body is collapsed. It will toggle the caret icon's direction. `collapsible` must be `true`. Syncable with the .sync prop modifier.

Name	Description
default	default slot to bypass default header

import { PanelBody } from "@wui/wui-vue/lib/panel";

none

Name	Description
default	default slot

import { PanelFooter } from "@wui/wui-vue/lib/panel";

none

Name	Description
default	default slot

import { PanelTitle } from "@wui/wui-vue/lib/panel";

Prop	Type	Default	Description
panelTitle	String	`undefined`	The title which will be displayed
tag	String	`h2`	The HTML tag which will be used for the title

Name	Description
default	default slot - will replace the default rendering of the title prop

From WUI and

with

WUI is wescale’s design system