Estilos en Angular: Alcance y Maquetación de Componentes

En esta entrada podrás practicar con el componente header para tu aplicación.

Componente ""header""

Anímate a crear una barra de navegación sencilla. Para generar un componente, recuerda utilizar el comando ng g c <componente-name> del CLI de Angular.

Paso 1: Escribe el código HTML de tu template <header>.

<!-- components/nav-bar/nav-bar.component.html -->
<header class=""header"">
    <a href=""#"" class=""logo"">CompanyLogo</a>
    <div class=""header-right"">
        <a href=""#"">Home</a>
        <a class=""active"" href=""#"">Catalogo</a>
        <a href=""#"">About</a>
    </div>
</header>

Paso 2: Agrega el CSS correspondiente en la hoja de estilos del componente.

/* components/nav-bar/nav-bar.component.scss */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
  a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    border-radius: 4px;
    &.logo {
      font-size: 25px;
      font-weight: bold;
    }
  }
  a:hover {
    background-color: #ddd;
    color: black;
  }
  a.active {
    background-color: dodgerblue;
    color: white;
  }
  .header-right {
    float: right;
  }
}

/* Header Mobile */
@media screen and (max-width: 512px) {
  .header {
    a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
  }
}

Paso 3: Para tener tu header responsive, has uso de Media Queries para lograr que la aplicación se adapte a cualquier tamaño de pantalla.

{height="""" width=""""}

Siempre tienes que desarrollar tus aplicaciones front-end de manera tal que se vea correctamente en cualquier dispositivo. Apóyate de las herramientas que los navegadores poseen para validar tu aplicación.

Ver código fuente del proyecto

---

Contribución creada con los aportes de Kevin Fiorentino.