@postnord/widget-solution-module
v1.0.12
Published
Widget solution common components and helper functions
Downloads
53
Maintainers
Keywords
Readme
Widget Solution Module
Common components and helper functions for web solution widgets
Install
npm i @postnord/widget-solution-module
Whats included ?
import { PnHeader, PnFooter, PnHero } from "@postnord/widget-solution-module";
Header
<PnHeader :image="image" :heading="heading" :subHeading="subHeading" :description="description" />
Footer
<PnFooter :links="links" :content="content" :lang="lang" :languages="['en', 'sv']" v-on:changeLanguage="onChangeLanguage" />
Hero
<PnHero heading="My Pickups" />
Content sample value
{
"footer": {
"support": "Support",
"learnMore": "Learn More",
"moreFromPostnord": "More from Postnord",
"getInTouch": "Get in touch via email",
"giveACall": "Give us a call",
"about": "About pickup",
"copyright": "Copyright"
},
"label": {
"login": "Login"
}
}
Lang
- en
- sv
- da
- fi
- no
Dependencies
- @postnord/web-components@latest
- pn-design-assets@latest
Vite
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "./node_modules/pn-design-assets/pn-assets/styles/_pn-colors.scss";
`,
},
},
},
resolve: {
extensions: [".js", ".json", ".vue"],
},
Import styles
Option 1 in main.js
import "@postnord/widget-solution-module/styles.scss";
Option 2 in Vue2
import widgetSolutiomModuleCss from "@postnord/widget-solution-module/styles.scss?inline";
export default {
styles: [widgetSolutiomModuleCss],
name: "App",
};