Note: This project is no longer maintained.
This plugin aims to provide your Vue application with a handful of light, composable, Flexbox-powered components.
Just bower
or npm install ericmcdaniel/vue-panel
. The package is exposed as
a UMD module so you can require it with Browserify/Webpack/etc. or include it in
your page via script tag.
To use this plugin with Vue, simply call Vue.use(require('vue-panel'))
, or
Vue.use(window.VuePanel)
if including in a script tag.
<v-panel>
responds to a variety of Flexbox parameters and is useable as both a
display: flex
element and a flex-item:
<v-panel grow="1" shrink="0"></v-panel>
<v-panel>
will display any content inside of the element as it's own
transclusion content:
<v-panel basis="200px">
<h3>Foo</h3>
<p>Lorem ipsum dolor sit amet...</p>
</v-panel>
<v-panel>
responds to
align-items
,align-self
,order
,direction
(flex-direction),flex
,grow
(flex-grow),shrink
(flex-shrink),basis
(flex-basis),- and
justify
(justify-content).
The plugin provides two more components: <v-panel-bar>
and <v-panel-content>
.
<v-panel-bar>
responds to
align-items
,direction
,justify
,- and
size
(flex-basis).
The bar is 30px wide by default. When the direction
value changes,
the component will broadcast the event v-panel-bar:direction
(with it's
$data.direction
value) to child components so they can respond to it's
flex-direction.
<v-panel-content>
is a simple flex-item that responds to flex
, grow
and
shrink
.
<v-panel>
<v-panel-bar>
<button on="click: updateContent">Click</button>
</v-panel-bar>
<v-panel-content v-ref="content">Foo</v-panel-content>
</v-panel>
Each of the included components are also provided as directives. These directives can take parameters in the form of attributes, not to be confused with component props. These params follow the same naming conventions as the props documented above.
<section v-panel grow="1" shrink="0">
<div v-panel-bar size="90px"></div>
<div v-panel-content></div>
</section>
The directives share common defaults with the components, but you will have to manually declare bindings using the v-bind
directive if you want to hook up ViewModel data to the params. For example:
<my-nav v-panel-bar v-bind:size="myBarSize"></my-component>
Each of the vue-panel components can be globally configured to initialize with
additional data
values via an object literal where the key is the property
name and the value is the initial value. This is done by passing an object as
the second parameter to the Vue.use
function like so:
Vue.use(VuePanel, {
// either hyphenated
'v-panel': {
class: 'Panel',
style: {
color: 'red',
backgroundColor: '#ccc'
}
},
// or camel case:
'vPanelBar': {
class: 'Panel-bar'
},
'vPanelContent': {
class: 'Panel-content'
}
});
class
and style
are currently the only options that have any built-in
effect. The value from class
will be merged with the class list of each
component instance via the v-bind:class
directive. The value(s) from style
will be merged with the inline styles of each component instance via the
v-bind:style
directive.
Note: This feature does not work with the bundled directives. Directives are designed to provide the bare-minimum Flexbox parameters that you can integrate with any component or element.
Open example/index.html
for a straightforward example.
The plugin ships with Jasmine specs in the test
folder if installing from NPM
or GitHub. npm install
to pull down the Vue dependency, then open
test/index.html
to run the specs.