@vectoridau/vue-spectre
v0.2.2
Published
Vue components for the Spectre.css framework
Downloads
5
Readme
vue-spectre
Vue components for the Spectre.css framework.
State
This package is currently in active development.
All layout
components have been created, and element
components are
currently being worked on.
Documentation will be prettied up, but all of the information that you need should be present, if a little ugly, for the time being.
Compatibility
This package is designed against:
- Vue 2.0
- Spectre CSS 0.5.8
This package may work with older or newer versions - try your luck!
Usage
As a Node Module
Install With Yarn
yarn add @vectoridau/vue-spectre
Install With NPM
npm install @vectoridau/vue-spectre
As a Standalone Javascript File
<script type="text/javascript" src="vue-spectre/dist/vue-spectre.min.js"></script>
Common Component Attributes
The following HTML attributes are available in all components that extend the
SpectreBase
component.
Responsive Visibility
show-xs
Show on viewports of at least extra-small size.show-sm
Show on viewports of at least small size.show-md
Show on viewports of at least medium size.show-lg
Show on viewports of at least large size.show-xl
Show on viewports of at least extra-large size.
Example:
<container show-lg>
<p>
This container will not be visible on extra-small, small, or
medium viewports.
</p>
</container>
Responsive Invisibility
hide-xs
Hide on viewports at least as small as an extra-small viewport.hide-sm
Hide on viewports at least as small as a small viewport.hide-md
Hide on viewports at least as small as a medium viewport.hide-lg
Hide on viewports at least as small as a large viewport.hide-xl
Hide on viewports at least as small as an extra-large viewport.
Example:
<container hide-sm>
<p>
This container will not be visible on extra-small or small viewports.
</p>
</container>
Color
fg
Set the text color.
Available values:
primary
,secondary
,dark
,gray
,light
,success
,warning
,error
Example:
<container fg="primary">
<p>
The text in this container will usually be green, unless you have
modified your Spectre theme!
</p>
</container>
bg
Set the background color.
Available values: primary
, secondary
, dark
, gray
, success
, warning
, error
Example:
<container bg="dark">
<p>
This container will have a dark background. Setting the background
will also set the text color to something sensible by default.
</p>
</container>
<columns>
Extends SpectreBase
.
Display content in a series of columns.
Example:
<columns>
<column>Left</column>
<column>Middle</column>
<column>Right</column>
</columns>
Component Attributes
gapless
Yield columns without gaps between each column.
Example:
<columns gapless>
<!-- ... -->
</columns>
oneline
Force all columns to be positioned in the same row.
Example:
<columns oneline>
<!-- ... -->
</columns>
<column>
Extends SpectreBase
.
Display a column of content.
Example:
<columns>
<column>Left</column>
<column>Middle</column>
<column>Right</column>
</columns>
Component Attributes
w
Specify the width that this column should occupy.
Available values: auto
, 1
, 2
, 3
, 4
, 5
, 6
, 7
, 8
,
9
, 10
, 11
, 12
Example:
<columns>
<column w="4">4-wide column</column>
<column w="5">5-wide column</column>
<column w="3">3-wide column</column>
</columns>
Notes:
auto
width columns will take up the minimum space that they require,
leaving the rest of the available space for other columns.
xs
, sm
, md
, lg
, xl
Specify the width that this column should occupy when the view port is
at most the given size. The usage of these attributes is otherwise identical
to the w
attribute.
ml
, mx
, and mr
Set automatic margins to the left (ml
), the right (mr
), or bot the left
and right (mx
) of the column.
Example:
<columns>
<column w="2">
<div class="block bg-secondary">col-2</div>
</column>
<column w="4" mx>
<div class="block bg-secondary">col-4 col-mx-auto</div>
</column>
</columns>
<columns>
<column w="2">
<div class="block bg-secondary">col-2</div>
</column>
<column w="4" ml>
<div class="block bg-secondary">col-4 col-ml-auto</div>
</column>
</columns>
<columns>
<column w="4" ml>
<div class="block bg-secondary">col-4 col-ml-auto</div>
</column>
</columns>
<columns>
<column w="4" mx>
<div class="block bg-secondary">col-4 col-mx-auto</div>
</column>
</columns>
<columns>
<column w="4" mr>
<div class="block bg-secondary">col-4 mr</div>
</column>
</columns>
<hero>
Extends SpectreBase
.
Display a "hero" block, designed to attract attention.
Example:
<hero title="Attention!">
<p>
This is a <em>Hero</em> element!
</p>
</hero>
Component Attributes
title
The title to display at the start of the hero block.
sm
and lg
Make the hero block a small hero block (sm
) or a large hero block (lg
).
Example:
<hero sm>
<p>
This is a <em>small</em> hero block.
</p>
</hero>
<navbar>
Extends SpectreBase
.
Display a navbar which can be used for a header and general navigation.
Example:
<navbar>
<navbar-section>
<a href="#one">Section One</a>
<a href="#two">Section Two</a>
<a href="#three">Section Three</a>
</navbar-section>
</navbar>
Component Slots
The default slot contains the hero content.
The title
slot overrides the default title element.
<navbar-section>
Extends SpectreBase
.
Display a section of a navbar. Navbar sections are used to group content to the left, center and right of the navbar.
Using a single <navbar-section>
element within a navbar will yield a single
section on the left.
Using two consecutive <navbar-section>
elements within a navbar will yield
a left and right section.
Using three consecutive <navbar-section>
elements within a navbar will yield
a left, center, and right section, if you also add the center
attribute to
the second <navbar-section>
element.
Example:
<navbar>
<navbar-section>Left Menu</navbar-section>
<navbar-section center>Center Menu</navbar-section>
<navbar-section>Right Menu</navbar-section>
</navbar>
Component Attributes
center
This attribute should be used to denote the central navbar section, if one is present. This will distinguish the central section from left or right sections and allow it to be placed correctly.
Example:
<navbar-section center>
<!-- ... -->
</navbar-section>
<btn>
Create a button.
Component Attributes
sm
and lg
Make the button small (sm
) or large (lg
).
Example:
<btn sm>This is a small button</btn>
<btn lg>This is a large button</btn>
primary
, link
, success
, and error
Apply a visual style to the button.
Example:
<btn primary>Primary Button</btn>
<btn link>Link Button</btn>
<btn success>Success Button</btn>
<btn error>Error Button</btn>
block
Make the button full-width.
Example:
<btn block>This is a full-width button</btn>
action
and circle
Make the button square (action
) or circular (circle
).
<btn square>S</btn>
<btn circle>C</btn>
active
Set the button's visual state to its active style.
<btn active>This is an active button</btn>
disabled
Disable the button and set its visual state to match.
<btn disabled>This is an inactive button</btn>
loading
Replace the button text with an animated loading indicator.
<btn loading>This text will not be shown</btn>
<btn-group>
Present a group of buttons attached together.
Example:
<btn-group>
<btn primary>Main Action</btn>
<btn>Secondary Action</btn>
<btn>Tertiary Action</btn>
</btn-group>
Component Attributes
block
Make the button group full-width.
Example:
<btn-group block>
<btn>These Buttons</btn>
<btn>Will Stretch</btn>
<btn>To Fit</btn>
</btn-group>
<input-text>
Display a nice-looking text input. This input can be bound as a v-model, and display an associated label.
Example:
<template>
<container>
<input-text v-model="name" placeholder="Name" label="Name"></input-text>
Your name is: {{ name }}
</container>
</template>
<script>
export default {
data: function() {
return {
name: ""
};
}
}
</script>
Component Attributes
v-model
Bind a vue data model to this input.
id
Set the HTML ID for the text input (and associated label if present).
name
Set the form element name for the text input.
value
Set the value of the text input.
This attribute is used as part of the v-model
binding process. You should
not use this attribute if you are also using v-model
on this element.
type
Set the type of the underlying form input. You can specify any type you want, but you should probably limit it to the basic "text-related" types, such as:
text
password
email
placeholder
The placeholder to display on the form input when the user has not supplied any text.
maxlength
The maximum number of characters allowed in this field.
required
Force this input to be required in the context of submitting a form.
readonly
Prevent the content of this input from being modified.
disabled
Prevent this input from being selected or focused on. Also update the visual appearance of this input to represent the state.
formnovalidate
Prevent standard form validation rules applying to this input in the context of submitting a form.
autocomplete
and no-autocomplete
Enable or disable autocomplete for this input.
Example:
<!-- Enable autocomplete -->
<input-text autocomplete ...></input-text>
<!-- Disable autocomplete -->
<input-text no-autocomplete ...></input-text>
<!-- Enable autocomplete and specify autocomplete field types -->
<input-text v-model="firstName" autocomplete="fname"></input-text>
<input-text v-model="lastName" autocomplete="lname"></input-text>
<input-text v-model="email" autocomplete="email"></input-text>
<input-text v-model="creditCardName" autocomplete="cc-name"></input-text>
<input-text v-model="creditCardNumber" autocomplete="cc-number"></input-text>
<input-text v-model="creditCardCVC" autocomplete="cc-csc"></input-text>
<input-text v-model="creditCardExpiry" autocomplete="cc-exp"></input-text>
autofocus
Automatically focus on this input once the page loads.
pattern
Specify a regular expression pattern that should be used to validate the content of this input.
Component Events
@input => function( newValue )
Raised when the value of this element changes.
This event is used as part of the v-model
binding process. You may use
this event even if you are also using v-model
on this element.
<input-textarea>
Documentation to come, but mostly the same as <input-text>
.
Main differences:
- No
type
attribute - Addition of
cols
attribute - Addition of
rows
attribute
Author
Daniel "Vector" Kerr [email protected]