Integration of the golden-layout to Vue
npm i -S vue-golden-layout
For the ones who clone, in order to test, a static sample application can be compiled :npm installnpm test
You can now browse
Don't forget in order to make it work
- Include a golden-layout theme CSS.
Available themes are
goldenlayout-base.css is already integrated to the library.
vue-golden-layouthas to be bundled with an
In case of incompatibility with bundlers,
vue-golden-layout can be bundeled by the sources.
The sources entry point is in
<gl-stack> can be represented in a tree - they respectively stand for a golden-layout row, column and stack.
Component can be described by extension - namely, by giving their content using the data from the defining component.
In order to use
v-for to control the content, templates have to be defined and used with a name.
If this rule is broken :
- Popup will display blank
- Loading a saved state will fail
- This will be displayed in the console: "Dynamic golden-layout components should be named templates instead."
Defining a template
This is done through
slots in the
<golden-layout> element (the square brackets stand for "optional")
The content of
myState can of course be changed. This will be saved/loaded when the overall state is saved/loaded.
Using a template
gl-component has a
template property. This is a string that target the
It also (useful for
v-fors) has a
state property that will be used as the
title: stringwidth: numberheight: numberclosable: booleanreorderEnabled: booleanhidden: boolean
golden-layout has a property and an event named
- The event is triggered when the state has changed (even deeply, like a deep watch).
- The property is used at mount to initialise the configuration. After that, any change will have no effect.
stateproperty can be a
Promise, then the golden-layout will be rendered only when the
Promisehas been resolved.
- The property
statecan be given minified or not
- The event
stategives indeed the minified version of the config, and the expanded version as a second argument.
- It is also the
Some golden-layout global component can be given before any instanciation (while declaring classes) by calling this function:
static registerGlobalComponentname: string, comp:void
(container: any, state: any)=> void is the signature of a gloden-layout component and they are created per golden-layout instances
The glComponent are the ones directly included in the
<div> controlled and sized by golden-layout and answers to this class to fit in the layout child container, that can be overridden
Golden-layout and Vue both have objects representing their internal state. A
glRow is associated with a
Each vue object has a
glObject property and, vice versa, each golden-layout object has a
vueObject property linking to each another.
Virtual vs actual tree
Vue objects (rows, components, stacks, ...) all have a
$parent that retrieve their Vue' parent. Also their children might be retrieved with
Though, the user might change the order of things and who contain what. To retrieve the golden-layout-wise hierarchy, we can use
glParent as well as
glChindren on the vue objects to retrieve vue objects.
Straight forwards from golden-layout, refer to their doc
Also, the event
sub-window is emitted on mount with a
is: boolean argument that is
true iif this instance of golden-layout is loaded as a pop-up window.
destroy is provided for all components beside the golden-layout object. It occurs on user's closure or pop-out.
Duplicatable stacks are stacks that should always remain in the main window as their content is modified programatically. These stacks, when poped-out, remain in the main screen while their content is poped-out.
Defineing in it components that are not
reorder-enabled will stay in the stack in the main window.
The router is a
glContainer that aims to sublimate the
It let people manage their routes in tabs, open them in a split screen or even popped-out in another browser window on another physical display.
The main usage is
<gl-router />. Any options of
router-view still has to be implemented.
gl-router is a
A default content to render all routes can be provided as the
route slot template - with or without scope : if a scope is queried, it will be the route object.
If this content is provided, it should contain a
<main /> tag that will be filled with the loaded route component.
Note: the provided template will be ignored when maximised/popped-out.
Allows to specify a function that takes a route object in parameter and gives the string that will be used as tab title.
If none is specified, the default is to take
$route.meta.title - this means that routes have to be defined with a title in their meta-data.
Specify the URL to use when the user closes all the tabs (
"/" by default)
gl-routes are components displaying a route. They are meant to be used in a gl-router but only have to be used in a golden-layout container.
They can take a
name and/or a
path, and their
reorder-enabled properties are false by defaule. They can be forced a
title but their container'
titler will be used if not.
Note: all the elements inside them rendered from route' component will have a
this.$route pointing to the given route, not the actual one.