1.0.6 • Published 3 years ago

fresh-breath-vue v1.0.6

Weekly downloads
29
License
MIT
Repository
github
Last release
3 years ago

fresh-breath-vue

NPM JavaScript Style Guide

Install

npm install --save fresh-breath-vue

Quickstart

import { MyComponent } from "fresh-breath-vue";

export default {
  name: "UsageExample",
  components: {
    MyComponent,
  },
};
<my-component>
  Example
</my-component>

Components

Anchor

PropsDesciptionTypeDefault
colorcan be set to any supported CSS value e.g. #fffstring-
hoveradds animation on mouse hoverbooleanfalse
underlineadds a line under anchor on hoverbooleanfalse
Extraobject with Content and position keys whichadds an icon near the anchor, first is icon pathand second sets position to either left or rightobject-
sizecan be set to large/medium/smallstringmedium

Button

typecan be set to success/errorstring-
hoveradds hover effectbooleanfalse
inlinemakes button thinnerbooleanfalse

Breadcrumb

Simple breadcrumb menu with only one items array prop, each item is an object with link and text keys,first defines a path to follow and second is a menu item's button value.

Card

Commonly seen card component, consists of image, heading and paragraph. Important!The card components' order depends on integer 1-3 at the end of prop. Thus if you want card to have image at the top, heading in the middle and paragraph at bottom props should be like this img1/heading2/paragraph3. Change numbers in a way you want your card component to be rendered.

PropsDesciptionTypeDefault
imgobject with url and alt keys whichspecifies card's image, first is an image pathand second sets the name of your imageobject-
headingsets card's headingstring-
paragraphsets card's contentstring-

Search

widthsets search bar's widthnumber380px
valuevalue in v-model which holds search's valuevariable-
submitfunction to be executed on search submitfunction-

Layout

Flex

Layout which represents a common css flex property.

PropsDesciptionTypeDefault
directionsets flex's direction, can be column / row /column-reverse / row-reversestringrow
alignsets flex items' vertical alignment, can beflex-start / center / flex-end / revertstringcenter
justifysets flex items' horizontal alignment, can beflex-start / center / flex-end / revert /space-between / space-aroundstringcenter
wrapspecifies whether items should be wrappedbooleanfalse

Grid

Represents grid layout

gapsets gap between grid itemsstring1rem
evenlymakes all grid items same width, can be alsobe a value which specifies items minimal widthbooleanstring300px
justifysame as flex's justify propstring-
colssets grid's column numbernumber4

Table

tableHeadingarray of strings to appear in table's headerarray-
tableDataarray of objects to fill table's rows and cellsarray-
wrapwhether to wrap table's cellsbooleanfalse

License

MIT

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago