RouterLink y RouterLinkActive

TheJonaCode · Sep 24, 2020 · 107c2ef · 107c2ef
1 parent a89f7be
commit 107c2ef
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 19 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <app-navbar></app-navbar>
 
-<div class="container">
+<div class="container main-container">
 
     <router-outlet></router-outlet>
 

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
@@ -1,10 +1,13 @@
 
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './components/home/home.component';
-
+import { HeroesComponent } from './components/heroes/heroes.component';
+import { AboutComponent } from './components/about/about.component';
 
 const APP_ROUTES: Routes = [
     { path: 'home', component: HomeComponent },
+    { path: 'about', component: AboutComponent },
+    { path: 'heroes', component: HeroesComponent },
     { path: '**', pathMatch: 'full', redirectTo: 'home' }
 ];
 

diff --git a/src/app/components/about/about.component.html b/src/app/components/about/about.component.html
@@ -1 +1,7 @@
-<p>about works!</p>
+<h1 class="animated fadeIn fast">Sobre Comic App</h1>
+<hr>
+<p class="animated fadeIn">
+
+    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste odio nulla quaerat accusamus soluta numquam exercitationem placeat earum at quia sapiente, pariatur, accusantium molestias delectus voluptatem! Voluptates ducimus consectetur sapiente!
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum quae nihil dolores, incidunt omnis aperiam. Ullam eveniet dolorem architecto consequatur, impedit odit dolor est incidunt reiciendis accusantium dolorum, ad adipisci.
+</p>
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="jumbotron jumbotron-fluid">
+<div class="jumbotron jumbotron-fluid animated fadeIn fast">
 
     <div class="container">
       <h1 class="display-4">Comic App</h1>

diff --git a/src/app/components/shared/navbar/navbar.component.html b/src/app/components/shared/navbar/navbar.component.html
@@ -10,22 +10,15 @@
 
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav mr-auto">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">Home</a>
+        <!-- active es para el relieve--> 
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['home']">Home</a>
         </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link</a>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['heroes']">Heroes</a>
         </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="#">Something else here</a>
-          </div>
+        <li class="nav-item" routerLinkActive="active">
+          <a class="nav-link" [routerLink]="['about']">About</a>
         </li>
       </ul>
       <form class="form-inline my-2 my-lg-0">

diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,35 @@
-/* You can add global styles to this file, and also import other style files */
+.main-container{
+    margin-top: 20px;
+}
+
+
+
+
+ /* ANIMACIONES */
+ .animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  .fast {
+    -webkit-animation-duration: 0.4s;
+    animation-duration: 0.4s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .fadeIn {
+    animation-name: fadeIn;
+  }