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 鈥渉eader鈥

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?

o inicia sesi贸n.

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.

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;
}
}

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

Como ser铆a si se le pide una maquetaci贸n a alguna de las IA?

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"
    ],
    ...
  }
},
...

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;
  }
}