pueden bajar una extensión de vcode de materialize snippets y les ayuda mucho
Introducción a Materialize
Frameworks ¿Qué son?
¿Qué es Material Design y Materialize?
La lógica detrás del Grid system
Documentación y características de Materialize
Componentes de Materialize
Desarrollo del sitio
Presentación del proyecto
Instalación del proyecto
Elaboración del header
Estilos al header
Construcción del main homepage
Finalizando cards en el homepage
Terminando el index.html y estilos en el mainpage
Desarrollo de la página de artículo
Desarrollo del formulario de registro
Desarrollo de checkboxes en el formulario
Despliege del proyecto
Despliegue del proyecto en Firebase
Conclusiones
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Finalizando cards en el homepage
11/17Recursos
Aportes 14
Preguntas 1
Ordenar por:
Estuve revisando el código de Materialize y encontré que esa clase “activator” 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 (‘a’)
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
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=“material-icons right”>more_vert</i>
¿Cuando se usa activator?
Quedo super bien
¿La clase que le permite cerrar al ícono “X” es “card 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>```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.