assure-ui v0.1.74
Assure - UI Library
This is a UI library specific to conform to Assure Services User Interface standards
How to implement new artifacts into the Library
- Any new artifacts can be tested with
npm run build_lib
2.In order to push to npm, run
npm run package
then
npm run npm-deploy
*Warning, the version should be updated in the package.json
Component Libary
Navigation Panel
import {NavigationPanelModule} from 'assure-ui'
imports:[NavigationPanelModule]
exports:[NavigationPanelModule]
<assure-navigation-panel [routes]='links'></assure-navigation-panel>
A Left Justified Navigation panel.
Window-Card
import {WindowCardModule} from 'assure-ui'
imports:[WindowCardModule]
exports:[WindowCardModule]
<assure-window-card><assure-window-card>
A large card that will be the wrapper for each page.
Deal Card
import {DealCardModule} from 'assure-ui'
imports:[DealCardModule]
exports:[DealCardModule]
<assure-deal-card [name]="'Deal One'" [estimatedCloseDate]= "'09/23/1993'" [funded]= 2000 [targetAmount]=4000 [invites]=2 [comitted]=3 [completed]=2 [status]="'cl'">
</assure-deal-card>
An Card used for showing Deal Only Information
-@Input() name: String = 'Deal Name';
- Input for Deal Name
-@Input() estimatedCloseDate: String = 'Closing Date';
- Input for estimatedCloseDate
-@Input() funded: Number = 0;
- Input for funded amount
-@Input() targetAmount: Number = 0;
- Input for target Amount
-@Input() invites: Number = 0;
- Input for invites
-@Input() comitted: Number = 0;
- Input for comitted
-@Input() completed: Number = 0;
- Input for completed
-@Input() status: String = 'Deal Status';
- Input for status
Investment Card
import {InvestmentCardModule} from 'assure-ui'
imports:[InvestmentCardModule]
exports:[InvestmentCardModule]
<assure-investment-card>
</assure-investment-card>
An Card used for showing Investment Only Information
- @Input() readyToSign: Boolean = false;
- Boolean to pass in when you want the Sign Text to show up on the card
- @Input() isDocumentSigned: Boolean = false;
- Boolean to pass in when you want to show a signed text to show up on the card
- @Input() signing_URL: String = '';
- String to pass in signing base url path
- @Input() investment_id: String = '';
- string to pass in investment id to generate proper information
- @Output() RouteLink: EventEmitter = new EventEmitter();
- Listener that returns back correct URL to redirect to from event click
Inner-Card
import {InnerCardModule} from 'assure-ui'
imports:[InnerCardModule]
exports:[InnerCardModule]
<assure-inner-card>
<div style="display: flex; flex-direction: column;">
<div>
hai
</div>
<div>
test
</div>
</div>
</assure-inner-card>
A large card that will be the wrapper for each page.
Info-Display
import {InfoDisplayModule} from 'assure-ui'
imports:[InfoDisplayModule]
exports:[InfoDisplayModule]
<assure-info-display [role]="'danger'" [showCancel]="true">
<info-display-title>This is a test!</info-display-title>
This is the content of the test. :)
</assure-info-display>
An Item for infomation display, more specifically, Alerts, Notices, etc.
Search-Bar
import {SearchBarModule} from 'assure-ui'
imports:[SearchBarModule]
exports:[SearchBarModule]
<assure-search-bar [phrase]='"Sch"'></assure-search-bar>
A rounded search bar that has a input variable as 'phrase' to define the Placeholder in the searchbar
These CSS Varibles are required to show the search-bar correctly 1. --app-accent-buttons 2. --app-font-regular
Coming Soon
- Progess Bar
- Notification Item
- Large Card Single Line Information
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago