@candiman/website
This module hold a lot of helper library which can build a website in
If you want to use all the services available, you need to import this module as forRoot as below
CoreModule.forRoot(),
Dependencies
Below are the dependencies the core module depends on.
@angular/elements
@fortawesome/angular-fontawesome
@fortawesome/fontawesome-svg-core
@fortawesome/free-brands-svg-icons
@fortawesome/free-solid-svg-icons
bootstrap
@ng-bootstrap/ng-bootstrap
Other dependencies
Install below dependencies for style and icons to see the design. We use bootstop for style and fontawesone icons to show beautiful icons.
Header
To make a website header, you need to foolow below steps
<cfs-header
[middleButton]="middleButton"
[header]="header"
(middleButtonClick)="openLocationChangeModel($event)">
</cfs-header>
Add a header object to your app component with header configuration.
this.header = {
brand: {
label: 'xxxxx',
url: '/',
logo: {
imageInAsset: 'xxxx.png',
style: {
width: '30px',
height: '30px'
}
},
style: {
'color': '#ffe90f',
'text-decoration': 'none'
}
},
links: {
rightLinks: [
{label: 'Profile', url: '/profile', display: true},
],
leftLinks: null,
style: {
'background-color': '#367aec',
'color': '#ec8559',
'text-decoration': 'none',
'a:link': {
'color': '#3eff77'
},
'a:visited': {
'color': '#ff9d19'
},
'a:hover': {
'color': '#fe4d0e'
},
'a:active': {
'color': '#ec7a39'
}
}
},
middleButton: {
display: true,
label: 'Trying to get location from device...',
loading: true,
style: {
'background-color': '#ec9a0a',
'color': '#ec0b26'
}
},
style: {
'background-color': '#367aec'
}
};
Footer
Same way you can make your website footer in just few configuration change.
<cfs-footer
[footer]="footer">
</cfs-footer>
the configuration of the footer need to be in the app.component.ts
this.footer = {
displayTopSection: true,
social: {
facebook: 'http://www.facebook.com',
googlePlus: 'http://www.plus.google.com',
twitter: 'http://www.twitter.com',
linkedIn: 'http://www.linkedin.com',
},
copyright: {
year: 2018,
label: 'company team',
url: 'https://www.somesite.com'
},
contact: {
name: 'Xxxxxxx Xxx',
email: 'xxxxxxx@gmail.com',
phone: '+1 xxx xxx xxxx',
fax: '+x xxx xxx xxxx'
},
message: {
heading: 'Business tag line',
desc: 'description of the tag line'
},
columnOneLinks: [
{label: 'login', url: '/login'},
{label: 'Privacy', url: '/privacy'}
],
columnTwoLinks: [
{label: 'profile', url: '/profile'}
],
style: {
'background-color': '#7a690b',
'color': '#f99d00',
'a:link': {
'color': '#ffc11a'
},
'a:visited': {
'color': '#16d3ff'
},
'a:hover': {
'color': '#fbfe11'
},
'a:active': {
'color': '#d0eccb'
}
}
};