0.1.33 • Published 1 year ago
empower-container v0.1.33
Getting Started with Empower Container
- Menubar
- Modal
1) Menubar
Implementation
import { MenuBar } from 'empower-container';
Options
config: {
title: 'Test Title',
icon: SVG_REQUEST,
showInfo: true,
iconType: ['check', "back", 'standard']
}
mainButton: {
show: true,
label: 'File a Request',
icon: SVG_ADD,
actions: [
{
label: "File Leave",
action: "leave", // string optional
icon: SVG_SUBMIT
},
{
label: "File Overtime",
action: "overtime", // string optional
icon: SVG_SUBMIT
},
{
label: "File Toil",
action: "toil", // string optional
icon: SVG_SUBMIT
},
{
label: "File Amendment",
action: "amendment", // string optional
icon: SVG_SUBMIT
}
]
}
button {
show: true
actions: [{
class: 'button',
label: "Submit",
action: "readytosubmit", // string optional
icon: SVG_SUBMIT
}]
}
buttonFooter: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "footer-submit", // string optional
icon: SVG_SUBMIT,
show: true
}]
}
pagination: {
show: true,
hideSummary: false,
counter: 10,
perPage: 10,
page: 1,
total: 35,
}
pivot: {
show: true,
selected: 'all',
actions: [
{
label: "All",
value: "all", // string optional
},
{
label: "Pending",
value: "pending", // string optional
},
{
label: "Approved",
value: "approved", // string optional
},
{
label: "Rejected",
value: "rejected", // string optional
},
{
label: "Cancelled",
value: "cancelled", // string optional
},
]
}
dropdown: {
show: true,
title: 'File Test',
type: 'date-picker-monthly',
selection: {
startDate: "Feb 2021",
endDate: "Feb 2021",
},
}
search: {
show: true,
value: ''
}
undoButton: {
show: false,
isFooter: true,
actions: [
{
class: 'button disabled',
show: true,
label: "Submit",
action: "submit",
icon: SVG_SUBMIT,
timer: 3,
disabled: true
},
{
show: true,
label: "Undo Request",
action: "undo-request",
icon: SVG_UNDO
},
]
}
check: {
disabled: false,
selected: 0,
total: 1
}
info: 'Sample Information'
Usage
<MenuBar
config={menubar.config}
mainButton={menubar.mainButton}
button={menubar.button}
pagination={menubar.pagination}
pivot={menubar.pivot}
dropdown={menubar.dropdown}
search={menubar.search}
undoButton={menubar.undoButton}
buttonFooter={menubar.buttonFooter}
check={menubar.check}
info={menubar.info}
getActions={(action, data) => getActions(action, data)}
>
<h2>CHILDREN DATA</h2>
</MenuBar>
2) Modal
Implementation
import { Modal } from 'empower-container';
Options
show: false,
hideMenuBar: false, //optional
config: {
title: 'Test Title',
icon: SVG_REQUEST,
showInfo: true,
iconType: ['standard', 'close'],
modalSize: 'lg'
}
mainButton: {
show: true,
label: 'File a Request',
icon: SVG_ADD,
actions: [
{
label: "File Leave",
action: "leave", // string optional
icon: SVG_SUBMIT
},
{
label: "File Overtime",
action: "overtime", // string optional
icon: SVG_SUBMIT
},
{
label: "File Toil",
action: "toil", // string optional
icon: SVG_SUBMIT
},
{
label: "File Amendment",
action: "amendment", // string optional
icon: SVG_SUBMIT
}
]
}
button {
show: true
actions: [{
class: 'button',
label: "Submit",
action: "readytosubmit", // string optional
icon: SVG_SUBMIT
}]
}
buttonFooter: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "footer-submit", // string optional
icon: SVG_SUBMIT,
show: true
}]
},
pagination: {
show: true,
hideSummary: false,
counter: 10,
perPage: 10,
page: 1,
total: 35,
}
pivot: {
show: true,
selected: 'all',
actions: [
{
label: "All",
value: "all", // string optional
},
{
label: "Pending",
value: "pending", // string optional
},
{
label: "Approved",
value: "approved", // string optional
},
{
label: "Rejected",
value: "rejected", // string optional
},
{
label: "Cancelled",
value: "cancelled", // string optional
},
]
}
dropdown: {
show: true,
title: 'File Test',
type: 'date-picker-monthly',
selection: {
startDate: "Feb 2021",
endDate: "Feb 2021",
},
}
search: {
show: true,
value: ''
}
undoButton: {
show: false,
isFooter: true,
actions: [
{
class: 'button disabled',
show: true,
label: "Submit",
action: "submit", // string optional
icon: SVG_SUBMIT,
timer: 3,
disabled: true
},
{
show: true,
label: "Undo Request",
action: "undo-request", // string optional
icon: SVG_UNDO
},
]
}
check: {
disabled: false,
selected: 0,
total: 1
}
info: 'Sample Information'
Usage
<Modal
config={menubar.config}
mainButton={menubar.mainButton}
button={menubar.button}
pagination={menubar.pagination}
pivot={menubar.pivot}
dropdown={menubar.dropdown}
search={menubar.search}
undoButton={menubar.undoButton}
buttonFooter={menubar.buttonFooter}
check={menubar.check}
info={menubar.info}
getActions={(action, data) => getActions(action, data)}
>
<h2>CHILDREN DATA</h2>
</Modal>
Changelog
- 0.1.24 - Fix close icon not appearing in info menubar
- 0.1.22 - Added close icon on info menubar
- 0.1.21 - Added mainbutton on modal
- 0.1.18 - Fixed dynamic root issues
- 0.1.17 - Fixed main button with single item issues
0.1.31
1 year ago
0.1.32
1 year ago
0.1.33
1 year ago
0.1.30
2 years ago
0.1.27
2 years ago
0.1.28
2 years ago
0.1.29
2 years ago
0.1.25
2 years ago
0.1.26
2 years ago
0.1.13
2 years ago
0.1.14
2 years ago
0.1.15
2 years ago
0.1.20
2 years ago
0.1.21
2 years ago
0.1.22
2 years ago
0.1.23
2 years ago
0.1.24
2 years ago
0.1.16
2 years ago
0.1.17
2 years ago
0.1.18
2 years ago
0.1.12
2 years ago
0.1.11
2 years ago
0.1.10
2 years ago
0.1.9
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago