Rocket-te-ui
It is a wrapper, and it has ability to update your ui library.
We use the carbon10 and angular10 in this project.
For your project, it should install carbon-component-angular, carbon-component, carbon-icon.
This project was generated with
Angular CLI version 9.1.3.
How to use to NPM
ng build rocket-ui-lib
chang
version in package.json
npm publish
Go to bzshared/webmart
npm install
Development server
Run
ng serve for a dev server. Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run
ng generate component component-name to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
Build
Run
ng build to build the project. The build artifacts will be stored in the
dist/ directory. Use the
--prod flag for a production build.
Running unit tests
Run
ng test to execute the unit tests via
Karma.
Running end-to-end tests
Run
ng e2e to execute the end-to-end tests via
Protractor.
Further help
To get more help on the Angular CLI use
ng help or go check out the
Angular CLI README.
About scss folder
Used for
rocket-ui, should import
scss/styles.scss in project.
Components
1. rocket-tooltip
normal mode:
options:
{placement, alignment, content, template, trigger}
placement:
"bottom", "top"
alignment:
"start", "center", "end"
template Mode
template:
show costomer defined ng-template in tooltip
trigger:
'click', 'hover'
placement:
"bottom", "top"
2. rocket-select
[tooltip] ="{show, content, template}"
[selected]="selectNode" (onChange)="change($event)">
options:
{
size
: sm, md, xl,
marked, // required or not
label,
display, // 'inline', 'default'
selected, // secondary way to bind ngModel
data: [{
value, text/label
}]
group mode:
isGroup: true,
data: [{
text,
children: [{text, value}]
}]
}
id
selected:
primary way to bind ngModel
tooltip:
view rocket-tooltip
onChange(e):
emit e
how to set selected in parent component:
change($event) {
this.selectNode = $event.target.value;
}
3. rocket-text
options:
{
label,
marked, // required or not
placeholder,
disabled,
isInvalid,
validationText,
data
}
tooltip: {
show,
content
}
id
onChange():
emit $event
4. rocket-text-area
options:
{
label,
marked, // required or not
placeholder,
disabled,
isInvalid,
validationText,
data, //ngModel
rows,
cols
}
tooltip: {
show,
content
}
id
change():
emit $event
5. rocket-table
options:
{
showPagination,
showBtn: {add, import, export, search},
showSelectionColumn,
pageLength: default 15,
itemsPerPageOptions: default [15, 20, 30, 40, 50],
totalDataLength,
currentPage
}
id
data:
{headers, rows}
selectAction():
emit {data, type} //select event in overflow and button // edit, reset-pwd, delete, add, upload ...
selectList():
select row by checkbox of each row.
6. rocket-radio
id='radio'
[options]="{data, lable, disabled, orientation, selectedIndex}"
[tooltip] ="{show, content, template}"
(onSelect)="select($event)" #radio>
options:
{
data: [{value, label/text}],
label,
marked, // required or not
disabled,
orientation: 'vertical', 'horizontal',
selectedIndex: For ngModel, selected index which is used for compatible with carbon 9
}
id
onSelect:
select event, emit select item in data.
tooltip:
view rocket-tooltip
update check status:
this.radio.update(newData) ;
7. rocket-notificate
options:
{
type error, success, warning, info,
title,
message,
showClose
}
id
close():
emit close event.
8. rocket-modal
Template which will show in modal center
options:
{
show,
modalType: {'default', 'danger'}
header,
title,
waitCallback, //show result in dialog, such as: ldap test
keepOpen, // keep open if click other place, such as: reset password
hideFooter,
hideClose,
confirmBtnOpts: {text, disabled},
cancelBtnOpts: {kind, text, hide},
size: 'xl' // administrator multi select
}
id
submit() submit event
close() submit event
9. rocket-checkbox
{{"sessions.keepAlive.enableKeepAlive" | translate}}
options:
{
disabled,
checked: true/false,
label: secondary way for text
}
onChange():
selected event
{{label}}:
primary way for text
tooltip:
view rocket-tooltip
id
10. rocket-button
opions
{
kind: "primary", "secondary", "tertiary", "ghost", "danger", "danger--primary",
size: "normal", "sm", "field",
disabled,
text
}
id
onClick():
emit click event
11. rocket-progress-indicator
[options]="{steps: steps, current: current}">
opions
{
steps: [
{
text,
state: ['current', 'complete', 'incomplete', 'error]
}],
current
}
id
12. rocket-accordion
options:
{
title
}
expanded
id
13. rocket-accordion-item
options: {title, expanded}
id
## 14. rocket-toggle
options:
{
disabled,
enable,
size: {"md", "sm"},
label
}
tooltip
onChange():
emit array
id
## 14. rocket-search
options: {
placeholder,
size: ["sm", "md", "xl"]
label
}
onChange():
emit change event
clear():
emit clear event
id
15. rocket-icon
type:
'view'
'view-off'
'information'
'checkmark-filled'
'chevron-up'
'chevron-down'
'chevron-left'
'chevron-right'
'arrow-left'
'arrow-right'
'home'
'settings'
'user'
'data-structured'<'session'>,
'data-1'<'group'>
'checkmark'
'radio-button'
'collaborate'<'login'>
'play-outline'
'close'
'upload'
'delete'
'unlocked'
'download'
'folder'
'folder-add'
'add'
'subtract-alt'
'document-export'
'renew'
'terminal'
'edit'
'undo'
'y-axis'
'caret-up'
'caret-down'
'settings-adjust'
'visual-recognition
'warning-filled'
'warning'
'document'
'copy-link'
options
{
size: 16, 20, 14, 32
color,
color, stroke, strokeWidth,
isCenter: for 16 size vertical
isImg: use other type as icon not svg
src, width, height
}
16. rocket-loading
id rule: component-feature-type
group-session-btn
group-privilege-select
console.warn(if id is null)