Name: budgetkey-ng2-components
Owner: ?????? ?? ??????
Description: null
Created: 2016-12-26 19:55:41.0
Updated: 2018-05-20 16:33:03.0
Pushed: 2018-05-20 16:33:09.0
Homepage: null
Size: 675
Language: TypeScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This library contains a set of Angular 2 components and assets for building all OpenBudget applications with a common look and feel.
Install library with npm install --save budgetkey-n2-components
.
TypeScript and Less sources are available in src
folder, precompiled sources
and stylesheets are in lib
folder. All necessary assets (images, fonts, etc.)
are available in assets
folder.
Include all stylesheets from lib/styles
into your HTML page (preferred)
or add them as styleUrls
to your component. Also, do not forget to put
assets
folder in some place accessible with browser (actual place depends on
location of stylesheets).
If you want to customize stylesheets, or use predefined variables, you can find
the Less sources in the sources/styles
folder. Just @import
files that you
need and do everything you want with it.
In your application, import and provide library's module:
rt { BudgetKeyCommonModule } from 'budgetkey-ng2-components';
odule({
ports: [
BudgetKeyCommonModule,
// other imports
other declarations
s AppModule {
Then wrap all your application with <budgetkey-container>
:
ponent({
.
mplate: `
<budgetkey-container>
Hello, World!
</budgetkey-container>
.
s AppComponent {
The <budgetkey-container>
component also has two optional parameters:
showHeader
(defaults to True
) - show/hide default header, andshowFooter
(defaults to True
) - show/hide default footer.Example:
getkey-container [showHeader]="false" [showFooter]="false">
ur template here
dgetkey-container>
If you have an issue using this library and don't know how to solve it - let us know, and we will try to help you.
If you want to help us to improve the library, fix the bug or add new features - you are welcome! To implement the conceived, follow this simple instruction:
git clone git@github.com:OpenBudget/budgetkey-ng2-components.git
or
git clone https://github.com/OpenBudget/budgetkey-ng2-components.git
(you may need to fork it first).npm start
to run local server - this will allow you to test your changes easily
without necessity to create a project for testing (you are free to edit files in
the app
folder if needed).
By default, dev server is running on the port :4000
, but you can change it using
environment variable: PORT=8080 npm start
will start dev server on the port :8080
.If you want to test your changes with some external project, run the following from a budgetkey-ng2-components directory you want to integrate:
npm run install-into <path_to_another_project>
This will install the current code into the other project.
Pay attention that if you make changes to budgetkey-ng2-components you should run the above code again.
The components support themes to allow reusability.
The default theme is defined in src/BudgetKeyCommonModule.ts
The demo app contains another optional theme, to use it, run:
BUDGETKEY_THEME=OpenProcurement npm start
This will launch the example app with OpenProcurement theme defined in app/app.module.ts