DEV Community

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

Posted on • Edited on

3 2

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
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

📖 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
Enter fullscreen mode Exit fullscreen mode

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

import { LayoutWebModule } from '@kikstart-ui/layout-web'
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

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

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

import { UiBrand} from '@kikstart-ui/ui-brand';
Enter fullscreen mode Exit fullscreen mode

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',
  };
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay