Una descripción general rápida para ayudarlo a comenzar a desarrollar sus aplicaciones con Angular y Kendo UI. Echa un vistazo a la serie de videos completa para obtener más información.
El mes pasado, hice una serie de videos que explican cómo comenzar con muchas de nuestras ingeniosas UI de Kendo para componentes Angular. Esta publicación cubrirá los aspectos más destacados del primer video, Primeros pasos con la interfaz de usuario de Angular y Kendo. Todo el código fuente producido en esta serie se puede encontrar aquí en Github.
Para dar inicio a la serie, crearemos nuestra aplicación Angular y también instalaremos y usaremos nuestro primer componente de interfaz de usuario de Kendo, que es el botón. Para crear la aplicación vamos a utilizar la CLI de Angular.
Instalar la CLI
Continúe y abra la terminal, y si nunca ha usado esta CLI antes, necesitaremos instalarla:
npm install -g @angular/cli
Cree una nueva aplicación angular con CLI
A continuación, creemos la aplicación usando el ng new dominio. Llamaremos a nuestra aplicación Angular-Kendo-Unite:ng new Angular-Kendo-Unite .
Comencé este proyecto sin scss, porque asumo que la mayoría de los proyectos no se generan de inmediato con el indicador —scss. Entonces, para usar nuestros temas, aquí le mostramos cómo ingresar fácilmente scss en su proyecto. [por supuesto, esto no es obligatorio, pero sin scss, no podrá aprovechar las variables css para personalizar los estilos fácilmente para su aplicación.
Actualice su archivo angular.json:
...
build: {
...
options: {
styles:{
"src/styles.scss"
}
} Tenemos un puñado de cosas que superar en esta serie, por lo que en esta primera parte, simplemente quiero crear nuestra aplicación junto con nuestro primer componente que usará un componente de interfaz de usuario de Kendo. Ahora, dentro de nuestra aplicación, vamos a para abrirlo en VS Code.
Agregar botones angulares de Kendo a nuestra aplicación
Entonces, dentro de la terminal en VS Code, usemos el ng add comando para agregar Kendo UI a nuestra aplicación Angular:
ng add @progress/kendo-angular-buttons
Generar un componente
A continuación, vamos a generar un componente para colocar nuestro botón o botones con el ng generate component Comando desde la CLI. Y lo llamaremos button-control-panel .
ng g c button-control-panel
Entonces, ahora, aquí puede ver que hemos generado el panel de control de botones que tiene los archivos CSS, HTML y TypeScript que necesitaremos para este tipo de esfuerzo. Y también puede notar que el archivo app.module.ts ha sido modificado porque el panel de control de botones se ha agregado a las declaraciones, así como también se ha importado en la parte superior. Todo lo que deberíamos esperar en este punto.
Añadir botón a nuevo componente vacío
Entonces, para usar nuestro primer botón, que acabamos de instalar, voy a crear un envoltorio div y luego un botón dentro del envoltorio. En nuestro botón, queremos darle un atributo camel-cased de kendoButton , también vamos a echarle un vistazo, y lo sé, suena muy aburrido, pero por ahora vamos a usar el valor predeterminado. Nos pondremos más elegantes en un segundo. Luego haré que diga "Botón predeterminado" para que veamos cómo se ve.
<div class="k-block">
<button kendoButton [look]="'default'">Default Button</button>
</div> Agregar componente del panel de control de botones a la vista
Ahora necesitamos agregar nuestro componente de panel de botones a nuestro archivo app.component.html. (De forma predeterminada, el selector tenía el prefijo app , sin embargo, por motivos de simplicidad, lo eliminé).
<button-control-panel></button-control-panel>
Serviendo nuestra aplicación 🥘
Con nuestro panel de control de botones listo para usar, finalmente podemos seguir adelante y servir nuestra aplicación, y revisar nuestro botón. Podemos servir nuestra aplicación desde la raíz de la aplicación en la terminal con ng serve y abre localhost:4000 en el navegador de nuestra elección y ver el botón que hemos creado!
Opciones de apariencia adicionales
Tenemos otras opciones de apariencia para nuestros botones (como se ve aquí en nuestros documentos) que también demostraré aquí:
<div class="k-block">
<button kendoButton [look]="'default'">Default Button</button>
<button kendoButton [look]="'outline'">Outline Button</button>
<button kendoButton [look]="'bare'">Bare Button</button>
<button kendoButton>Button</button>
</div>
¡Espero que hayas disfrutado esta primera parte de la serie Angular &Kendo UI Unite! ¡Hay 7 partes más por venir y cada una se basará en la última, se volverá un poco más complicada y usará cada vez más componentes de interfaz de usuario de Kendo a medida que construimos!
Si es nuevo en Kendo UI para Angular, puede obtener más información aquí o simplemente disfrutar de una prueba gratuita de 30 días hoy.