A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Materialize

Curso de Materialize

Diego De Granda

Diego De Granda

Finalizando cards en el homepage

11/17
Recursos

Aportes 14

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

pueden bajar una extensi贸n de vcode de materialize snippets y les ayuda mucho

Estuve revisando el c贸digo de Materialize y encontr茅 que esa clase 鈥渁ctivator鈥 en el CSS 煤nicamente le agrega:

.card .card-title.activator {
  cursor: pointer;
}

Y su funcionalidad esta en el JavaScript, donde card tiene un evento clic y si tiene existe el .activator realiza la animaci贸n y mostrar la informaci贸n que estaba abajo oculta. As铆 mas o menos:

$(document).on('click', '.card', function (e)
{
	//Luego de mucho otro c贸digo de otras partes
	else if ($(e.target).is($('.card .activator')) || $(e.target).is($('.card .activator i'))) {
        $card.css('overflow', 'hidden');
        $cardReveal.css({ display: 'block' });
        anim({
          targets: $cardReveal[0],
          translateY: '-100%',
          duration: 300,
          easing: 'easeInOutQuad'
        });
      }

}

Me d铆 cuenta que partes de Materialize est谩n programadas con JQuery, curioso.

Me pareci贸 que se quedaron varios definiciones de clases en el aire, las clases que se usaron en el ancla (鈥榓鈥)

Otra opci贸n es ir a Getting Started en la p谩gina de materialize y descargar el CSS (bot贸n materialize).
Una vez descargado colocamos el contenido dentro de nuestro proyecto y con esto nuestro IDE detectar谩 las clases y nos ser谩 de mucha ayuda en el autocompletado para escribir m谩s r谩pido el c贸digo y sin fallas.
Tambi茅n se pueden agregar el CSS y JS a modo de que sea local y podr铆amos quitar el cdn鈥

La raz贸n para usar botones Flat: Los botones planos generalmente se usan dentro de elementos que ya tienen profundidad como tarjetas o modales.(Tomado de la documentaci贸n de Materialize)

Como va quedando 馃榾

Les dejo el link de la documentacion para Cards

https://materializecss.com/cards.html

Las cards son muy buenas, sin embargo su codeo es un poco complicado. El codeo que ofrece Tailwind lo veo mucho m谩s simple, sin embargo, no tiene la misma calidad

  • Clase que delimita el color del texto
    grey-text

  • Etiqueta i utilizada para importar iconos de Materialize
    <i class=鈥渕aterial-icons right鈥>more_vert</i>

驴Cuando se usa activator?

Quedo super bien

驴La clase que le permite cerrar al 铆cono 鈥淴鈥 es 鈥渃ard tilte鈥?

Lo veo mas simple Bootstrap鈥 pero sigamos!

Hola Otra vez para que les funciones las acciones de su aplicacion como card-reveal (ejemplo los botones de material-icoms ) tienes que usar JQuery antes que el escript de mateialize.

 <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>```