Tutorial 2: Instalación de Kikstart UI

En este tutorial aprenderemos que Kikstart UI contiene dependencias que podemos utilizar para construir nuestra app.

Requisitos

• Haber realizado el tutorial 1, donde instalamos Angular CLI y creamos una app.

Paso # 1

En este paso instalamos los temas de Kikstart UI. Los temas son una versión personalizada de bootswatch y estos mismos son temas de bootstrap.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/themes

2: Actualiza los estilos de scss, en tu editor busca la ruta
src/styles.scss y agrega lo siguiente:

@import "~@kikstart-ui/themes/scss/dark";

📖 kikstartpedia

En Kikstart UI puedes experimentar con los diferentes styles de layout. Cambia la palabra dark en el @import por pirate o light y mira como se ve 😉.

Paso # 2

En este paso instala el layout-web y utilízalo en tu AppComponent.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/layout-web

2: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { LayoutWebModule } from '@kikstart-ui/layout-web'

3: Luego agrega LayoutWebModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4: En tu editor busca la ruta src/app/app.component.html y cambia el contenido con:

<web-layout>
  <header> header </header>
  <router-outlet></router-outlet>
  <footer class="text-center text-muted py-3">
    Copyright &copy; 2020
  </footer>
</web-layout>

Paso # 3

En este paso agrega la navegación principal a tu app. Usa el UiNavbarModule y configura el brand.

1: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { UiNavbarModule} from '@kikstart-ui/ui-navbar';

2: Luego agrega UiNavbarModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule,
    UiNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3: Busca la ruta src/app/app.component.ts y agrega lo siguiente en la parte superior:

import { UiBrand} from '@kikstart-ui/ui-brand';

4: Luego en el mismo archivo define una propiedad brand con el tipo UiBrand.

 export class AppComponent {
  title = 'site';
  brand: UiBrand = {
    name: 'Site',
    logo: 'https://github.com/kikstart-ui.png',
  };
}

5: En tu editor busca la ruta src/app/app.component.html y cambia el header a:

<header>
  <ui-navbar navbarStyle="dark" [brand]="brand"></ui-navbar>
</header>

Resumen

Para resumir en este tutorial hemos instalado Kikstart UI y sus dependencias, creamos un layout que queda listo para empezar el siguiente tutorial en donde configuraremos nuestras rutas.

El repositorio con este paso lo puedes encontrar aquí.