IA Cheatsheets

¡Absolutamente! Ant Design es una biblioteca de componentes de UI de React de nivel empresarial, reconocida por su lenguaje de diseño elegante, su rica colección de componentes y su enfoque en la experiencia de usuario y la accesibilidad. Aquí tienes un “cheatsheet” completo y bien estructurado para Ant Design 5.0, optimizado para ser claro y conciso para una IA conversacional.

antd 5.0 (Ant Design) Cheatsheet Completo

Ant Design (antd) es una biblioteca de componentes de interfaz de usuario de React que sigue los principios de Ant Design para construir experiencias de usuario consistentes y agradables. La versión 5.0 trae cambios significativos en el tema (usando tokens y CSS-in-JS) y mejoras de rendimiento.

1. 🌟 Conceptos Clave

2. 🛠️ Configuración Inicial

  1. Instalación:

    npm install antd
# o
yarn add antd

  2. Uso Básico en tu Aplicación React:

    • No necesitas importar archivos CSS directamente como en versiones anteriores. El CSS se inyecta automáticamente con CSS-in-JS.
    • ConfigProvider: Esencial para configuración global, incluyendo el tema, internacionalización, prefijos de clase, etc.
    // src/main.jsx o src/App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

// Importa el componente y los estilos de un componente individual
import { Button, ConfigProvider } from 'antd';
import es_ES from 'antd/locale/es_ES'; // Para internacionalización (opcional)
import 'dayjs/locale/es'; // Si usas DatePicker, Day.js necesita su locale

// Crea un tema personalizado (opcional)
const myCustomTheme = {
  token: {
    // Colores
    colorPrimary: '#00b96b', // Verde vibrante como color primario
    colorSuccess: '#52c41a',
    colorWarning: '#faad14',
    colorError: '#ff4d4f',
    colorInfo: '#1677ff',
    colorTextBase: '#333333',

    // Espaciado
    marginSM: 12,

    // Bordes
    borderRadius: 8,

    // Otros tokens (tipografía, sombras, etc.)
    fontSize: 14,
    lineHeight: 1.6,
  },
  components: {
    Button: {
      // Tokens específicos para el componente Button
      borderRadius: 4, // Botones con bordes menos redondeados que el global
      controlHeight: 40, // Altura de los botones
      primaryColor: '#ffffff', // Color del texto del botón primario
    },
    Layout: {
      headerBg: '#f0f2f5', // Fondo del header del layout
    },
    // ... otros componentes
  },
  // Puedes añadir un algoritmo de tema si quieres, por ejemplo para modo oscuro
  // algorithm: antd.theme.darkAlgorithm, // Si importas antd.theme
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ConfigProvider
      locale={es_ES} // Configuración global de idioma
      theme={myCustomTheme} // Aplica el tema personalizado
    >
      <App />
    </ConfigProvider>
  </React.StrictMode>,
);

3. 🧩 Componentes Comunes (Cheatsheet Rápido)

Layout

Entrada de Datos (Forms)

import { Form, Input, Button, message } from 'antd';

function LoginForm() {
  const onFinish = (values) =&gt; {
    console.log('Success:', values);
    message.success('Formulario enviado!');
  };

  const onFinishFailed = (errorInfo) =&gt; {
    console.log('Failed:', errorInfo);
    message.error('Error de validación!');
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Nombre de usuario"
        name="username"
        rules={[{ required: true, message: 'Por favor ingresa tu nombre de usuario!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Contraseña"
        name="password"
        rules={[{ required: true, message: 'Por favor ingresa tu contraseña!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Enviar
        </Button>
      </Form.Item>
    </Form>
  );
}

Visualización de Datos

Feedback

4. 🎨 Theming y Personalización (Ant Design 5.0)

El nuevo sistema de tema se basa en tokens de diseño y CSS-in-JS.

5. 🖼️ Iconos

Ant Design utiliza la librería @ant-design/icons.

  1. Instalación: npm install @ant-design/icons
  2. Importación y Uso: 
    import { HomeOutlined, DeleteOutlined } from '@ant-design/icons';
import { Button } from 'antd';

<HomeOutlined style={{ fontSize: '24px', color: '#08c' }} />
<Button type="primary" icon={<DeleteOutlined />}>Eliminar</Button>

6. 🌍 Internacionalización (i18n)

Se configura globalmente con la prop locale de ConfigProvider.

import { ConfigProvider, DatePicker } from 'antd';
import es_ES from 'antd/locale/es_ES'; // Importa el paquete de idioma
import 'dayjs/locale/es'; // Si usas DatePicker, importa el locale para Day.js

function MyApp() {
  return (
    <ConfigProvider locale={es_ES}>
      <DatePicker />
    </ConfigProvider>
  );
}

7. 💡 Buenas Prácticas y Consejos

Este cheatsheet te proporciona una base sólida para trabajar con Ant Design 5.0, cubriendo sus conceptos esenciales, componentes clave, y las nuevas formas de personalización que lo hacen aún más potente.