No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componentes y Header

9/20
Recursos

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.

Aportes 14

Preguntas 9

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

CSS:

.show-mobile {
  display: block;
  box-shadow: 0px 2px 5px rgb(black, .2);
  > div {
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    button {
      border: 0;
      background: transparent;
    }
  }
}
.hide-mobile {
  display: none;
  box-shadow: 0px 2px 5px rgb(black, .2);
  > div {
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    margin-right: 1em;
  }
  nav {
    display: flex;
    align-items: center;
    ul {
      display: flex;
      list-style: none;
      a {
        margin: 0 .2em;
        color: inherit;
        text-decoration: none;
      }
    }
  }
  .info {
    display: flex;
    align-items: center;
    .account {
      margin-right: .5em;
    }
  }
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  .show-mobile {
    display: none;
  }
  .hide-mobile {
    display: block;
  }
}

/* Large and up */
@media screen and (min-width: 64em) {
  .show-mobile {
    display: none;
  }
  .hide-mobile {
    display: block;
  }
}

HTML:

<div class="show-mobile">
  <div>
    <button>
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">[email protected]</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

Dejo el maquetado del nav

<div class="show-mobile">
  <div>
    <button>
      <img src="./assets/svg/icon_menu.svg" alt="menu">
    </button>
    <a href="">
      <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
    </a>
    <a href="">
      <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
    </a>
  </div>
</div>
<div class="hide-mobile">
  <div>
    <nav>
      <a class="logo" href="">
        <img src="./assets/svg/logo_yard_sale.svg" alt="logo">
      </a>
      <ul>
        <li><a href="">All</a></li>
        <li><a href="">Clothes</a></li>
        <li><a href="">Electronics</a></li>
      </ul>
    </nav>
    <div class="info">
      <div class="account">[email protected]</div>
      <div>
        <a href="">
          <img src="./assets/svg/icon_shopping_cart.svg" alt="logo">
        </a>
      </div>
    </div>
  </div>
</div>

En el siguiente enlace pueden descargar las imágenes SVG del proyecto.

Dejo el css puro por si alguien no está utilizando scss como yo

.show-mobile{
    display: block;
    box-shadow: 0px 2px 5px rgb(black, .2);
}

.show-mobile > div{
    padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.show-mobile > div img{
    border: 0;
    background: transparent;
}

.hide-mobile{
    display: none;
    box-shadow: 0px 2px 5px rgb(black, .2);
}

.hide-mobile > div{
    padding: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hide-mobile .logo{
    margin-right: 1em;
}

.hide-mobile nav{
    display: flex;
    align-items: center;
}

.hide-mobile nav ul{
    display: flex;
    list-style: none;
}

.hide-mobile nav ul a{
    margin: 0 .2em;
    color: inherit;
    text-decoration: none;
}

.hide-mobile .info{
    display: flex;
    align-items: center;
}

.hide-mobile .info .account{
    margin-right: .5em;
}  
  
  /* Medium only */
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .show-mobile {
      display: none;
    }
    .hide-mobile {
      display: block;
    }
  }
  
  /* Large and up */
  @media screen and (min-width: 64em) {
    .show-mobile {
      display: none;
    }
    .hide-mobile {
      display: block;
    }
  }

Esta clase la verdad fue como " Esto es Facebook, esta es la parte responsiva de Facebook " y ya saben todo, que mal, venía muy ilusionado.

Veo muchas quejas en este curso, asi que solo le queda al creador y a Platzi mejorarlo eventualmente. Sin embargo, quiero dejar aquí un comentario de agradecimiento y de aliento a Nicolas y a todo el equipo de Platzi que se esforzó en la realización de este material. Esta claro que ensenar no es nada fácil, y debemos procurar que esta profesión sea respetada y debidamente valorada y remunerada

Me estaban fallando algunos estilos para la parte de mobile, organicé el archivo scss añadiendo algunas caracteristicas. Dejo el aporte.

 .show-mobile {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-shadow: 0px 2px 5px rgb(black, .2);

    div {
      padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      button {
        border: 0;
        background: transparent;
      }
    }

    a{
        margin-top: 15px;
        margin-right: 15px;
    }

  }

😁 Me encanta todo lo que aprendo de programaciónn.

Debería existir un "curso todo incluido". Es cansado, sobre todo para quienes empiezan, el hecho de saltar curso en curso.

Si a alguien le interesa generar estilos globales (es util en casos concretos), solo se debe añadir en el angular.json la ruta al archivo con dichos estilos. El archivo quedará mas o menos así:

...
"test": {
...
  "options": {
    ...
    "styles": [
      "src/styles.css"
    ],
    ...
  }
},
...

Como sería si se le pide una maquetación a alguna de las IA?

CSS

.show-mobile {
display: block;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.show-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.show-mobile > div button {
border: 0;
background: transparent;
}
.hide-mobile {
display: none;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
.hide-mobile > div {
padding: 1em;
display: flex;
justify-content: space-between;
align-items: center;
}
.hide-mobile .logo {
margin-right: 1em;
}
.hide-mobile nav {
display: flex;
align-items: center;
}
.hide-mobile nav ul {
display: flex;
list-style: none;
}
.hide-mobile nav ul a {
margin: 0 0.2em;
color: inherit;
text-decoration: none;
}
.hide-mobile .info {
display: flex;
align-items: center;
}
.hide-mobile .info .account {
margin-right: 0.5em;
}
/* Medium only /
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}
/
Large and up */
@media screen and (min-width: 64em) {
.show-mobile {
display: none;
}
.hide-mobile {
display: block;
}
}

Por si a alguien le sirve les dejo el Sass con un solo meida query y ordenado

  .show-mobile{
    display: block;
    box-shadow: 0px 2px 5px rgb(black, .2);
    > div{
      padding: 1em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          border: 0;
          background: transparent;
        }
    }
  }
  .hide-mobile{
    display: none;
    box-shadow: 0px 2px 5px rgb(black, .2);
    > div{
      padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo{
        margin-right: 1em;
      }
    }
    nav{
      display: flex;
      align-items: center;
      ul{
        display: flex;
        list-style: none;
        a{
          margin: 0 .2em;
          color: inherit;
          text-decoration: none;
        }
      }
    }
    .info{
      display: flex;
      align-items: center;
      .account{
        margin-right: .5em;
      }
    }
  }

/* medium and large */
@media screen and (min-width: 40em){
  .show-mobile {
    display: none;
  }
  .hide-mobile {
    display: block;
  }
}