govco-collection-webcomponents

Gov.Co web components

Este es un proyecto Stencil que contiene los componentes de Header, Footer y Barra de accesibilidad desarrollados para Gov.Co.

Empezando

Para compilar el proyecto de webcomponents, debe clonar el repositorio de los servidores autorizados.

Ejemplo:

git clone https://github.com/ionic-team/stencil-component-starter.git govco-components
cd govco-components
git remote rm origin

y ejecutar:

npm install
npm start

Para compilar el proyecto y subirlo a productivo:

npm run build

Llamados del componente - HEADER

Para incluir el componente de header

<govco-header></govco-header>

Tiene los parámetros de entrada

   @Prop() menuoptions: string;
   @Prop() ishome: boolean;
   @Event() translate: EventEmitter;

menuoptions

JSON - Listado de objetos con la estructura:

• name: Nombre del item menú
• url: Ruta de redireccionamiento
• isMobile: Valor boolean para identificar si el item se requiere en el menú responsive

ishome

Parámetro para identificar si es implementado en HOME o en otro enlace.

translate

Parámetro que recibe una función JavaScript que se ejecutara al oprimir lo botones de cambio de lenguaje.

Llamados del componente - FOOTER

Para incluir el componente de footer

<govco-footer></govco-footer>

Llamados del componente - BARRA DE ACCESIBILIDAD

Para incluir el componente

<govco-accesibility-bar></govco-accesibility-bar>

Usando el componente

Script tag

• Publish to NPM
• Put a script tag similar to this <script src='https://unpkg.com/co-govco-header@0.0.1/dist/govco-collection-webcomponents.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install govco-collection-webcomponents --save
• Put a script tag similar to this <script src='node_modules/govco-collection-webcomponents/dist/govco-collection-webcomponents.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install govco-collection-webcomponents --save
• Add an import to the npm packages import govco-collection-webcomponents;
• Then you can use the element anywhere in your template, JSX, html etc