material

Diseño de materiales para aplicaciones AngularJS

Material Design es una especificación para un sistema unificado de diseño visual, de movimiento e interacción que se adapta a diferentes dispositivos. Nuestro objetivo es ofrecer un conjunto sencillo y liviano de elementos de interfaz de usuario nativos de AngularJS que implementen la especificación de diseño de materiales para su uso en aplicaciones de una sola página (SPA) de AngularJS.

AngularJS Material es una implementación de la Especificación de diseño de materiales de Google (2014-2017) para desarrolladores de AngularJS (v1.x).

Para obtener una implementación de la Especificación de diseño de materiales (2018+), consulte el proyecto Angular Material, creado para desarrolladores de Angular (v2+).

Fin de vida

El soporte de AngularJS Material finalizó oficialmente en enero de 2022. Vea lo que significa finalizar el soporte y lea el anuncio de fin de vida. Visite material.angular.io para obtener Angular Material con soporte activo.

Encuentre detalles sobre cómo informar problemas de seguridad aquí.

AngularJS Material incluye un amplio conjunto de componentes de interfaz de usuario reutilizables, bien probados y accesibles.

Enlaces rápidos:

• API y demostraciones
• Edificio
• Instalación

Tenga en cuenta que el uso de la última versión de AngularJS Material requiere el uso de AngularJS 1.7.2 o superior.

AngularJS Material admite las versiones de navegador definidas en el campo browserslist de nuestro paquete.json. Obtenga más información en nuestro sitio de documentos.

AngularJS Material admite las versiones de lectores de pantalla que se enumeran aquí.

Documentación y demostraciones en línea

• Visite material.angularjs.org en línea para revisar la API, ver los componentes en acción a través de demostraciones en vivo y leer nuestras guías detalladas que incluyen el sistema de diseño, el sistema de temas, la tipografía y más.
• O puede crear la documentación y las demostraciones localmente; consulte Crear documentos y demostraciones para obtener más detalles.

Edificio

Los desarrolladores pueden crear material AngularJS utilizando NPM y gulp.

Primero instale o actualice las dependencias npm de su proyecto local:

npm install

Instale Gulp v3 globalmente:

npm install -g gulp@3

Luego ejecute las tareas de trago :

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

Para el desarrollo, utilice el script docs:watch NPM para ejecutarlo en modo de desarrollo:

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

Para obtener más detalles sobre cómo funciona el proceso de compilación y comandos adicionales (disponibles para probar y depurar), los desarrolladores deben leer la Guía de compilación.

Instalación de Build (archivos de distribución)

MNP

Para los desarrolladores que no estén interesados ​​en crear la biblioteca de materiales AngularJS... utilice NPM para instalar y utilizar los archivos de distribución de materiales AngularJS.

Cambie al directorio raíz de su proyecto.

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

Otros administradores de dependencia

Visite nuestro repositorio de distribución para obtener más detalles sobre cómo instalar y usar los archivos de distribución de AngularJS Material dentro de su proyecto local.

CDN

Hay disponibles versiones CDN de AngularJS Material.

Con Google CDN, no necesitará descargar copias locales de los archivos de distribución. En su lugar, simplemente haga referencia a las URL de CDN para utilizar fácilmente esos archivos de biblioteca remota. Esto es especialmente útil cuando se utilizan herramientas en línea como CodePen o Plunker.

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

Los desarrolladores que buscan las versiones de compilación más recientes y actualizadas pueden usar GitCDN.xyz para extraerlas directamente de nuestro repositorio de distribución:

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

Una vez que tenga instalados todos los recursos necesarios, agregue ngMaterial y ngMessages como dependencias para su aplicación:

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;