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 © 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í.
Top comments (0)