DEV Community

loading...
Cover image for Tutorial 2: Instalación de Kikstart UI
kikstart.dev

Tutorial 2: Instalación de Kikstart UI

derlys profile image Derlys Updated on ・2 min read

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í.

Discussion

pic
Editor guide