Ant Design es un patrón de diseño para productos de nivel empresarial que se puede integrar con otros marcos front-end como Angular, React o Vue. La implementación oficial de Ant Design se lanza con React, pero se puede usar con otros marcos de JavaScript. Es una herramienta de código abierto con aproximadamente 50.4K estrellas de GitHub, es la segunda biblioteca React UI más utilizada del mundo. Muchas empresas están utilizando este patrón de diseño como Alibaba, Tencent, Didi, etc.
Características del diseño de hormigas:
- Apoya la internacionalización.
- Interfaz de usuario rica e interactiva.
- Potente personalización de temas.
- Los componentes de alta calidad están presentes.
- Alto rendimiento.
Requisito previo:
- Un editor de código como VSCode, Sublime, Brackets, etc.
- NodeJS debe estar instalado en el sistema
Para ventanas
https://www.geeksforgeeks.org/installation-of-node-js-on-windows/
para linux
https://www.geeksforgeeks.org/installation-of-node-js-on-linux/
- Conocimiento de la configuración de un Proyecto Angular
- En la terminal, vaya a esa carpeta del proyecto angular que ha creado, luego instale Ant Design of Angular usando el siguiente comando:
- En el archivo «angular.json» , agregue el archivo Ant Design .css en la array de estilos como se indica a continuación:
{
"$schema"
:
"./node_modules/@angular/cli/lib/config/schema.json"
,
"version"
: 1,
"newProjectRoot"
:
"projects"
,
"projects"
: {
"myAntApp"
: {
"projectType"
:
"application"
,
"schematics"
: {
"@schematics/angular:component"
: {
"style"
:
"scss"
}
},
"root"
:
""
,
"sourceRoot"
:
"src"
,
"prefix"
:
"app"
,
"architect"
: {
"build"
: {
"builder"
:
"@angular-devkit/build-angular:browser"
,
"options"
: {
"outputPath"
:
"dist/myAntApp"
,
"index"
:
"src/index.html"
,
"main"
:
"src/main.ts"
,
"polyfills"
:
"src/polyfills.ts"
,
"tsConfig"
:
"tsconfig.app.json"
,
"aot"
:
true
,
"assets"
: [
"src/favicon.ico"
,
"src/assets"
],
"styles"
: [
"node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
,
"src/styles.scss"
],
"scripts"
: []
},
"configurations"
: {
"production"
: {
"fileReplacements"
: [
{
"replace"
:
"src/environments/environment.ts"
,
"with"
:
"src/environments/environment.prod.ts"
}
],
"optimization"
:
true
,
"outputHashing"
:
"all"
,
"sourceMap"
:
false
,
"extractCss"
:
true
,
"namedChunks"
:
false
,
"extractLicenses"
:
true
,
"vendorChunk"
:
false
,
"buildOptimizer"
:
true
,
"budgets"
: [
{
"type"
:
"initial"
,
"maximumWarning"
:
"2mb"
,
"maximumError"
:
"5mb"
},
{
"type"
:
"anyComponentStyle"
,
"maximumWarning"
:
"6kb"
,
"maximumError"
:
"10kb"
}
]
}
}
},
"serve"
: {
"builder"
:
"@angular-devkit/build-angular:dev-server"
,
"options"
: {
"browserTarget"
:
"myAntApp:build"
},
"configurations"
: {
"production"
: {
"browserTarget"
:
"myAntApp:build:production"
}
}
},
"extract-i18n"
: {
"builder"
:
"@angular-devkit/build-angular:extract-i18n"
,
"options"
: {
"browserTarget"
:
"myAntApp:build"
}
},
"test"
: {
"builder"
:
"@angular-devkit/build-angular:karma"
,
"options"
: {
"main"
:
"src/test.ts"
,
"polyfills"
:
"src/polyfills.ts"
,
"tsConfig"
:
"tsconfig.spec.json"
,
"karmaConfig"
:
"karma.conf.js"
,
"assets"
: [
"src/favicon.ico"
,
"src/assets"
],
"styles"
: [
"src/styles.scss"
],
"scripts"
: []
}
},
"lint"
: {
"builder"
:
"@angular-devkit/build-angular:tslint"
,
"options"
: {
"tsConfig"
: [
"tsconfig.app.json"
,
"tsconfig.spec.json"
,
"e2e/tsconfig.json"
],
"exclude"
: [
"**/node_modules/**"
]
}
},
"e2e"
: {
"builder"
:
"@angular-devkit/build-angular:protractor"
,
"options"
: {
"protractorConfig"
:
"e2e/protractor.conf.js"
,
"devServerTarget"
:
"myAntApp:serve"
},
"configurations"
: {
"production"
: {
"devServerTarget"
:
"myAntApp:serve:production"
}
}
}
}
}},
"defaultProject"
:
"myAntApp"
}
- En «app.module.ts», importe el módulo del botón Ant Design, para que podamos acceder a él en el archivo .html como se indica a continuación:
import { BrowserModule } from
'@angular/platform-browser'
;
import { NgModule } from
'@angular/core'
;
import { AppRoutingModule } from
'./app-routing.module'
;
import { AppComponent } from
'./app.component'
;
import { NzButtonModule } from
'ng-zorro-antd/button'
;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NzButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- En el archivo «app.component.html» , agregue el siguiente código como se indica a continuación:
<
button
nz-button
nzType
=
"primary"
>Primary</
button
>
<
button
nz-button
nzType
=
"default"
>Default</
button
>
<
button
nz-button
nzType
=
"dashed"
>Dashed</
button
>
- Agregue algo de CSS en «app.component.scss» para mostrar los botones en el centro como se indica a continuación:
[nz-button] {
margin-left: 50%;
margin-top: 3%;
}
- En la terminal, ejecute la aplicación en el navegador usando el siguiente comando:
ng serve -o
Instalación de Hormiga Diseño de Angular
npm instalar ng-zorro-antd
Producción:
Publicación traducida automáticamente
Artículo escrito por meghasinha1301 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA