@gofynd/nitrozen-vue
v0.0.53
Published
Fynd Design Library for Vue
Downloads
2,702
Readme
Nitrozen Design for Vue (Enhanced)
Nitrozen Badge
name: 'nitrozen-badge',
props:
state:
1. info
2. success
3. warn
4. disable
5. none,
fill: Boolean
Code Snippet
<template>
<div>
<nitrozen-badge state="success"> Done 1 </nitrozen-badge>
<nitrozen-badge state="success" :fill = "true"> Done 2 </nitrozen-badge>
</div>
</template>
<script>
import { NitrozenBadge } from '@gofynd/nitrozen-vue';
export default {
components: {
'nitrozen-badge': NitrozenBadge
}
}
</script>
Nitrozen Button
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: Boolean
actions:
click
Code Snippet
<template>
<div>
<nitrozen-button theme="primary" :rounded="true" v-flatBtn> Save 1</nitrozen-button>
<nitrozen-button theme="primary" v-flatBtn> Save 2</nitrozen-button>
<nitrozen-button theme="primary" v-strokeBtn> Save 3</nitrozen-button>
</div>
</template>
<script>
import { NitrozenButton, flatBtn, strokeBtn } from '@gofynd/nitrozen-vue';
export default {
components: {
'nitrozen-button': NitrozenButton
},
directives: {
flatBtn,
strokeBtn
}
}
</script>
Nitrozen Checkbox
name: 'nitrozen-checkbox'
props:
disabled: Boolean
true
false
value: v-model
methods:
input
change
Code Snippet
<template>
<div>
<nitrozen-checkbox @change="toggle" v-model="checkBoxValue"
>Checkbox 1</nitrozen-checkbox >
</div>
</template>
<script>
import { NitrozenCheckBox } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-checkbox": NitrozenCheckBox,
},
data: function () {
return {
checkBoxValue: true,
};
},
methods: {
toggle(e){
console.log(e)
}
}
};
</script>
Nitrozen Chips
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
<template>
<div>
<nitrozen-chips>Chip 1</nitrozen-chips>
<nitrozen-chips theme='secondary' :error = 'true'>Chip 2</nitrozen-chips>
<nitrozen-chips theme='secondary' state = 'success'>Chip 3</nitrozen-chips>
</div>
</template>
<script>
import { NitrozenChips } from "@gofynd/nitrozen-vue";
export default {
components: {
'nitrozen-chips': NitrozenChips
}
}
</script>
Nitrozen Dialog
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 Snippet
<template>
<div>
<nitrozen-button @click="openDialog" v-flatBtn :rounded="true">Open Success Dialog</nitrozen-button>
<nitrozen-dialog ref="dialog" title="Success">
<template slot="body">
<div>
Image Uploaded Successfully
</div>
</template>
</nitrozen-dialog>
</div>
</template>
<script>
import { NitrozenDialog, NitrozenButton, flatBtn } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-dialog": NitrozenDialog,
"nitrozen-button": NitrozenButton,
},
directives: {
flatBtn,
},
methods: {
openDialog() {
this.$refs["dialog"].open({
width: "600px",
showCloseButton: true,
});
},
closeDialog() {
this.$refs["dialog"].close();
}
},
};
</script>
Nitrozen Dropdown
name: 'nitrozen-dropdown',
props:
items: Array
disabled: Boolean
label: String
required: Boolean
value: v-model
Code Snippet
<template>
<div style>
<nitrozen-dropdown label="State" :items="states" v-model="selectedState"
@change="selectionChanged"></nitrozen-dropdown>
</div>
</template>
<script>
import { NitrozenDropdown } from '@gofynd/nitrozen-vue'
export default {
components: {
'nitrozen-dropdown': NitrozenDropdown
},
data: function() {
return{
states: [{
text: "Maharashtra",
value: "Marathi"
},{
text: "Andhra Pradesh",
value: "Telugu"
}],
selectedState: ""
}
},
methods: {
selectionChanged(selectedState) {
console.log(selectedState);
}
}
};
</script>
Nitrozen Error
name: 'nitrozen-error'
Code Snippet
<template>
<div>
<nitrozen-error>Please enter password with atleast 8 character</nitrozen-error>
</div>
</template>
<script>
import { NitrozenError } from '@gofynd/nitrozen-vue'
export default {
components: {
'nitrozen-error': NitrozenError
}
};
</script>
Nitrozen Input
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
<template>
<div>
<nitrozen-input
type="text"
label="Name"
placeholder="Enter Name"
v-model="name"
></nitrozen-input>
<nitrozen-input
type="text"
label="Search"
v-model="search"
:search = "true"
:showSearchIcon = "true"
placeholder="Search"
></nitrozen-input>
<nitrozen-input
type="textarea"
label="Description"
placeholder="Enter Description"
v-model="description"
>
</nitrozen-input>
</div>
</template>
<script>
import { NitrozenInput } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-input": NitrozenInput,
},
data: function(){
return {
name: "",
description: "",
search: ""
}
}
};
</script>
Nitrozen Menu
name: "nitrozen-menu",
directives: clickOutside
props:
mode: String
horizontal
vertical
inverted: Boolean
position: String
top
bottom
methods:
closeMenu()
Code Snippet
<template>
<div>
<nitrozen-menu>
<nitrozen-menu-item> Item 1 </nitrozen-menu-item>
<nitrozen-menu-item> Item 2 </nitrozen-menu-item>
<nitrozen-menu-item> Item 3 </nitrozen-menu-item>
</nitrozen-menu>
</div>
</template>
<script>
import { NitrozenMenu, NitrozenMenuItem } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-menu": NitrozenMenu,
"nitrozen-menu-item": NitrozenMenuItem,
},
};
</script>
Nitrozen Pagination
name: 'nitrozen-pagination'
props:
name: String
pageSizeOptions: String or Number
value: v-model (PaginationConfig)
PaginationConfig : {
limit: Number,
total: Number,
current: Number
}
Code Snippet
<template>
<div>
<nitrozen-pagination
name="Department"
v-model="pagination"
@change="paginationChange"
:pageSizeOptions="[5, 10, 20, 50]"
></nitrozen-pagination>
</div>
</template>
<script>
import { NitrozenPagination } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-pagination": NitrozenPagination,
},
data: function () {
return {
pagination: {
total: 0,
current: 1,
limit: 10
}
};
},
methods: {
paginationChange(filter) {
const { current } = filter;
this.pagination.current = current;
this.pagination = Object.assign({}, this.pagination, filter);
},
},
};
</script>
Nitrozen Radio
name: 'nitrozen-radio'
props:
disabled: Boolean
radioValue: String or Number
name: String
value: v-model
Code Snippet
<template>
<div>
<nitrozen-radio
name="radio"
v-model="radioSelection"
radioValue="One"
>
One
</nitrozen-radio>
<nitrozen-radio
name="radio"
v-model="radioSelection"
radioValue="Two"
>
Two
</nitrozen-radio>
<nitrozen-radio
name="radio"
v-model="radioSelection"
radioValue="Three"
>
Three
</nitrozen-radio>
</div>
</template>
<script>
import { NitrozenRadio } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-radio": NitrozenRadio,
},
data: function () {
return {
radioSelection: "One",
}
}
};
</script>
Nitrozen Stepper
name: 'nitrozen-stepper'
props:
activeIndex: Number
maxActiveIndex: Number
elements: Array
Nitrozen Toggle Button
name: 'nitrozen-toggle-btn'
props:
v-model: Boolean
Code Snippet
<template>
<div>
<nitrozen-toggle-btn
v-model="toogleStatus"
@change="togChange"
></nitrozen-toggle-btn>
</div>
</template>
<script>
import { NitrozenToggleBtn } from "@gofynd/nitrozen-vue";
export default {
components: {
'nitrozen-toggle-btn': NitrozenToggleBtn,
},
data: function () {
return {
toogleStatus: false
};
},
methods: {
togChange(event){
console.log(event);
}
}
};
</script>
Nitrozen Tooltip
name: 'nitrozen-tooltip`
props:
position:
1. bottom
2. top
3. right
4. left
tooltipText: String
Code Snippet
<template>
<div>
<nitrozen-tooltip
tooltipText="Hi! This is tooltip text."
position = "right"
></nitrozen-tooltip>
</div>
</template>
<script>
import { NitrozenTooltip } from "@gofynd/nitrozen-vue";
export default {
components: {
"nitrozen-tooltip": NitrozenTooltip,
}
};
</script>