Estilos en Angular: Alcance y Maquetación de Componentes

Clase 9 de 20 • Curso de Angular: Componentes y Servicios

Resumen

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 del CLI de Angular.

Paso 1: Escribe el código HTML de tu template


<header class="header">
    <a href="#" class="logo">CompanyLogoa>
    <div class="header-right">
        <a href="#">Homea>
        <a class="active" href="#">Catalogoa>
        <a href="#">Abouta>
    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.

componente header.png {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.