object with Content and position keys whichadds an icon near the anchor, first is icon pathand second sets position to either left or right
object
-
size
can be set to large/medium/small
string
medium
Button
type
can be set to success/error
string
-
hover
adds hover effect
boolean
false
inline
makes button thinner
boolean
false
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.
Props
Desciption
Type
Default
img
object with url and alt keys whichspecifies card's image, first is an image pathand second sets the name of your image
object
-
heading
sets card's heading
string
-
paragraph
sets card's content
string
-
Search
width
sets search bar's width
number
380px
value
value in v-model which holds search's value
variable
-
submit
function to be executed on search submit
function
-
Layout
Flex
Layout which represents a common css flex property.
Props
Desciption
Type
Default
direction
sets flex's direction, can be column / row /column-reverse / row-reverse
string
row
align
sets flex items' vertical alignment, can beflex-start / center / flex-end / revert
string
center
justify
sets flex items' horizontal alignment, can beflex-start / center / flex-end / revert /space-between / space-around
string
center
wrap
specifies whether items should be wrapped
boolean
false
Grid
Represents grid layout
gap
sets gap between grid items
string
1rem
evenly
makes all grid items same width, can be alsobe a value which specifies items minimal width