tutorial the for material-design angular-material2 material-components

material-design - the - material design angular io



Componentes de material para la Web vs material angular 2 (5)

Divulgación completa: trabajo en Componentes de material para la web , por lo que mi opinión puede ser un poco sesgada :)

TL; DR usa cualquier biblioteca que te ayude a construir tu IU de la manera más eficiente posible, o úsalas lado a lado. Revisa nuestro ejemplo de integración angular2 angular-mdc-web para ver cómo envolver un componente MDC-Web usando ng2.

El objetivo de Material Components para la web (abreviado MDC-Web ), como se ha mencionado, es crear una implementación canónica de los componentes de Material Design para toda la plataforma web. Angular / material2 es una excelente biblioteca, muchos de nosotros en el equipo de Diseño de materiales, incluido yo mismo, hemos contribuido a ello, pero es excluyente para aplicaciones no angulares2. Además, las bibliotecas y marcos que no son de Google, como React, Aurelia, Vue y otros, no tienen una solución oficial para satisfacer sus necesidades.

Dicho esto, Angular2 cae dentro de nuestro alcance de la "plataforma web completa", y definitivamente queremos apoyarlo por eso. En esta etapa en ambos proyectos, podemos tener algunos componentes que necesita que angular / material2 no necesita, o viceversa. Te animo a que uses la biblioteca que te ayude a lograr tus objetivos de la mejor manera posible. Eso podría ser angular / material2, podría ser MDC-Web, o honestamente podría ser ambos. Por ejemplo, podría usar nuestro componente select junto con los componentes del material lateral2, y las cosas deberían funcionar bien. Como se menciona en el TL; DR, angular-mdc-web es una biblioteca con todas las funciones que envuelve MDC-Web en una API angular2 + idiomática.

En una nota final, MDC-Web es la única biblioteca desarrollada por el propio equipo de Diseño de materiales. Debido a esto, podemos colaborar e iterar con las mismas personas que crean la especificación de Diseño de materiales.

Recientemente, el sucesor del proyecto MDL (Material Design Lite) se lanzó como Componentes materiales para la Web . Uno de sus objetivos es "Integración perfecta con otros marcos y bibliotecas JS".

Hay otro proyecto Angular Material2 que proporciona componentes de diseño de materiales específicamente para Angular (v2 +).

Ambos proyectos están creando componentes de IU basados ​​en diseño de materiales. Además, tienen un conjunto similar de componentes ready / in-active-development , y el mismo conjunto de componentes que vendrán próximamente (enumerados ready y here ).

¿Puede alguien ayudarme a comprender la superposición entre 2 proyectos y cuál debo elegir para nuevos proyectos?

En un nivel fundamental, entiendo que Angular Material2 se integrará más perfectamente y con mayor precisión con los proyectos de Angular, mientras que Material Components for the Web proporcionará ganchos para que múltiples marcos JS puedan usar. Pero no veo la razón de la superposición y cuál tendrá más impulso (lea más componentes).

Actualización (16 de marzo de 2018):

De los comentarios proporcionados por @elDuderino, Material2 parece tener una forma de personalizar. La respuesta proporcionada fue antes de que Material tuviera cdk.

https://material.angular.io/guide/customizing-component-styles

Ambos marcos están muy maduros ahora. Los uso a ambos en diferentes proyectos. Me llevó solo una semana migrar un proyecto de un marco a otro. Por lo tanto, sugeriría probar ambos y ver cuál le resulta cómodo.

Compartiré mi experiencia. Es obstinado y sesgado. Me encanta ser corregido.

Estamos comenzando desde cero y usando Angular. Decidimos ir con material. Comencé mi búsqueda de un marco mejor y probé todos ellos: Materialise, MDL, Angular Material 2 y finalmente MDC para web.

Aquí están mis observaciones, especialmente para Material2 vs MDC para Web.

Material2

  • Pros
    • Confeccionado. Todo está disponible y listo para comenzar a trabajar.
    • Arquitectura cerca de Angular

  • Contras

    • La lista de componentes aún no está completa (se superarán con el tiempo, así que está bien)
    • Personalizar es imposible

    Sé que podemos agregar temas, eso es todo. Todo el HTML y CSS para los componentes se agrega en Componentes Angulares. Por lo tanto, se compila como JavaScript y se aplica en tiempo de ejecución. Por lo tanto, no hay forma de anular el comportamiento. Lo intenté durante una semana y no pude hacerlo.

    Aquí hay preguntas que hice (una de ellas marcada para cerrar ya que parecía estar pidiendo opiniones -.-)

    Cómo personalizar Angular Material 2

    Cómo extender el estilo de componente angular

    Por supuesto, no obtuvieron ninguna respuesta y no pude personalizarlas. Si estoy equivocado, por favor dirígeme.

Verifique la actualización provista arriba

MDC para web

  • Contras

    • No disponible para Angular

    No podemos comenzar a usarlo de inmediato si quieres hacerlo de forma angular. Necesita escribir un contenedor para Angular para cada componente. Podría tomar un poco de esfuerzo. Pero cada equipo puede permitirse un tiempo para personalizar y hay esfuerzos de terceros para que sea más fácil. Si está bien no hacerlo de manera angular, creo que podemos comenzar sin los envoltorios.

    • La lista de componentes aún no está completa (se superarán con el tiempo, así que está bien)

  • Pros

    • Genérico, no vinculado al marco. Siempre seguro para invertir.
    • Más contribución, ya que otros desarrolladores de marcos también lo usan. Con el tiempo obtiene más contribuciones y pruebas futuras (casi)
    • Totalmente personalizable
    • Aparece como un solo marco El equipo de diseño de materiales está directamente involucrado con
    • Puede usar el conocimiento / estilos para dispositivos móviles también.
    • La documentación es asombrosa. Parece que se dedica mucho esfuerzo y tiempo.

El material angular 2 todavía está desactualizado y no implementa la especificación del material correctamente. No lo uses

Para las personas que consideran Angular Material 2, el plugin Sketch Material Plugin / Theme Editor y la herramienta Galería solo están disponibles para MDC. Estoy en el mismo camino, y comencé con Angular Material 2, y con la reciente introducción sobre Angular Ivy, no estoy seguro de cuánto esfuerzo va a poner el equipo en Angular Material 2. Me estoy mudando a MDC, que Es una apuesta segura.

Del reciente archivo Léame:

Material de alto nivel planeado para Q1 → Q2 2019 (enero - junio):

  • La mayoría del equipo de Angular Material está prestado al equipo marco que ayuda con Ivy. Hemos estado utilizando las pruebas Angular CDK y Angular Material para validar las rutas de código, así como ayudar a solucionar problemas al cambiar las aplicaciones de Google a la nueva canalización de renderizado.
  • También estamos trabajando con el equipo de Diseño de materiales en una estrategia para colaborar más profundamente. Tendremos más para compartir sobre esto una vez que nuestros planes estén más avanzados.
  • Varias correcciones de errores y mejoras menores en las funciones.
  • Diseño para mejoras de API en el componente de árbol para mejorar la ergonomía.

Parece que el equipo de Angular Material planea colaborar con el equipo de MDC:

Material de alto nivel planeado para el cuarto trimestre de 2018 (octubre - diciembre):

  • Mejorar nuestras propias herramientas de construcción y automatización.
  • Solucione errores y reduzca algunas deudas técnicas dentro de Google
  • Trabajando en planes a largo plazo sobre cómo colaborar con el equipo web de MDC
  • Diseños para mejoras de tabla avanzadas (cambio de tamaño de columna, directivas de selección, edición en línea)

( README )

Esto se agregó al archivo Léame hace aproximadamente 20 días (10 de octubre de 2018).
Entonces, lo más probable es que en el futuro Angular Material sea solo una especie de envoltorio angular o implementación angular del MDC para Web.