@gofynd/nitrozen-vue
v0.0.56TypeScript
Fynd Design Library for Vue
0/weekUpdated 5 months agoMITUnpacked: 5.0 MB
Published by fynd
Nitrozen Design for Vue (Enhanced)
$3
``
name: 'nitrozen-badge',
props:
state:
1. info
2. success
3. warn
4. disable
5. none,
fill: Boolean
Code Snippet
javascript
Done 1
Done 2
`
$3
name: 'nitrozen-button',
directives:
1. strokeBtn
2. flatBtn
props:
href: String
type: String
disabled: Boolean
rounded: Boolean
theme: 'primary' or 'secondary'
size: 'small' or 'medium' or 'large'
focused: Boolean
showProgress: Booleanactions:
click
Code Snippet
javascript
Save 1
Save 2
Save 3
`
$3
name: 'nitrozen-checkbox'
props:
disabled: Boolean
true
false
value: v-model
methods:
input
change
Code Snippet
javascript
`
$3
name: 'nitrozen-chips',
props:
disable: Boolean
theme: 'primary' or 'secondary'
inProgress: Boolean
error: Boolean
multiSelect: Boolean
state:
1. error
2. success
3. progress
4. selected
Code Snippet
javascript
Chip 1
Chip 2
Chip 3
`
$3
name: 'nitrozen-dialog',
props:
id: String
title: String
methods:
open(config?: DialogConfig): NitrozenDialog
close()
isOpen(): Boolean
DialogConfig:{
data: null,
dismissible: true,
isModalVisible: false,
negativeButtonLabel: false,
neutralButtonLabel: "Ok",
positiveButtonLabel: false
showCloseButton: false,
}
Code Snippetjavascript
Open Success Dialog
Image Uploaded Successfully
`
$3
name: 'nitrozen-dropdown',
props:
items: Array
disabled: Boolean
label: String
required: Boolean
value: v-model
Code Snippetjavascript
`
$3
name: 'nitrozen-error'Code Snippet
javascript
Please enter password with atleast 8 character
`$3
name: 'nitrozen-input',
props:
type:
1. text
2. textarea
label: String
placeholder: String
disabled: Boolean
value: v-model
search: Boolean
showSearchIcon: Boolean
showTooltip: Boolean
tooltipText: String
maxlength: Number
Code Snippet
javascript
label="Name"
placeholder="Enter Name"
v-model="name"
>
label="Search"
v-model="search"
:search = "true"
:showSearchIcon = "true"
placeholder="Search"
>
label="Description"
placeholder="Enter Description"
v-model="description"
>
`
$3
name: "nitrozen-menu",
directives: clickOutside
props:
mode: String
horizontal
vertical
inverted: Boolean
position: String
top
bottom
methods:
closeMenu()
Code Snippet
javascript
Item 1
Item 2
Item 3
`
$3
name: 'nitrozen-pagination'
props:
name: String
pageSizeOptions: String or Number
value: v-model (PaginationConfig) PaginationConfig : {
limit: Number,
total: Number,
current: Number
}
Code Snippet
javascript
v-model="pagination"
@change="paginationChange"
:pageSizeOptions="[5, 10, 20, 50]"
>
`
$3
name: 'nitrozen-radio'
props:
disabled: Boolean
radioValue: String or Number
name: String
value: v-model
Code Snippet
javascript
v-model="radioSelection"
radioValue="One"
>
One
v-model="radioSelection"
radioValue="Two"
>
Two
v-model="radioSelection"
radioValue="Three"
>
Three
`
$3
name: 'nitrozen-stepper'
props:
activeIndex: Number
maxActiveIndex: Number
elements: Array
$3
name: 'nitrozen-toggle-btn'
props:
v-model: Boolean
Code Snippet
javascript
@change="togChange"
>
`
$3
name: 'nitrozen-tooltipprops:
position:
1. bottom
2. top
3. right
4. left
tooltipText: String
``
Code Snippet
javascript
position = "right"
>
``