Ant-design: 💥 ¡Ant Design 4.0 está en progreso!

Creado en 31 may. 2019 · 182Comentarios · Fuente: ant-design/ant-design

Vista previa del sitio

next.ant.design

Resumen

Han pasado 16 meses desde diciembre de 2017 cuando se lanzó Ant Design 3.0. Arreglamos muchos errores y agregamos muchas funciones nuevas ( registro de cambios ) en 4289 confirmaciones, 138 lanzamientos, 7675 problemas y relaciones públicas, que nos trajeron 25375 estrellas en GitHub. También lanzamos Ant Design Pro 4.0 . Soporte para TypeScript, bloques y abstracción de diseños. Queremos agradecer a todos los colaboradores y su contribución hace que Ant Design sea cada vez mejor.

Al mismo tiempo, lanzamos Ant Design Pro 4.0. Admite el componente TypeScript, Block y Proporciona diseño.

En este momento, estamos pensando: Ok, entonces, ¿qué sigue? ¿Qué podemos hacer para que Ant Design vaya más allá? ¡Es el momento de planificar el Ant Design 4.0! 🍻

A continuación se muestra el plan detallado sobre 4.0. Es posible que ajustemos algunos de ellos, ya que aún está en planificación.

🌓 Acerca de la compatibilidad

Eliminaremos los accesorios obsoletos en 4.0, lo que significa que los accesorios obsoletos ya no serán compatibles. Si no recibe ninguna advertencia de la última versión 3.x, la actualización será perfecta. De lo contrario, habrá una fase de mantenimiento de medio año para 3.0 después del lanzamiento de 4.0.

Sabemos que es problemático hacer actualizaciones. Estamos planeando proporcionar un paquete compatible para manejar esto:

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

Este paquete estará disponible hasta el final de la fase de mantenimiento 3.x.

Utilice la última API de React

Hemos brindado soporte a React 15 durante mucho tiempo. Pero parece que no es necesario a partir de la retroalimentación social (hay casi un 0% de problemas sobre React 15), ya que React tiene una fuerte compatibilidad. Para admitir React 15, usamos la nueva API con mucho cuidado. Esto ya no será un problema después de 4.0:

Proporciona la API de Hooks para el componente relacionado
Admite el modo concurrente (aún se está preparando, continuará ajustando en 4.0)
Abraza React 17 (wow！ ~)

Detener el soporte de IE9 / 10

Ant Design 3.0 hace un gran esfuerzo para admitir el antiguo IE . Pero según las estadísticas de la industria, el uso de IE9 / 10 es cada vez menor con la actualización de Windows. Dejaremos de admitir IE 9/10 en 4.0 (pero aún admitiremos IE 11), lo que significa que será posible admitir nuevas funciones del navegador.

Otra actualización compatible

Actualización de Less 2.x a Less 3.x
Ajuste de icono
Mencionar obsoleto

📦 Reducir tamaño

Optimizar el tamaño del icono

Usamos el icono svg ( ¿por qué svg? ) Después de [email protected] . Usamos el nombre de la cadena para mapear el ícono, que no se puede cargar a pedido. Importamos todo el archivo de icono a antd, lo que aumenta el tamaño del paquete . Manejaremos esto en 4.0.

La forma antigua de uso del icono será * obsoleta *:

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

Utilizará la importación de un solo icono en lugar de 4.0:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Todavía puede usar la forma compatible de la manera anterior.

Eliminar Draft.js

Usamos Draft.js en el componente Mention para confirmar la ubicación de la ventana emergente, pero solo se usa una pequeña parte de la funcionalidad. Parece un costo excesivo. Planeamos eliminar Draft.js en 4.0 y usar otra solución ligera en su lugar. Al mismo tiempo, para distinguir con el componente Origin Mention en 3.0, se introducirá un nuevo componente Mentions para evitar conflictos de API. Además, es compatible de forma compatible :

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Optimización del rendimiento

Tenemos pocos problemas de rendimiento para grandes conjuntos de datos de la comunidad. Nos aseguraremos de que se realice alguna optimización aquí.

Desplazamiento virtual

El desplazamiento virtual es una forma común de optimizar el rendimiento. Planeamos admitir esto de forma nativa en componentes. Puede que no termine inmediatamente en la versión 4.0. Se integrará paso a paso.

Animación de refactorización

Hicimos algunos trucos con animación en el pasado. Funciona bien en la mayoría de los casos. Planeamos utilizar una forma React mucho más pura en lugar de piratear una. Esta actualización será en silencio, nada te afectará.

🧩 Optimización de componentes

Hemos agregado muchos componentes en 3.0 y continuaremos en 4.0. Estos componentes provendrán del escenario empresarial, Ant Design Pro y los requisitos sociales. El proceso de los nuevos componentes será el mismo que el de Ant Design 3.0, colocaremos el archivo de diseño relacionado en PR y lo recopilaremos en el sitio web oficial. Lanzamiento en cada versión menor.

Además, planeamos refactorizar algunos componentes clave para que sean más fáciles de usar. Incluye pero no solo:

Formar

La forma es uno de los componentes más utilizados. Notamos que las redes sociales tienen muchos comentarios sobre el diseño de la API.
Deseamos simplificar la API en 4.0:

El formulario incluirá almacenamiento de datos. Ya no es necesario usar Form.create() .
Fom.Item incluirá el enlace de campo. Ya no es necesario usar getFieldDecorator .
Form.Item mantendrá el valor, pero el validador se desactivará cuando se elimine el campo.

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

En el mundo real, encontramos mucha comunicación entre formas (generalmente en configuración detallada). Queremos ponértelo más fácil:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Si desea seguir el progreso del formulario, puede ver aquí .

Mesa

En el pasado, recibimos muchos comentarios de la Mesa . Sabemos que los accesorios de expansión y desplazamiento no funcionan bien juntos. Esta vez, nos centraremos en solucionarlo. Además, haremos mucho en la optimización de la mesa. Y una forma fácil de hacer el diseño:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

También planeamos agregar un pie de

New DatePicker

Current DatePicker satisface la mayoría de los requisitos. Pero a partir de la discusión comunitaria , podemos profundizar más. Proporcionaremos un recolector de año de descanso y un recolector de guardabosques ( discutir ). Además, actualizaremos el estilo de diseño de DatePicker para mejorar la experiencia del usuario.

🚀 Continuar actualizando

Además del contenido anterior, también planeamos continuar actualizando. Estos seguirán actualizándose en 4.0 para mejorar el desarrollo y la experiencia del usuario.

🧶 Mejorar la accesibilidad

Ant Design 3.0 tiene soporte limitado para la accesibilidad, planeamos ajustar la estructura de dom y agregar más aria para mejorar la experiencia del lector de pantalla. Además, también nos preparamos para optimizar la interacción del teclado.

🎯 Estándar de API para desarrolladores

Encontramos que algunos estilos de nombres de API son un poco diferentes con otros. No es un problema para el desarrollador de TypeScript, pero es difícil recordar lo contrario.
Por lo tanto, crearemos un documento estándar de nomenclatura que incluye las API actuales y las reglas de nomenclatura relacionadas. En la nueva función, seguirá la regla de nomenclatura para evitar conflictos de nomenclatura de API. Además, damos la bienvenida a las opiniones de la comunidad sobre esto en PR.

💼 Reaccionar modo estricto

Si intentó envolver el componente antd con <React.StrictMode> , recibirá una advertencia. Ya hemos reemplazado algunos componentes con un nuevo método de ciclo de vida. Este trabajo continuará en 4.0.

💡 Mejorar la experiencia del desarrollador

En el pasado, descubrimos que algunos problemas surgen repetidamente. Estos problemas de alguna manera son cuestiones de uso. Creemos que podemos hacer algo al respecto (en realidad ya comenzamos en 3.0). En el entorno de desarrollo, avisaremos sobre estados inesperados (como invalidar objeto Moment, ajuste de prefijo / afijo que causa cambio en la estructura del dom, etc.). Creemos que la consola es el primer lugar para concentrarse cuando se encuentra un problema. Proporciona consejos adecuados que pueden ayudar a encontrar el problema. Al mismo tiempo, resumiremos otras preguntas en las preguntas frecuentes de cada documento de componente. Desde el lado del mantenimiento, no podemos ayudar en cada pregunta de uso, pero existen, particularmente con los desarrolladores nuevos. Las preguntas frecuentes pueden ayudar a ahorrar mucho tiempo de búsqueda. Si tiene interés en esto, bienvenido a ayudar a mejorar la experiencia del desarrollador con nosotros.

🐱 Recurso de diseño

Ant Design no es solo una biblioteca de componentes. El diseño es el poder de soporte. Sincronizaremos la actualización del recurso de diseño (paquete de componentes de Sketch, herramientas de cocina, Design Token, etc.). También ajustaremos el estilo actual de los componentes para mejorar la experiencia del usuario.

Hitos

Aquí está nuestro plan de hitos. Crearemos un problema relacionado en Github. Y también damos la bienvenida al colaborador social:

Q2

Marque la API relacionada como obsoleta y elimínela del documento.
Actualización de advertencia de componente de bajo nivel.

Tercer trimestre

Cree la rama antd 4.0 y actualice el documento.
Desarrollo de componentes.

Cuarto trimestre

Lanzamiento Ant Design 4.0.

Bienvenido a bordo

Lo mantendremos informado durante el proceso de desarrollo. El contenido anterior puede no ser definitivo. ¡Los pensamientos / consejos de la comunidad serán más que bienvenidos! ¡Mejoremos Ant Design 4.0!

Introducción

Han pasado 16 meses desde que Ant Design lanzó 3.0 en diciembre de 2017. Durante este período, hemos corregido una gran cantidad de errores y agregado una gran cantidad de nuevas funciones ( registro de actualizaciones ). Se enviaron 4289 confirmaciones, se lanzaron 138 versiones, se cerraron 7675 problemas y PR, y se agregaron 25375 estrellas. También lanzamos Ant Design Pro 4.0 . Admite TypeScript, bloquea y abstrae el diseño. Nos gustaría agradecer a todos los voluntarios de la comunidad por su dedicación para hacer que Ant Design sea más útil.

Al mismo tiempo, también estamos pensando en cuál es el siguiente paso y cómo hacer que Ant Design vaya más allá. Esperamos lanzar la versión Ant Design 4.0 en el cuarto trimestre de este año . 🍻

El siguiente es un plan detallado para 4.0, por supuesto que todavía se está planificando. Puede haber ajustes cuando se publique oficialmente.

🌓 Ajuste de compatibilidad

Eliminaremos los atributos marcados como obsoletos en 4.0. En ese momento, ya no podrá utilizar métodos abandonados. Si actualiza su proyecto a la última versión 3.xy no ve el mensaje de advertencia de antd en la consola, su actualización a 4.0 también será perfecta. Para la versión 3.x, aún realizaremos seis meses adicionales de trabajo de mantenimiento después de la versión 4.0.

Sabemos que la versión de actualización tiene mucha energía para abandonar la API obsoleta. Planeamos proporcionar un paquete compatible para ayudar en la transición del proyecto cuando se lance la 4.0 (la API relacionada aún está en diseño y puede ser diferente cuando se lance oficialmente):

import Compatible from '@ant-design/compatible';

// It works, but will warning in console
const Demo = () => (
  <Compatible>
    <YourApp />
  </Compatible>
);

El paquete de compatibilidad también permanecerá actualizado hasta que se detenga el trabajo de mantenimiento 3.0.

Utilice la última versión de React API

Hemos apoyado la versión React 15 durante mucho tiempo, pero según los comentarios de la comunidad, esto en realidad no es importante (el número de problemas de React 15 se acerca al 0%). Porque React tiene una compatibilidad muy sólida. Para admitir React 15, tenemos mucho cuidado con el uso de nuevas API durante el proceso de desarrollo. Después de la versión 4.0, usaremos la última versión de React como punto de referencia para el desarrollo:

Proporcionar la versión Hooks de los componentes relacionados
Admite el modo concurrente (por supuesto, hay más cosas que preparar y se seguirán ajustando en la versión 4.0).
Abraza React 17 (¡guau! ~)

Detener el soporte de IE9 / 10

Ant Design 3.0 ha realizado muchos esfuerzos para ser compatible con la versión anterior de IE . Sin embargo, según las estadísticas de la industria, tanto la participación global como nacional del navegador IE9 / 10 se está reduciendo con la actualización del sistema Windows. En la versión 4.0, dejaremos de admitir IE 9/10 (pero aún admitiremos IE 11). Esto también significa que es posible admitir nuevas funciones del navegador.

Otros ajustes de compatibilidad

Actualizar de Less 2.xa Less 3.x
Cambio de uso de iconos
Mencionar obsoleto

📦 Reducir el volumen

Optimizar el tamaño del icono

En [email protected] , presentamos el ícono svg ( ¿por qué usar el ícono svg? ). Se utiliza la API para configurar iconos con nombres de cadenas. Bajo este diseño, no podemos cargar a pedido. Por lo tanto, introducimos completamente los archivos de iconos svg, lo que aumenta enormemente el tamaño de los productos empaquetados. En 4.0, ajustaremos esto para optimizar el volumen.

La versión anterior del uso de iconos quedará obsoleta :

import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);

En 4.0, se adoptará un método de introducción bajo demanda:

// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);

Aún podrá continuar usando el método compatible anterior.

Eliminar Draft.js

Introdujimos Draft.js en el componente Mention para implementar la función de posicionamiento de solicitud desplegable, pero solo usamos una pequeña parte de su función. Teniendo en cuenta el rendimiento de los costos, parece un poco derrochador. Planeamos eliminar la dependencia de él en 4.0 y cambiar a una solución más liviana. Al mismo tiempo, para distinguir los componentes Mention en 3.0, proporcionaremos un nuevo componente Mentions para evitar conflictos de API. Del mismo modo, también admite el uso continuo de los métodos compatibles anteriores:

// Follow Code will not work
import { Mention } from 'antd';

const Demo = () => (
  <Mention />
);

// Added `Mentions` in 4.0
import { Mentions } from 'antd';

const Demo = () => (
  <Mentions />
);

🧭 Optimización del rendimiento

Durante el proceso de mantenimiento, recibimos muchas discusiones sobre el

Desplazamiento virtual

El desplazamiento virtual es un método de optimización común, pero debido a los efectos de animación en Ant Design, no es tan fácil personalizar el desplazamiento virtual. Ahora, planeamos admitir de forma nativa el desplazamiento virtual en componentes con desplazamiento. Por supuesto, no garantizamos que todos los componentes se hayan actualizado cuando se lance la versión 4.0 y seguirán actualizándose.

Mejoras de animación

En el pasado, usamos algunos trucos para procesar animaciones. En la mayoría de los escenarios, funciona bastante bien. En 4.0, planeamos ajustar esto, abandonar el enfoque de pirateo a un camino más React. El ajuste se actualizará de forma silenciosa, no es necesario que realice ningún cambio.

🧩 Acerca de los componentes

En 3.0, hemos seguido agregando muchos componentes. En 4.0, continuaremos. Estos componentes se perfeccionarán a partir de nuestros escenarios comerciales, Ant Design Pro y las necesidades de la comunidad. Este es un proceso continuo. El proceso de agregar nuevos componentes es el mismo que Ant Design 3.0. Depositaremos los borradores de diseño de los componentes relacionados para que se muestren en PR y se actualicen con el sitio web oficial. Una vez completado el desarrollo, se publicará en la versión menor mensual.

Además, también nos estamos preparando para refactorizar algunos componentes clave para mejorar la facilidad de desarrollo e interacción. Incluye, pero no se limita a:

Componente de formulario

La audiencia de componentes de formulario es muy grande y también hemos notado las quejas de la comunidad sobre la engorrosa API de formulario. En 4.0, esperamos explorar mejores formularios de API para simplificar los costos de desarrollo:

El formulario agregará campos de datos de formulario de forma predeterminada, y ya no necesitará crear contexto a través de Form.create() .
Fom.Item agregará los campos del formulario de forma predeterminada, no necesita vincular el campo a través de getFieldDecorator .
El valor de Form.Item siempre se conservará, pero su función de validación solo tendrá efecto cuando el elemento del formulario esté visible.

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = () => {
    // Do something...
  };

  useEffect(() => {
    // Something like ajax call
    form.setFieldsValue({
      username: 'light',
    });
  }, []);

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
    </Form>
  );
}

En la escena real, nos encontramos con la escena del enlace de múltiples formas (común en la configuración detallada). Sabemos que esto no es conveniente de usar, por lo que también proporcionaremos la función de enlace entre formularios:

const { useForm, createContext } = Form;
const FormContext = createContext();

const Demo = () => {
  return (
    <FormContext>
      <YourForm1 />
      <YourForm2 />
    </FormContext>
  );
};

Si desea seguir el progreso del formulario, bienvenido a verificar el progreso .

Componente de tabla

En la versión anterior, recibimos muchos comentarios sobre el componente Table . Sabemos que las propiedades de expansión y desplazamiento de Table no han funcionado bien en el pasado. En esta ocasión, nos centraremos en resolver conflictos en esta área. Además, optimizaremos aún más el rendimiento del componente Tabla. Y explore algunos métodos de diseño de tablas más simples:

const Demo = () => {
  return (
    <Table
      header={{
        templateAreas: `
          name    address     address
          name    building    no
        `,
        cells: [
          { key: 'name', title: 'Name' },
          { key: 'address', title: 'Address' },
          { key: 'building', title: 'Building' },
          { key: 'no', title: 'No' },
        ],
      }}
    />
  );
};

antd4-table

Además, también planeamos agregar un pie de

DatePicker rehecho

El DatePicker existente ha satisfecho la mayoría de las necesidades, pero desde la discusión de la discusión ). Además, ajustaremos el estilo de los selectores de fecha y hora relacionados para reducir aún más el costo cognitivo de los usuarios.

🚀 Actualización continua

Además del contenido anterior, también planeamos continuar actualizando parte del contenido. Esto será objeto de seguimiento en 4.0 para mejorar mejor el desarrollo y la experiencia del usuario.

🧶 Mejorar la experiencia de accesibilidad

Ant Design 3.0 carece de soporte para la experiencia de accesibilidad. Por esta razón, planeamos ajustar la estructura del componente y agregar más etiquetas aria para mejorar la experiencia de lectura de pantalla. Además, también nos estamos preparando para optimizar los métodos de interacción del teclado de componentes existentes para garantizar una mejor experiencia de interacción completa con el teclado.

🎯 Especificación de API para desarrolladores

En el curso de la evolución, descubrimos que una pequeña cantidad de estilos de API parecerían incompatibles con otros componentes. Para los usuarios de TypeScript, esto no es un problema, pero para otros usuarios, puede causar problemas de memoria.

Por tanto, crearemos un documento de nomenclatura estándar. El documento contendrá una lista de API existentes y convenciones de nomenclatura adecuadas. Al agregar nuevas funciones, también se nombrarán de acuerdo con esta especificación. Para evitar posibles diferencias de API en el futuro. Por supuesto, también agradecemos los comentarios de los estudiantes de la comunidad en relaciones públicas.

💼 Reaccionar en modo estricto

Si intenta ajustar <React.StrictMode> fuera del componente antd, obtendrá muchos mensajes de advertencia del componente antd. Hemos actualizado los métodos de ciclo de vida de algunos componentes en 3.0. En 4.0, continuaremos.

💡 Mejora la experiencia del desarrollador

En el proceso de mantenimiento anterior, descubrimos que ciertos problemas aparecían de un lado a otro. Estos problemas son comunes en algunas especificaciones de uso o escenarios de aplicación. Con este fin, decidimos hacer mejoras aquí (de hecho, desde 3.0, hemos ido mejorando). En el entorno de desarrollo, solicitaremos en la consola algunas situaciones inesperadas (como objetos Moment no válidos, cambios en la estructura de Dom causados por el ajuste dinámico del prefijo / afijo de entrada, etc.). Estamos convencidos de que la consola es el primer lugar al que los desarrolladores prestarán atención cuando encuentren un problema, y proporcionar las sugerencias adecuadas aquí puede ayudar a localizar el problema rápidamente. Al mismo tiempo, para algunos usos o escenarios especiales. Proporcionaremos preguntas frecuentes en la documentación del componente correspondiente. Desde la perspectiva del mantenimiento del proyecto, nuestra energía no puede proporcionar respuestas detalladas al problema del uso. Pero estas preguntas son reales, especialmente para los desarrolladores recién llegados, las preguntas frecuentes pueden ayudar a ahorrar mucho tiempo de búsqueda. Si está interesado, los voluntarios de la comunidad también son bienvenidos para ayudar a mejorar la experiencia del desarrollador.

🐱 Diseño de gestión de activos

Ant Design no es solo un conjunto de bibliotecas de componentes, sino también un poderoso sistema de diseño detrás de él. Actualizaremos los últimos activos relacionados con el diseño (paquete de componentes Sketch, juego de herramientas de cocina, Design Token, etc.) en 4.0 para facilitar a los diseñadores y estudiantes interesados en el diseño como referencia. Los estilos de diseño de componentes existentes también se ajustarán para mejorar los efectos visuales y la experiencia del usuario.

Plan de tiempo

El siguiente es nuestro programa, en el que se están realizando algunas actualizaciones de componentes. Crearemos problemas relacionados en github y daremos la bienvenida a voluntarios de la comunidad para que participen:

Q2

Marque la API obsoleta requerida como Desaprobada y bórrela en el documento.
Los componentes subyacentes están precalentados.

Tercer trimestre

Establezca una rama antd 4.0 y actualice la documentación.
Desarrollo de componentes de bajo nivel.

Cuarto trimestre

Lanzamiento de la versión 4.0.

Bienvenido a participar

Durante el proceso de desarrollo 4.0, el contenido anterior puede ajustarse. Dé la bienvenida a los estudiantes de la comunidad para que brinden ideas y sugerencias valiosas, ¡permítanos hacer que Ant Design 4.0 sea más conveniente y fácil de usar!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

Fuente

zombieJ

👍261 🎉63 ❤59 🚀47 😄34 👀2

Comentario más útil

15311

¿Reemplazaremos Moment.js en la versión 4?

hk-ng en 1 jun. 2019

👍101 ❤13

Todos 182 comentarios

15311

¿Reemplazaremos Moment.js en la versión 4?

hk-ng en 1 jun. 2019

👍101 ❤13

Es genial, no puedo esperar para actualizar

lcoder en 1 jun. 2019

Preparación alfa de V4

Principalmente objetivo

[x] rama v4
[x] Paquete compatible
[x] Quitar contenido obsoleto
- [x] Mencionar componente
- [x] Nuevo componente de menciones n.º 16532
- [x] Form.create
- [x] Icono con type # 12011
- [x] Otro con accesorios de advertencia obsoletos
[x] Menos v3
[x] Rendimiento
- [x] rc-animate actualización
- [x] compatibilidad con el modo concurrente
- [x] Soporte de animación de desplazamiento virtual
- [x] Pergamino virtual
- [x] componente rc
- [x] Árbol
- [x] Seleccionar
- [x] TreeSelect
- [x] Formulario: https://github.com/react-component/form/pull/292
- [x] Proporciona la versión Hooks
- [x] Mesa
- [] templateAreas
- [x] Apoyo expand & scroll co-trabajo
[x] DatePicker con nuevo diseño
- [x] YearPicker
- [x] RangePicker.YearPicker
- [x] RangePicker.MonthPicker
- [x] RangePicker.YearMonthPicker
- [x] RangePicker.WeekPicker
- [x] TimePicker.RangePicker

Continuar objetivo

[] Accesibilidad
[x] estándar API
[] React.StrictMode

afc163 en 1 jun. 2019

👍1

Aquí hay algunas sugerencias sobre Ant 4

Acerca de `templateAreas`

templateArea analiza la cadena en tiempo de ejecución, causará errores de análisis no aceptados o errores leves cuando se escriba una cadena. El análisis en tiempo de ejecución también es hostil para TypeScript. ¿Ant Team consideraría la propuesta a continuación?

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

Sobre la dependencia

¿Ant Team consideraría eliminar la dependencia de moment ?

Moment es demasiado grande para el proyecto de front-end, hay muchas alternativas, pero los accesorios de TimePicker y DatePicker con Moment. Nos lleva a que no podamos reemplazar moment con date-fns u otra biblioteca que sea más pequeña que Moment.

Acerca del icono

Creo que la forma en que se usan los íconos de Ant ahora no debería quedar obsoleta, la nueva forma en que el ícono de importación puede causar un cambio común en el paquete cuando agrego o elimino un ícono.

Ant Team puede proporcionar dos formas de usar Ant Icons:

Empaquete todos los iconos en un archivo js, los desarrolladores pueden importar el archivo completo usando la etiqueta <script> y configurar externals en el paquete web.
La nueva forma que presentamos arriba.

这是我对 Ant4 的一些建议

关于`templateAreas`

templateAreas在运行时对字符串进行解析，当字符串出现拼写错误的时候，可能会导致解析失败或者静默错误。运行时解析对 TypeScript 也不友好。Ant 团队是否考虑如下方案：

const columnTemplate = [
  ['name', 'address', 'adress'],
  ['name', 'building', 'no']
]

关于依赖

是否考虑移除对 Momento 的依赖？

Momento 对于前端项目来时实在是太大了，市面上有许多可供替代的库，但是TimePicker和DatePicker的参数依赖于 Momento 对象，这导致了我们没办法使用date-fns或者一些比 Momento 更小的库来替代 Momento。

关于图标

我认为当前使用Ant图标的方式不应该被废弃.新的使用方式在我新增或者删除一个图标引用的时候,可能会导致公共trozo反复变更.

Hormiga 团队可以提供如下两种方案来使用 Hormiga 图标：

打包所有图标到一个 js 文件中，开发者通过<script>标签引用全部图标，并且在 Webpack 中设置为externals
4.0 新介绍的图标使用方式

jas0ncn en 1 jun. 2019

👍47

¿Algún plan para admitir el desplazamiento virtual de la tabla? En algunos casos, se prefiere la tabla infinita en lugar de la paginación.
Y como 'Comentario' está incluido en 3.11, ¿tal vez ChatBox y ChatMessage?

ifiknew en 2 jun. 2019

👍10

¿Algún plan para admitir el desplazamiento virtual de la tabla? En algunos casos, se prefiere la tabla infinita en lugar de la paginación.
Y como 'Comentario' está incluido en 3.11, ¿tal vez ChatBox y ChatMessage?

UserInfo tal vez prioridades.

jas0ncn en 2 jun. 2019

sobre `templateAreas`

También apoyo la sintaxis de matrices bidimensionales.
También apoyo la sintaxis de matrices bidimensionales.

Con respecto a templateAreas, aquí hay un ejemplo de verificación estática
Este es un ejemplo de un tipo de verificación estática usando ts para templateAreas

interface Cell<T extends string = string> {
  key: T;
  title: string;
}

interface Config<K extends string = string> {
  header: {
    templateAreas: ReadonlyArray<ReadonlyArray<K>>;
    cells: ReadonlyArray<Cell<K>>
  };
}


declare function check<T extends string>(config: Config<T>): void;

const config = {
  header: {
    templateAreas: [
      ['name', 'address', 'address'],
      ['name', 'building', 'error'],
    ],
    cells: [
      { key: "name", title: "Name" },
      { key: "address", title: "Address" },
      { key: "building", title: "Building" },
      { key: "no", title: "No" }
    ]
  }
} as const;

check(config);

Patio de recreo

muzea en 2 jun. 2019

👍3 🚀1 😕1 🎉1 😄1

increíble

Huanglei2010 en 3 jun. 2019

15311
¿Reemplazaremos Moment.js en la versión 4?

Creo que el problema principal para alejarse de moment es el cambio de ruptura en torno a locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

zachguo en 4 jun. 2019

Espero que el soporte para mecanografiado pueda ser mejor

fwh1990 en 5 jun. 2019

👎2

¡La gran visión 4.0 está en progreso! Tengo algunas sugerencias a continuación para considerar, no estoy muy seguro de si encajan en el patrón de diseño, pero en mi opinión, para la personalización, serían geniales.

Poder controlar el color de fondo de una fila dentro de <Table> . Por ejemplo, colorear una fila en naranja para resaltar la advertencia de esa fila.
Colores de los botones, no encontré discusiones previas sobre esto. Pero sería genial poder tener una API similar a <Tag color="red">RED<Tag /> para botones, por ejemplo <Button color="red">Red Button<Button/> .
Soporte para íconos Font-Awesome 5.x dentro de los diferentes componentes, o asegúrese de que funcionarán con los otros íconos en curso. He notado algunos problemas con la alineación al usar FA en lugar del componente nativo <Icon> .
El componente <Pagination> no admite el suministro de la cantidad de páginas directamente, el caso de uso es que solo tengo la cantidad de páginas y la página actual disponible para mí, por ejemplo, pero no la cantidad de elementos dentro de cada página. Todavía no he encontrado una buena manera de manejar esto.

orecus en 5 jun. 2019

@orecus

Por ejemplo, colorear una fila de naranja para resaltar la advertencia de esa fila

Tiendo a usar rowClassName para adjuntar una clase a esta fila y luego anular el estilo predeterminado con css.

losEl componente no admite el suministro de la cantidad de páginas directamente

Puede pasar un total falso. Por ejemplo, si desea 50 páginas, puede pasar total = pageSize * 50 .

muzea en 5 jun. 2019

Eso es realmente una buena noticia 🚀 El enfoque en el rendimiento es visible y eso es genial, porque algunos componentes no se pueden usar con grandes cantidades de datos.

¿Cómo desea implementar el desplazamiento virtual? ¿Estás usando react-window ?

¿Hay prioridades para las características de Mainly Target?
Me gustaría probar la selección virtual en la etapa alfa y creo que no estoy solo con respecto a este.

Gracias.

bend-up en 5 jun. 2019

👍6

¿Por qué el nombre de la cadena no se puede cargar a pedido? no reacciona lazy () resuelve el problema?

faradaytrs en 6 jun. 2019

@faradaytrs
Sí, pero depende de las características de webpack , operaciones específicas

Dos problemas son más prominentes

/* webpackChunkName: "icons/icon-" */ escrito en webpack siempre Magic Comments
Como decía el original, "Cada icono contiene información adicional del módulo Webpack además del contenido del icono"

muzea en 6 jun. 2019

👎1

¿Alguna idea sobre la contaminación de estilo global? # 4331 # 9363

wangjianio en 9 jun. 2019

👍30 😕3

¿Alguna idea sobre la contaminación de estilo global? # 4331 # 9363

En mi humilde opinión, sería genial para 4.0 permitir a los usuarios buscar estilos antdesign bajo un nombre global (ver mi comentario https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

abenhamdine en 9 jun. 2019

👍6

¡Es genial saber sobre el próximo hito!

Mi 2 Ct. con respecto a los documentos y la optimización:

A menudo hay accesorios que se pasan a los elementos DOM subyacentes, que no están documentados (IIRC en algunos casos, todos los accesorios que no son seleccionados por la implementación del componente se pasan). Sería muy útil tenerlos documentados, agrupados por elemento de destino (puede que haya más de uno): "Los siguientes accesorios se pasan al contenedor

"o" Los siguientes accesorios se pasan a través del elemento ... "o" Todos los demás accesorios se pasan a ... ". Para esos accesorios no es necesario una explicación detallada, los enlaces a MDN podrían ser suficientes.

Tal cambio también sería genial para nosotros, los desarrolladores de TypeScript, actualmente es mucho trabajo tedioso mantener la definición de TS actualizada en este sentido.

En el "estándar de API para desarrolladores", esto debe estar documentado, y debe haber una decisión sobre qué accesorios deben pasarse siempre (className, id,?)

sbusch en 11 jun. 2019

Otra pregunta:

¿Está planeando cambiar más archivos (o incluso componentes rc) de JavaScript con definiciones de TypeScript a TypeScript nativo?

sbusch en 11 jun. 2019

Considere reemplazar rc-form con algo más flexible, como Formik.

iamvanja en 12 jun. 2019

👎7 👍6

Pregunta para los mantenedores:

Mi equipo está interesado en probar Ant, pero https://github.com/ant-design/ant-design/issues/11097 (Antd Less crea fugas globales de JavaScript) nos está bloqueando. La hoja de ruta anterior dice que Ant se moverá a MENOS versión 3, y he leído que la característica de JavaScript insegura y obsoleta en línea en cuestión está deshabilitada de forma predeterminada. ¿Significa esto que Ant versión 4 ya no tendrá el problema MENOS?

kaiyoma en 15 jun. 2019

👍5

No solo IE9 / 10, sino que detiene el soporte de IE,

wanliyunyan en 19 jun. 2019

👍6 🎉5 😄5 👎4

Oh Dios, sería muy útil no contaminar los estilos globales ( html , body , *::before , ...)

and-semakin en 20 jun. 2019

👍10

El carrusel basado en react-slick tiene muchos problemas al usarlo. Se recomienda que la nueva versión se pueda reemplazar con otra biblioteca
react-pannable es bastante bueno de usar

cztflove en 26 jun. 2019

👎1 👍1

La descripción de las confirmaciones de @cztflove esta biblioteca es todo no message 😃, y la atención de la comunidad es demasiado baja, no debería considerarlo.

yoyo837 en 26 jun. 2019

@ yoyo837 El componente principal de virtual list y 仿ios边缘弹性 , según este componente, se pueden realizar algunas funciones 拖拽 🤔 Hay más espacio para la expansión en el futuro

cztflove en 26 jun. 2019

👍2

¿No deberíamos migrar a un idioma universal?

Estoy completamente de acuerdo y respeto los idiomas regionales, incluso si no soy un hablante nativo de inglés. Hay cientos de tareas repetitivas, o mejor dicho duplicadas con doble lenguaje, sobre todo el factor más importante es el tiempo, la traducción de cadenas discutidas, el aprendizaje de documentación o tuts. demostraciones, etc.

Debo admitir que no faltan colaboradores debido a conflictos de idioma, todavía cientos de nosotros tenemos miedo de involucrarnos. Ya hay muchos sprints, problemas en curso para la traducción, pero lo que solicito es migrar por completo a un idioma universal con este lanzamiento importante para reducir la brecha de comunicación entre todos nosotros.

asharamseervi en 29 jun. 2019

👍8 😕1

¿No deberíamos migrar a un idioma universal?
Estoy completamente de acuerdo y respeto los idiomas regionales, incluso si no soy un hablante nativo de inglés. Hay cientos de tareas repetitivas, o mejor dicho duplicadas con doble lenguaje, sobre todo el factor más importante es el tiempo, la traducción de cadenas discutidas, el aprendizaje de documentación o tuts. demostraciones, etc.
Debo admitir que no faltan colaboradores debido a conflictos de idioma, todavía cientos de nosotros tenemos miedo de involucrarnos. Ya hay muchos sprints, problemas en curso para la traducción, pero lo que solicito es migrar completamente a un idioma universal con este lanzamiento importante para _reducir la brecha de comunicación_ entre todos nosotros.

说得对，专心说中文吧

faradaytrs en 30 jun. 2019

👍2

Pregunta para los mantenedores: ¿hay un plan para usar CSS vars para cambiar el color y los temas de estilo en el vuelo?

Aprendí en la práctica que cambiar los estilos de los componentes a través de variables es una forma muy cómoda. Intenté reescribir las variables Less con var(--css-vars) , pero encontré muchos errores en las compilaciones de estilos, porque muchos estilos usan funciones y operaciones con vars, no solo valores. Supongo que es una gran tarea y de esta manera crear cambios importantes, pero las versiones principales se han creado para cambios importantes :) Y el uso de CSS vars puede brindar muchas oportunidades para personalizar los estilos de los componentes.

¿Lo que piensas de eso? Planeé desarrollar el tema con el uso de CSS vars como solicitud de extracción de todos modos, porque esta función (cambiar el tema en el vuelo) es necesaria en mi proyecto.

Lo siento, si esa sugerencia está duplicada, pero no encontré nada al respecto en otros números y relaciones públicas.

Z3SA en 2 jul. 2019

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Esto debe detener todo el soporte de IE, detener el soporte de IE11 es demasiado radical, aunque también apoyo hacerlo.

yoyo837 en 2 jul. 2019

@ yoyo837 , estoy de acuerdo en que es una causa demasiado radical de problemas de soporte de IE. Pero también Ant Design tiene soporte oficial (como se dice en ant.design) de Electron (como plataforma separada, no web). Puede ser que para este caso haya una forma de crear dos temas: uno con Less vars, otro con CSS vars. Pero parece demasiado difícil de soportar.

Entonces, otra posible estrategia que supongo: crear Less vars para todos los atributos personalizables en Less, o eliminar el uso de funciones y operaciones en Less vars que cualquier desarrollador pueda usar como entrada para sus vars CSS. O si lo dice más simple, use Less vars solo como contenedor de valor, no para funciones y operaciones.

Z3SA en 2 jul. 2019

Si solo es compatible con los principales navegadores, creo que el tamaño del código será más pequeño y el código será más fácil de mantener.

wanliyunyan en 3 jul. 2019

👍2

No solo IE9 / 10, sino que detiene el soporte de IE,

@wanliyunyan Demasiado rompiendo. Algunos desarrolladores pueden quedarse con antd @ 3 y eso no es bueno para nosotros.

dancerphil en 3 jul. 2019

@ Z3SA Eso será un gran trabajo.

yoyo837 en 3 jul. 2019

@dancerphil Afortunadamente, solo considero la última versión de Chrome para mi proyecto. 😃 Así que espero que cuanto menor sea el tamaño, mejor.

wanliyunyan en 3 jul. 2019

@ yoyo837 Lo sé. Y lo haré yo mismo si esta idea no recibe suficiente atención.

Z3SA en 3 jul. 2019

Somos una empresa a la que le encantaría migrar gradualmente a antd utilizando componentes individuales; Sin embargo, el uso de estilos globales por parte de la hormiga realmente complica este problema. Deje de contaminar los estilos globales.

jmackay-hippocmms en 6 jul. 2019

👍6

La forma es uno de los componentes más utilizados. Notamos que las redes sociales tienen muchos comentarios sobre el diseño de la API. Deseamos simplificar la API en 4.0:

Fom.Item incluirá el enlace de campo.

¿Estos cambios aún nos permitirán usar Form.Item como un componente estrictamente de presentación? Me encantan los componentes de antd, pero prefiero react-final-form para la gestión estatal. Quiero el estilo de Form.Item y nada de la lógica de gestión del estado.

jmackay-hippocmms en 6 jul. 2019

👍3

Se crea la rama 4.0. ¿Cuándo puedo obtener una vista previa?

jeessy2 en 10 jul. 2019

¡el nuevo componente de formulario es increíble!

fxxjdedd en 16 jul. 2019

👍4

Reemplace momentjs por dayjs ya que momentjs es enorme y el tamaño del paquete también se volvió enorme.

ViktorAksionov en 17 jul. 2019

👍24

¿Existe algún problema al considerar hacerse cargo del editor de texto enriquecido?

XUANLANcognition en 18 jul. 2019

¿Cuál es la fecha de lanzamiento?

rafaelodassi en 19 jul. 2019

@rafaelodassi Aún no hay una fecha confirmada, pero probablemente en el cuarto trimestre.

ztplz en 21 jul. 2019

🎉1

Actualizar a @babel/runtime@7 y core-js@3 sería nuestra prioridad.

afc163 en 22 jul. 2019

🎉3

¿No v3? ¿Hay alguna novedad para core-js@4 ?

yoyo837 en 22 jul. 2019

😄1

Todos hablan de eliminar por completo el soporte de IE porque las estadísticas muestran que apenas se usa. ¿Qué hay de los millones de usuarios corporativos detrás de la intranet que no acceden a las estadísticas en absoluto? Están atrapados con IE10 e IE11 debido a las políticas corporativas.

Me quedaré con

filipjnc en 23 jul. 2019

👍10 👎4

Sugeriría introducir una API para permitir el uso de objetos como valores <Select/> .
para obtener más detalles, consulte https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

SergeyVolynkin en 25 jul. 2019

Se recomienda que cada componente tenga su propio registro de actualización. No importa si lo mantiene oculto, sugerencia personal ~

redclown en 27 jul. 2019

👍1

¿Cuándo puede ser posible Release o RC?

fwh1990 en 27 jul. 2019

👍1

Se recomienda que cada componente tenga su propio registro de actualización. No importa si lo mantiene oculto, sugerencia personal ~

De acuerdo, si la documentación de cada componente se puede agregar por qué versión. De lo contrario, puede ver la documentación y ver si se puede usar la versión actual y si actualizar las dependencias.

_{Enviado con GitHawk}

jas0ncn en 28 jul. 2019

@ fwh1990 @ jas0ncn @redclown
en inglés por favor)

akaguny en 29 jul. 2019

👍7

Mantenlo como un canal en inglés, gracias ~

ztplz en 30 jul. 2019

👍2

Se publicó 4.0 alpha. Eso es increíble. Vamos hermano.

Refactorizaré mi proyecto una vez que publique la versión

fwh1990 en 31 jul. 2019

👀1

El tema predeterminado de antd es hermoso, pero también puede ser mejor.
Para mayor legibilidad, considere el contraste mejorado y use texto más grande.

Hay tantos artículos y herramientas.
https://www.google.com/search?q=web+readability

Airkro en 1 ago. 2019

❤1

Es mejor proporcionar un script para migrar antd v3 a v4.

En el proyecto biz, existen demasiados componentes de formulario. Migrar antd v3 a v4 costará demasiadas veces.

El equipo de react-relay ha hecho algo similar.
Si desea migrar react-relay v3 a react-relay v4 Realease , necesita modificar muchos archivos.
Por lo tanto, usan jscodeshift para escribir un script de migración, de modo que el usuario de react-relay pueda migrar fácilmente react-relay v3 a v4.

xyy94813 en 1 ago. 2019

👍2

Siento que es difícil sobreescribir algunos de los estilos. Entonces, ¿hay un plan para mejorar eso?

Personalmente, prefiero usar CSS-en-JS, es muy flexible y encaja increíblemente bien con React.

FuJuntao en 2 ago. 2019

👍5

Cuando se usa el componente de clase por debajo de 4.0 alfa, no se puede obtener la entidad de formulario, https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn El código de muestra en este enlace no se puede implementar y no hay entidad en formRef método

Resuelto en

Kwei9 en 6 ago. 2019

@ Kwei9 , ¿puedes abrir un problema y adjuntarlo para reproducirlo?Déjame ver

zombieJ en 6 ago. 2019

@ Kwei9 , ¿puedes abrir un problema y adjuntarlo para reproducirlo?Déjame ver

La escritura de referencia se cambia a esta solución

Kwei9 en 6 ago. 2019

¡Creo que ahora sería el momento de abordar la contaminación del estilo global! ¡Esto hace que sea muy necesario usar antd junto con otras aplicaciones!

ChuckJonas en 7 ago. 2019

👍16 ❤4 👎1

Moment es demasiado grande para el proyecto front-end, hay muchas alternativas, pero los accesorios de TimePicker y DatePicker se relacionan con Moment. Nos lleva a no poder reemplazar el momento ...

@ jas0ncn Hola, considere reemplazar momentjs por dayjs (una alternativa de 2kb). Este ya es un problema probado de Replace Moment.js en Ant Design (Antd) con Day.js https://github.com/iamkun/dayjs/issues/529 y funciona realmente bien.

Como mantenedor central de dayjs, estamos dispuestos a ofrecer cualquier ayuda con este reemplazo.

Gracias.

请考虑使用轻量的 Dayjs 来替换 moment.js ，在这里已经充分测试过替换的可行性https://github.com/iamkun/dayjs/issues/529 。

xxyuk en 8 ago. 2019

👍34 ❤12

La forma antigua de uso del icono será * obsoleta *:
import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);
Utilizará la importación de un solo icono en lugar de 4.0:
// Directly import
import SmileOutline from 'antd/icons/SmileOutline';

// If tree-shaking supported
import { SmileOutline } from 'antd/icons';

const Demo = () => (
  <div>
    <SmileOutline />
    <Button icon={<SmileOutline />} />
  </div>
);
Tengo una idea sobre la nueva referencia de ícono. Debido a la nueva redacción anterior, cada ícono es equivalente a un componente separado. Por ejemplo, la introducción de un ícono de carga podría verse así:

import Loading from 'antd/icons/Loading';

<Loading />

Pero normalmente usted mismo puede encapsular un componente de carga real. En el pasado, <Icon /> sabía que era un icono de un vistazo. Ahora ocupa demasiados nombres y quiero saber que el icono tiene que subir para encontrar el lugar de importación.
como:

<Title />
<Loading />
<Sun />

A primera vista, parece que los dos siguientes no pueden verse como íconos (por supuesto, no tiene ningún efecto en la ejecución del código ~)
Si cambia a la siguiente redacción:

 import {Icon} from 'antd';
 import {Loading, Sun} from '@antd/icons';  

<Icon spec={Loading}  {...otherProps}/>
<Icon spec={Sun} />

A través de la capa exterior de pan, se ve muy similar a la anterior, y también se puede utilizar bajo demanda, no es más que introducir un componente Icon.
¿Y si se cumplen ciertas convenciones, el icono definido por el usuario se puede pasar a través del atributo de especificación? Es equivalente a que antd ayude a definir muchos iconos de antemano, pero los definidos por el usuario son exactamente los mismos ~~~ (Solo di ~)

pd: ¿O es que este tipo de escritura en realidad se ha pensado durante mucho tiempo o no lo pensé porque tiene algunos problemas? . . 😂
Solo lo pensé. . .

ppbl en 14 ago. 2019

👍4

@ppbl es similar a lo siguiente de acuerdo con su idea:

import Icon from '@antd/icons'; 
imoort { LoadingOutline } from '@antd/icons-svg';

<Icon component={LoadingOutline}  {...otherProps}/>

El nuevo icono también se genera de forma similar, consulte https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

¿Podemos evitar esta situación agregando prefijo / sufijo de icono al nombre de icono?

imoort { LoadingOutlineIcon } from '@antd/icons';

<LoadingOutlineIcon  {...otherProps}/>

vagusX en 14 ago. 2019

👍1

Trabaje para reducir el tamaño del paquete
https://github.com/ant-design/ant-design/issues/9419
Al importar Button agrega 95kb al proyecto, eso es simplemente inaceptable en 2019. 👎

avalanche1 en 14 ago. 2019

😕1

@vagusX ¿ Quizás pienso que el nombre es un poco largo? Siempre pienso que el nombre es conciso y parece un componente pequeño o un componente relativamente único. Si el nombre es demasiado largo, debería ser un componente grande (por supuesto, esto es un sentimiento incorrecto ~ lo sé). . ~

Por supuesto, si supiera que era un ícono solo porque quería ver <Icon /> , también podría hacer un componente <Icon /> por mí mismo y luego ajustar el ícono antd cuando lo use. El efecto es casi el mismo. ~ Siento que todos son íconos, y en realidad son un montón de nombres dispersos. Se siente un poco extraño. La diferencia es que solía conocer el ícono primero, luego el tipo. Ahora sé el tipo primero, y luego, oh, es un ícono ~

ppbl en 14 ago. 2019

@ avalanche1 puede echar un vistazo al resultado del análisis del paquete de este pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838, y el tamaño del componente Button declina claramente

vagusX en 14 ago. 2019

Bueno saber. Pero en sus capturas de pantalla no hay ninguna indicación del tamaño real, por lo que no puedo confirmar ni refutar.

avalanche1 en 15 ago. 2019

Voy a migrar Form a nuevas API, pero descubrí que la versión de field-form es inestable, por lo que quiero saber si obtendría cambios importantes con estas interfaces ahora en el futuro.

orzyyyy en 16 ago. 2019

@orzyyyy ,
Antd lanza la versión 4.0-alpha.x para que el voluntario social e interno la pruebe. Si no hay comentarios negativos de la versión alfa, esta API será la última en el lanzamiento.

zombieJ en 16 ago. 2019

👍3

@ avalanche1 @ant-design/icons v4-alpha versión admite la agitación de árboles, por lo que el tamaño del paquete depende de la cantidad de iconos que usó en su propio proyecto, si usa el componente antd que importa íconos internamente o si usa @ant-design/icons directamente, así que tal vez no pueda entender su preocupación sobre este punto.

vagusX en 16 ago. 2019

¿Por qué hablamos de íconos cuando mi publicación inicial fue sobre Button, Calendar y otros componentes? https://github.com/ant-design/ant-design/issues/9419

avalanche1 en 16 ago. 2019

El valor de DatePicker debe ser moment, ¿se puede eliminar el momento? Si actualizo el de, debo convertir al momento

jeessy2 en 18 ago. 2019

👍2

Para el moment , aquí está mi consideración. DatePicker todavía usa moment de forma predeterminada desde el requisito de compatibilidad, pero proporciona la función de fábrica para crear con otra biblioteca de fechas:

import DatePicker, { createPicker } from 'antd/lib/date-picker';

import dayjs from 'dayjs';

const basicDemo = <DatePicker />

const MyDatePicker = createPicker(dayjs, {
  // Some proxy function, maybe can provided by default...
  format(dayObj, formatStr) {
    return ...;
  },
  parse(str, formatStr) {
    return ...;
  },
});

const dayDemo = <MyDatePicker />;

Solo pensé, bienvenida a la discusión.

zombieJ en 19 ago. 2019

👍6

¡Ahora es el momento de deshacerse de moment.js !

Moment.js nunca se modificará debido a su compleja API OOP. (Tendrían que volver a escribirlo desde cero). Es una sobrecarga enorme para antd y los usuarios.
Ant Design v4 es una versión importante con cambios importantes ya. ¡Ahora es el momento!
Sugiero no reemplazarlo con otra biblioteca. Antd podría usar algo pequeño como dayjs o date-fns internamente, pero debería aceptar objetos o cadenas nativas Date para sus componentes.

Cada vez que llamas moment() , un cachorro muere ...

:perro:

onury en 21 ago. 2019

👍38 👀1 ❤1 👎1

@zombieJ quisiera saber cómo está progresando el componente Table. ¿Hay una versión de vista previa como Form disponible? Casi vomito sangre en total

Liu-Ya en 21 ago. 2019

¿La versión alfa ya incluye la nueva tabla? Si es así, ¿el sitio web de vista previa debería contener un ejemplo?

ArthurBrito en 21 ago. 2019

La tabla está en la cola, actualmente estoy trabajando en la lista virtual.

zombieJ en 21 ago. 2019

👍9 ❤4

¿Qué pasa con la compatibilidad con componentes de estilo?

khryshyn en 24 ago. 2019

👎3 👍1

Los valores iniciales del formulario no establecen moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

hengkx en 24 ago. 2019

👍1

Espero que Form pueda proporcionar una versión no controlada para resolver los problemas de rendimiento de formularios grandes como Excel

zoffyzhang en 26 ago. 2019

¿Existe alguna posibilidad de que la documentación alfa se pueda mover al sitio de documentación de Ant regular?

Mi empleador bloquea los dominios de Netlify y supongo que otros también podrían hacerlo.

hannaofsweden en 4 sept. 2019

👍1

¿Algún plan concreto para admitir el funcionamiento del teclado sobre el menú y el menú desplegable?

wattlebird en 9 sept. 2019

¿Existe alguna posibilidad de que la documentación alfa se pueda mover al sitio de documentación de Ant regular?
Mi empleador bloquea los dominios de Netlify y supongo que otros también podrían hacerlo.

¿por qué? jajaja

lu-zen en 10 sept. 2019

Se espera que el componente Table se parezca al componente Table de Element. Cada columna establecerá automáticamente un ancho primero. Se sugiere que el carácter del encabezado de la tabla se cambie a min-width en lugar de cambiar de línea. Se espera que el plegado y las funciones de desplazamiento se pueden utilizar simultáneamente. Se espera que la tabla en forma de árbol se parezca a TreeSelect cuando se realicen múltiples elecciones.

Espero que el componente Table pueda ser como el componente Table de Element. Cada columna establecerá automáticamente un ancho primero. Se recomienda cambiar el carácter del encabezado de la tabla a min-width sin ajustar. Espero que la función de plegado y la función de desplazamiento se puedan usar al mismo tiempo. Espero que la tabla de árbol se use cuando se seleccionen múltiples , Puede ser similar a TreeSelect

z5829984520 en 11 sept. 2019

👍3

¿Alguna posibilidad de que con v4 o tal vez v5 hagas algo sobre la personalización? MaterialUI es mucho más fácil de personalizar, lo que lo convierte en una opción para el proyecto en el que estoy trabajando, incluso si realmente me gustaría usar AntD, ya que es mucho más completo, etc.
Por favor, deje caer menos para algo mejor para personalizar.

murbanowicz en 18 sept. 2019

👍5 👎1

Después de permitir que una agencia probara nuestra aplicación web antd, identificaron fallas de accesibilidad graves y obtuvimos la peor calificación posible. Al investigar las razones principales, se reduce a los siguientes componentes rc:

rc-select (tuvimos que reemplazar con Downshift y aplicar estilos antd en la parte superior)
rc-tabs (ver # 18798)
y tal vez otros que no usamos hasta ahora

¿Qué tan grande es la gobernanza que tiene antd sobre los componentes rc y podría el equipo arreglar esto de manera oportuna para la versión 4.0? La accesibilidad siempre estará relativamente despriorizada, pero la verdad es que es cada vez más difícil ignorarla a medida que las empresas se vuelven legalmente obligadas a proporcionar aplicaciones accesibles a los empleados / clientes.

Puede contar conmigo para realizar pruebas exhaustivas con lectores de pantalla y evaluaciones comparativas con las mejores prácticas.

filipjnc en 19 sept. 2019

👍1

MaterialUI es mucho más fácil de personalizar

@murbanowicz, ¿ podrías

abenhamdine en 19 sept. 2019

@abenhamdine ¡ No hay problema!
En MUI hay un ThemeProvider que envuelve tu aplicación y configuras todo el tema solo con el objeto JS que está escrito en TypeScript, por lo que es muy agradable trabajar con él.

En AntD para personalizar, debe meterse con LESS o SASS (con algunos complementos), por lo que debe mantener otros departamentos, etc., debe pasar por la fuente de los componentes para encontrar la variable que desea cambiar para un componente específico, etc.
Además, no hay una buena manera de cambiar el tema en tiempo de ejecución, que es tan fácil con MUI, simplemente cambiando el objeto JS que se puede obtener fácilmente del servidor, etc.

Básicamente, cuando busca la personalización de AntD y MUI, encuentra ejemplos fáciles en MUI porque no hay nada de qué hablar, ya que es sencillo, pero cuando busca en Google la personalización de AntD, encuentra muchas soluciones hacky, etc.

Me encanta AntD por sus completnes y tantos componentes geniales, pero la personalización es realmente mala y, según mi experiencia y hablar con otros desarrolladores, debería ser uno de los puntos clave en la hoja de ruta.

murbanowicz en 19 sept. 2019

👍6

@abenhamdine ¡ No hay problema!
En MUI hay un ThemeProvider que envuelve tu aplicación y configuras todo el tema solo con el objeto JS que está escrito en TypeScript, por lo que es muy agradable trabajar con él.
En AntD para personalizar, debe meterse con LESS o SASS (con algunos complementos), por lo que debe mantener otros departamentos, etc., debe pasar por la fuente de los componentes para encontrar la variable que desea cambiar para un componente específico, etc.
Además, no hay una buena manera de cambiar el tema en tiempo de ejecución, que es tan fácil con MUI, simplemente cambiando el objeto JS que se puede obtener fácilmente del servidor, etc.
Básicamente, cuando busca la personalización de AntD y MUI, encuentra ejemplos fáciles en MUI porque no hay nada de qué hablar, ya que es sencillo, pero cuando busca en Google la personalización de AntD, encuentra muchas soluciones hacky, etc.
Me encanta AntD por sus completnes y tantos componentes geniales, pero la personalización es realmente mala y, según mi experiencia y hablar con otros desarrolladores, debería ser uno de los puntos clave en la hoja de ruta.

explicación clara y precisa, gracias!

abenhamdine en 19 sept. 2019

👍3

@abenhamdine ¡ No hay problema!
En MUI hay un ThemeProvider que envuelve tu aplicación y configuras todo el tema solo con el objeto JS que está escrito en TypeScript, por lo que es muy agradable trabajar con él.
En AntD para personalizar, debe meterse con LESS o SASS (con algunos complementos), por lo que debe mantener otros departamentos, etc., debe pasar por la fuente de los componentes para encontrar la variable que desea cambiar para un componente específico, etc.
Además, no hay una buena manera de cambiar el tema en tiempo de ejecución, que es tan fácil con MUI, simplemente cambiando el objeto JS que se puede obtener fácilmente del servidor, etc.
Básicamente, cuando busca la personalización de AntD y MUI, encuentra ejemplos fáciles en MUI porque no hay nada de qué hablar, ya que es sencillo, pero cuando busca en Google la personalización de AntD, encuentra muchas soluciones hacky, etc.
Me encanta AntD por sus completnes y tantos componentes geniales, pero la personalización es realmente mala y, según mi experiencia y hablar con otros desarrolladores, debería ser uno de los puntos clave en la hoja de ruta.

Estoy de acuerdo con @murbanowicz en que la personalización con Antd puede volverse un poco desordenada (fuga de estilo global, forma hacky de usar Sass, conflictos de prioridad entre anulaciones de estilo, bastantes dependencias externas como moment conducen a un tamaño de paquete enorme ), pero habiendo usado MUI durante mucho tiempo, encuentro a Antd mucho más personalizable.

No estoy actualizado con las nuevas versiones de MUI, pero la última vez que verifiqué, había parte de los componentes que no pudo personalizar, ya que MUI usa styled-components , si los desarrolladores no agregaron classNames todas partes, no puede simplemente seleccionar el className exacto del componente y anularlo con su propio estilo.
La tematización es genial para el uso directo de una biblioteca, pero si desea adaptar el estilo a su sistema de diseño, es muy complicado con MUI, a veces incluso imposible;)

Pero aún así, antd hecho necesita algo de trabajo para facilitar la experiencia de personalización;)

pybuche en 19 sept. 2019

👍4

@filipjnc ,
rc-select versión alfa publicada que mejora la accesibilidad. Puedes ayudar a probar eso. Y la rama de preparación v4 la ha usado, puede ver la vista previa en la parte superior.
Por rc-tabs , ya que no está en la máxima prioridad, también lo mejoraré, pero más adelante.

zombieJ en 20 sept. 2019

@zombieJ bien, rc-select alpha.

Aunque rc-tabs no es una prioridad, ¿pueden echar un vistazo a mi solicitud de extracción, donde soluciono los puntos más críticos de los resultados de nuestras pruebas de accesibilidad?

filipjnc en 20 sept. 2019

Tengo un problema aquí. Según el método actual de reforma de íconos, si hay un formulario e ícono de componente
Solo se puede dar uno de los alias cuando se introduce el formulario al mismo tiempo

zkwolf en 25 sept. 2019

👎1

@zkwolf Sí, cambiamos el nombre del icono: https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

afc163 en 25 sept. 2019

👎1

Me gustaría mucho que se aborde el problema con la repetición

avalanche1 en 30 sept. 2019

👍1

Tenga en cuenta que en https://next.ant.design los componentes no están ordenados alfabéticamente en la barra lateral de componentes
Schermata 2019-09-30 alle 18 01 03

avalanche1 en 30 sept. 2019

👍1

Como sabrá, el diseño de hormigas no funciona muy bien en términos de accesibilidad. Esto no es demasiado visible en la superficie para la mayoría de las personas, pero es un gran problema cuando se sumerge más profundo. Vea cómo el diseño de hormigas está obteniendo muy mal puntaje aquí: https://darekkay.com/blog/accessible-ui-frameworks/

La buena noticia es que, dado que amo mucho el diseño de hormigas y quiero usarlo más para proyectos empresariales, mi objetivo es llevarlo al principio de la lista.

Dejo que una agencia pruebe una de mis aplicaciones empresariales para un cliente en Alemania (donde la accesibilidad es un tema muy importante en las grandes empresas). Las cosas más críticas fueron:

Accesibilidad del lector de pantalla para componentes básicos pero cruciales como Seleccionar, Autocompletar y Pestañas
Contrastes de color en muchos lugares
Navegación por teclado en algunos lugares

Elegí rc-tabs primero como una ganancia rápida para solucionar todos sus problemas de accesibilidad; debería estar disponible pronto (https://github.com/react-component/tabs/pull/218). Pero lo que más me preocupa es rc-select , especialmente la parte del cuadro combinado (autocompletar). Los cuadros combinados son uno de los aspectos más complicados de la accesibilidad del lector de pantalla y es fácil equivocarse. Para solucionar todos los problemas, no solo se requieren algunos ajustes en las propiedades de aria, sino también una gran revisión.

Para solucionarlo rápidamente en mi aplicación antes de la puesta en marcha, reemplacé la función Seleccionar y Autocompletar de ant-design ( rc-select ) con mis propios componentes basados en https://github.com/downshift-js/downshift. Acabo de replicar las mejores prácticas de ARIA y apliqué estilos antd en la parte superior: se ve casi exactamente igual y es perfectamente accesible.

Entonces, la pregunta provocativa es: ¿consideraría no hacer el doble trabajo y desaprobar rc-select a favor de la biblioteca downshift más popular y completa? Podría ahorrar algo de tiempo en el equipo y centrarse en perfeccionar los otros componentes centrales, que no tienen buenas alternativas en el mercado de código abierto.

filipjnc en 4 oct. 2019

👍13 ❤2 🎉1

Esta idea me parece fantástica @filipjnc . Además, el cambio descendente es 1/4 del tamaño de rc-select. Espero que el equipo antd pueda hacer esto.

ArthurBrito en 4 oct. 2019

👍3

Me encantaría ver más mejoras de colores en la versión 4.0. Específicamente, los documentos mencionan una “Paleta de colores de visualización de datos (próximamente)” que sería muy útil en tableros de control y otras aplicaciones de datos pesados. Los grises cálidos y fríos también ayudarían a construir paletas de colores más cohesivas. Además, es una buena oportunidad para corregir el contraste de color para la accesibilidad (como lo menciona @filipjnc). Sigan con el buen trabajo 👍

jlarmstrongiv en 4 oct. 2019

Como sabrá, el diseño de hormigas no funciona muy bien en términos de accesibilidad. Esto no es demasiado visible en la superficie para la mayoría de las personas, pero es un gran problema cuando se sumerge más profundo. Vea cómo el diseño de hormigas está obteniendo muy mal puntaje aquí: https://darekkay.com/blog/accessible-ui-frameworks/
La buena noticia es que, dado que amo mucho el diseño de hormigas y quiero usarlo más para proyectos empresariales, mi objetivo es llevarlo al principio de la lista.
Dejo que una agencia pruebe una de mis aplicaciones empresariales para un cliente en Alemania (donde la accesibilidad es un tema muy importante en las grandes empresas). Las cosas más críticas fueron:
1. Screen reader accessibility for basic but crucial components like Select, Autocomplete and Tabs

2. Color contrasts in many places

3. Keyboard navigation in some places
Elegí rc-tabs primero como una solución rápida para solucionar todos sus problemas de accesibilidad; debería salir pronto ( react-component / tabs # 218 ). Pero lo que más me preocupa es rc-select , especialmente la parte del cuadro combinado (autocompletar). Los cuadros combinados son uno de los aspectos más complicados de la accesibilidad del lector de pantalla y es fácil equivocarse. Para solucionar todos los problemas, no solo se requieren algunos ajustes en las propiedades de aria, sino también una gran revisión.
Para solucionarlo rápidamente en mi aplicación antes de la puesta en marcha, reemplacé la función Seleccionar y Autocompletar de ant-design ( rc-select ) con mis propios componentes basados en https://github.com/downshift-js/downshift. Acabo de replicar las mejores prácticas de ARIA y apliqué estilos antd en la parte superior: se ve casi exactamente igual y es perfectamente accesible.
Entonces, la pregunta provocativa es: ¿consideraría no hacer el doble trabajo y desaprobar rc-select a favor de la biblioteca downshift más popular y completa? Podría ahorrar algo de tiempo en el equipo y centrarse en perfeccionar los otros componentes centrales, que no tienen buenas alternativas en el mercado de código abierto.

No estaría tan entusiasmado con el cambio descendente, consulte https://github.com/downshift-js/downshift/issues/730
La accesibilidad es importante para algunos usuarios, pero el rendimiento es importante incluso para más usuarios.

abenhamdine en 5 oct. 2019

👀1

La tabla está en la cola, actualmente estoy trabajando en la lista virtual.

hola @zombieJ
¿Hay algún progreso en el resumen de pie de página?

alexchen1875 en 8 oct. 2019

@ alexchen1875 ,
Pendiente de nueva actualización del código del ciclo de vida. La tabla es la siguiente después de hecho :)

zombieJ en 8 oct. 2019

👍2 ❤1

4.0 ¿Se pueden cambiar algunos parámetros de accesorios a camel case? Por ejemplo, Input.TextArea en autosize cambia a autoSize ?
Los accesorios de las etiquetas HTML nativas en React son todos mayúsculas, como <input autoComplete /> , este autosize siempre parece discordante. . .

jinliming2 en 9 oct. 2019

👍7 👎1

Se puede cambiar en 3.x, compatible y descartar el uso original. @ jinliming2 ¿ Estás interesado en un PR?

afc163 en 10 oct. 2019

👎1

4.0 ¿Por qué marcar los props.children de Tree como una API obsoleta y recomendar el método de datos puros de treeData? Siento que props.children es muy útil y muy jugable
ComponentWillReceiveProps ha sido marcado como obsoleto en la última API de react. En la actualidad, se encuentra que el componente table y el componente Animate todavía existen durante la prueba.

itlangzi en 14 oct. 2019

👎1

+1 para accesibilidad. ¡Por favor!

timkindberg en 18 oct. 2019

Hablando del problema del tamaño del ícono transparente, parece que el ícono de otros componentes es de 12 px y el selector de fecha es de 14 px. ¿Se tiene en cuenta la diferencia entre el tamaño de otros componentes transparente y el ícono de sufijo o es porque el selector de fecha es el interruptor de ícono y tiene 14 px?¿Tiene algún plan para unificar el tamaño

zkwolf en 19 oct. 2019

👎1

@zombieJ planea agregar ordenación de varias columnas en la tabla

Nokecy en 23 oct. 2019

👎1

por favor escriba en inglés

akaguny en 23 oct. 2019

👍15 ❤5 👀3 😄2 😕1 👎1

¿Se solucionará el problema del tamaño de momento demasiado grande?

swaitw en 24 oct. 2019

👎1

¿Se solucionará el problema del tamaño de momento demasiado grande?

Intente usar dayjs primero

fatelei en 24 oct. 2019

👍6 👎1

¿Puede ser en inglés? Considere considerar los sentimientos de los extranjeros. Yo siempre traduzco en Google. No es importante que el estándar gramatical no sea estándar. Las palabras pueden ser entendidas por ellos.

wanliyunyan en 24 oct. 2019

👎3

@ afc163
¿Has considerado que los extranjeros están siguiendo este repositorio? Desafortunadamente, Google Translate no es una buena herramienta para comprender lo que está diciendo. Me doy cuenta de que la mayoría de los desarrolladores y usuarios de Ant-Design son chinos, pero ¿tú también consideras que no son chinos?
Por lo tanto, les insto a que utilicen el lenguaje internacional para respetarnos a todos.

lvlohammadi en 24 oct. 2019

👍19 ❤7 👎6

Hola,
Quería probar Ant Design 4.0 con create-react-app y Typescript.
Seguí las instrucciones en https://next.ant.design/docs/react/introduce pero no puedo obtener una aplicación que funcione.
La instrucción básica seguida ( import Button from 'antd/es/button'; ) para create-react-app provoca un error:

no puedo encontrar el botón antd / es / del módulo

Después de agregar react-app-rewired, personalizar-cra, babel-plugin-import y cambiar la importación a import {Button} from 'antd' , aparece un mensaje de error:

No se pudo encontrar un archivo de declaración para el módulo 'antd'

¿Puede darme un consejo sobre cómo hacer que antd4 funcione con crea-react-app y mecanografiado, por favor?

gynekolog en 24 oct. 2019

@gynekolog ,
Compruebe si node_modules instaló correctamente.

ref https://codesandbox.io/s/cool-paper-4y1u7

zombieJ en 24 oct. 2019

@lvlohammadi Desafortunadamente, algunos chinos como yo no son lo suficientemente buenos en inglés, pero haré todo lo posible por usar el idioma internacional para participar en la comunicación comunitaria.

yoyo837 en 25 oct. 2019

❤12

@gynekolog ,
Compruebe si node_modules instaló correctamente.
ref https://codesandbox.io/s/cool-paper-4y1u7

Tienes razón. Corro

yarn add "https://github.com/ant-design/ant-design.git#4.0-prepare"

en lugar

yarn add "[email protected]"

Vergüenza...
Gracias.

gynekolog en 25 oct. 2019

dropdownMatchSelectWidth on Select componente roto en versión alfa, efectivo en la versión anterior

GuichiZhao en 25 oct. 2019

Si voy a comenzar un nuevo proyecto usando antd, ¿elegiría la versión 3 o 4 alfa? ¿Qué tan "lista para la producción" está la versión 4? ¿Sigues buscando un lanzamiento en el cuarto trimestre?

thj-dk en 1 nov. 2019

👍1

Si voy a comenzar un nuevo proyecto usando antd, ¿elegiría la versión 3 o 4 alfa? ¿Qué tan "lista para la producción" está la versión 4? ¿Sigues buscando un lanzamiento en el cuarto trimestre?

Antd 4 aún no está listo para producción. Debe comenzar con antd 3, la transición debe ser fácil (especialmente si se proporcionan codificaciones como se esperaba).

abenhamdine en 1 nov. 2019

Espero ver una separación completa entre la lógica y la visualización, es decir, además de manipular los nombres de las clases, js no hace nada más en la vista. La apariencia visual debe ser manejada por CSS (MENOS). Además, en lugar de React Components, tal vez use Web Components para que los desarrolladores que no sean React puedan usarlo más fácilmente.

yeegr en 4 nov. 2019

👎2

Espero ver una separación completa entre la lógica y la visualización, es decir, además de manipular los nombres de las clases, js no hace nada más en la vista. La apariencia visual debe ser manejada por CSS (MENOS). Además, en lugar de React Components, tal vez use Web Components para que los desarrolladores que no sean React puedan usarlo más fácilmente.

Creo que esta idea de purificar todo no tiene sentido. Es mejor concentrarse en algo más importante.

faradaytrs en 5 nov. 2019

👍7

¿Algún plan para la selección múltiple en Autocompletar, como https://react-select.com?

nite en 5 nov. 2019

👍3 👀1

Espero ver una separación completa entre la lógica y la visualización, es decir, además de manipular los nombres de las clases, js no hace nada más en la vista. La apariencia visual debe ser manejada por CSS (MENOS). Además, en lugar de React Components, tal vez use Web Components para que los desarrolladores que no sean React puedan usarlo más fácilmente.
Creo que esta idea de purificar todo no tiene sentido. Es mejor concentrarse en algo más importante.

No creo que haya un asunto más urgente que la separación. En un equipo, CSS generalmente lo manejan los diseñadores, mientras que JS generalmente lo hacen los codificadores. Permitir que ambos manipulen el estilo conducirá al caos y a una pérdida innecesaria de tiempo de desarrollo.

Tome el menú, por ejemplo, el ancho y la altura predeterminados los establece JS, el problema es que cuando alguien quiere cambiar el ancho o la altura de la envoltura exterior, el menú sobresaldrá o tendrá espacios. Esto requeriría que tanto el diseñador como el codificador lo corrijan, lo que significa tiempo de inactividad.

Además, como componentes, el código no es demasiado complejo, la separación no debería requerir demasiado esfuerzo, pero el resultado facilitaría mucho la vida a los usuarios y al propio equipo de ant.design.

yeegr en 7 nov. 2019

Otro pequeño problema, Icon debe tener un tamaño predeterminado de 16 px, no 14 px, que es el tamaño de fuente predeterminado global. Esto significa que Icon debe usar variables como @ default-icon-size, @ icon-size-lg, etc., separadas del texto. Esto no es realmente un error, sino una característica perdida.

yeegr en 7 nov. 2019

👀1 🚀1

@ afc163
¿Has considerado que los extranjeros están siguiendo este repositorio? Desafortunadamente, Google Translate no es una buena herramienta para comprender lo que está diciendo. Me doy cuenta de que la mayoría de los desarrolladores y usuarios de Ant-Design son chinos, pero ¿tú también consideras que no son chinos?
Por lo tanto, les insto a que utilicen el lenguaje internacional para respetarnos a todos.

Las personas tienen derecho a usar su propio idioma y deben sentirse cómodas al hacerlo, y por mucho que respeto el esfuerzo de involucrar a la mayor audiencia posible proporcionando traducciones, nadie debe recibir una conferencia solo por usar el idioma con el que se siente más cómodo que el mantenedor entiende para comunicar. La idea de que los principales contribuyentes de este proyecto no deben usar su idioma nativo para comunicarse porque algún otro idioma es superior es más que absurda. Está bien pedir traducciones, pero con respeto. Votar negativamente las respuestas porque están en chino es contraproducente e infantil.

viztor en 9 nov. 2019

👍21 👎1

Amigos, ¿la versión 4.0 de And Design tiene JSS en lugar de _Less_ para generar CSS?

amerllica en 13 nov. 2019

Amigos, ¿la versión 4.0 de And Design tiene JSS en lugar de _Less_ para generar CSS?

AFAIK, no. Pero puede intentar usar componentes con estilo (por ejemplo) además de menos.

abenhamdine en 13 nov. 2019

👍2

Gracias, querido @ tomgao365 , creo el problema al que hiciste referencia. Quiero hacer un gran PR para eliminar Less completamente y usar JSS en su lugar. Trabajar en la versión 3 no es una buena idea, porque muchos proyectos se hicieron usando la versión 3, así que decidí trabajar en la implementación de JSS en la versión 4.

Además, tengo una pequeña pregunta, querido @abenhamdine , ¿cuál es tu idea de usar JSS en lugar de usar Less?

amerllica en 13 nov. 2019

Además, tengo una pequeña pregunta, querido @abenhamdine , ¿cuál es tu idea de usar JSS en lugar de usar Less?

Principales beneficios según mi:

estilo dinámico (dolor con menos)
autocompletado (no estoy seguro de ese, depende de qué herramientas / biblioteca JSS use)
herencia de estilos

vale la pena intentarlo.
Pero no es una panacea.

abenhamdine en 13 nov. 2019

Estimado @abenhamdine , dejo un problema que tiene la insignia Discussion . Es el # 19181.

Y quiero comenzar a implementar JSS y omitir Less, pero viene una nueva versión y temo que todos mis esfuerzos se desperdicien.

amerllica en 16 nov. 2019

Me alegra ver una discusión sobre la sustitución de moment.js por alguna alternativa como Day.js o el objeto Date nativo aquí https://github.com/ant-design/ant-design/issues/19738

xxyuk en 16 nov. 2019

😄2

¿Habrá una manera más fácil de cambiar los temas de color usando create-react-app en la versión 4?

flashtheman en 16 nov. 2019

Estoy de acuerdo con @flashtheman en que anular el tema sin el requisito de trabajar con menos variables sería bueno, es decir, algo como ThemeProvider de emotion: https://emotion.sh/docs/theming

hsz en 16 nov. 2019

👍2

En la era jQuery, la configuración del tema es muy popular y a los usuarios les gusta usarla.
He esperado una forma fácil de modificar el tema en el entorno de producción durante más de 2 años.

tomgao365 en 17 nov. 2019

👍4 👎3

En la nueva versión del componente de icono, si el icono se determina dinámicamente, ¿cómo se debe manejar en la nueva versión? Por el momento, solo puedo pensar en usar cadenas de variables require +. Resulta que solo el atributo type necesita ser llenado con variables. ¿Hay alguna otra forma de lidiar con eso?
traductor de google: en la nueva versión del componente de icono, si el icono se determina dinámicamente, entonces cómo tratarlo en la nueva versión, por el momento solo se puede pensar en la cadena require + variable, el original solo necesita llenar el atributo de tipo con variables, ¿qué otros métodos de procesamiento?

thding en 21 nov. 2019

En la nueva versión del componente de icono, si el icono se determina dinámicamente, ¿cómo se debe manejar en la nueva versión? Por el momento, solo puedo pensar en usar cadenas de variables require +. Resulta que solo el atributo type necesita ser llenado con variables. ¿Hay alguna otra forma de lidiar con eso?
traductor de google: en la nueva versión del componente de icono, si el icono se determina dinámicamente, entonces cómo tratarlo en la nueva versión, por el momento solo se puede pensar en la cadena require + variable, el original solo necesita llenar el atributo de tipo con variables, ¿qué otros métodos de procesamiento?

Intente usar https://github.com/smooth-code/loadable-components recomendados en la documentación de React

jinliming2 en 21 nov. 2019

¿Cuándo se lanzará la versión oficial?

guangming21 en 22 nov. 2019

4.0 ¿La tabla admite la función Pivot?

liuhaidi1209 en 28 nov. 2019

@ afc163 - Parece que la contaminación del estilo global es el problema número uno que la gente quiere con una nueva versión. ¿Tienes a alguien para trabajar en esto? Estaría feliz de hacer este trabajo y ayudar. No debería ser difícil, solo requerirá un poco de esfuerzo. También sufro de este problema con Ant Design. Me gustaría resolverlo.

meebix en 29 nov. 2019

👍9

¿Se está trabajando para reducir el tamaño de los componentes?
Por una vez: ¿por qué si quiero un Button simple, tengo que importar todo el archivo antd.css?

avalanche1 en 29 nov. 2019

¿Se está trabajando para reducir el tamaño de los componentes?
Por una vez: ¿por qué si quiero un Button simple, tengo que importar todo el archivo antd.css?

@ avalanche1 Consulte https://ant.design/docs/react/introduce#Usage

Utilice antd modularizado

jinliming2 en 30 nov. 2019

Para mí, un componente de carga no es suficiente para admitir la representación de listas personalizadas en la actualidad.
Además, el progreso de la carga es solo un porcentaje y no es conveniente expandirlo para admitir la visualización de la velocidad en tiempo real.

codetalks-new en 3 dic. 2019

@ banxi1988

https://github.com/ant-design/ant-design/blob/c824569ea0810e2cf11bc2953b333eb0e404fd1c/components/upload/interface.tsx#L47 -L52

Si desea una visualización de velocidad, onChange ha devuelto el porcentaje del archivo que se ha cargado. Puede calcular la velocidad de carga.

muzea en 3 dic. 2019

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Esto debe detener todo el soporte de IE, detener el soporte de IE11 es demasiado radical, aunque también apoyo hacerlo.

Aún puede hacer esto con soporte de reserva. Ej: color: var(--red, @red); Una simple búsqueda / reemplazo global para todas las variables actuales resolvería esto.

davidpanzarella en 5 dic. 2019

¿Se está considerando descartar LESS a favor de SASS u otra solución de estilo mejor para la v4 o no?

murbanowicz en 8 dic. 2019

@murbanowicz , Hola, gracias por tu comentario, dejo un problema sobre el uso de JSS lugar de Less y aquí, muestro mi disposición sobre esta migración, pero nadie muestra ninguna acción.

amerllica en 8 dic. 2019

Hola @zombieJ , gracias por tu gran trabajo en Ant Design. ¿Hay algún plan para proporcionar una forma lista para usar para alternar el tema oscuro en la aplicación?

veeral-patel en 8 dic. 2019

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.

shengliangli en 10 dic. 2019

👎8

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.

@shengliangli siente que el acoplamiento es demasiado fuerte. . .

jinliming2 en 10 dic. 2019

👎1

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.
@shengliangli siente que el acoplamiento es demasiado fuerte. . .

Creo que Form.Item es un componente "extra" agregado por antd para realizar la función de enlace de datos del componente Form. Hay razones para esta realización, pero después de todo, se agrega una cosa adicional. Así como todo el mundo critica el problema de demasiado código modular en redux, es posible que a los desarrolladores no les guste esta forma de escribir. Si la función de enlace de datos implementada por form.item puede entenderse como las características de los componentes de entrada, como Input, para mejorar las capacidades de los componentes de entrada, ¿se siente más natural?

También pensé en el problema del acoplamiento. La raíz del problema puede estar en cómo definimos las capacidades y características de comportamiento de los componentes de entrada.

shengliangli en 11 dic. 2019

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.
@shengliangli siente que el acoplamiento es demasiado fuerte. . .
Creo que Form.Item es un componente "extra" agregado por antd para realizar la función de enlace de datos del componente Form. Hay razones para esta realización, pero después de todo, se agrega una cosa adicional. Así como todo el mundo critica el problema de demasiado código modular en redux, es posible que a los desarrolladores no les guste esta forma de escribir. Si la función de enlace de datos implementada por form.item puede entenderse como las características de los componentes de entrada, como Input, para mejorar las capacidades de los componentes de entrada, ¿se siente más natural?
También pensé en el problema del acoplamiento. La raíz del problema puede estar en cómo definimos las capacidades y características de comportamiento de los componentes de entrada.

No estoy particularmente de acuerdo. Creo que Form.Item es principalmente un paquete externo de un componente, como los atributos de etiqueta y columna, que en realidad no son adecuados para componentes en línea.

dancerphil en 11 dic. 2019

Hola @zombieJ
¿Interesado en saber cuándo saldrá la versión 4?
Estoy deseando volver a escuchar

madurak en 11 dic. 2019

👀2

¿Cómo puedo contribuir al diseño también?
Buscando escuchar a alguien

ekeminimarkk001 en 12 dic. 2019

La versión beta.0 está disponible, ¿significa que se puede utilizar?

fwh1990 en 12 dic. 2019

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.

En primer lugar, debe saber que no tiene nada que ver con si está integrado o no. Se puede decir que el uso de los llamados componentes integrados es un accidente.
getFieldDecorator es el puente que conecta el componente de formulario y el componente de entrada. Form.item se pasa a los dos atributos value y onChange , y luego el componente envuelto pasa value y onChange Estos dos métodos de interfaz interactúan con el mundo exterior. En otras palabras, cualquier componente puede convertirse en un parámetro de getFieldDecorator siempre que se implementen value y onChange .Esta es la idea típica de program to interface

PD: no he leído el código fuente, todo lo anterior es mi suposición después de leer el documento

GuichiZhao en 12 dic. 2019

👍1

La razón por la que Form.Item puede interactuar con el Component subyacente no tiene nada que ver con algún mecanismo 'incorporado' como alguien espera. Es solo un truco común en el mundo de la programación llamado program to interface

Básicamente, el componente Form y el componente subyacente están de acuerdo en algo como value y onChange . Sirven como interfaz entre los dos mundos para comunicarse. Es un buen diseño con el propósito de desacoplar

@dancerphil Tal vez puedas aclarar la idea de manera más explícita en la documentación oficial

GuichiZhao en 12 dic. 2019

Hola a todos, se lanzó v4 beta. La API es estable ahora, lo que significa que no habrá cambios importantes en la API a menos que ocurra un problema crítico. Durante la versión beta, los diseñadores ayudarán a continuar con el ajuste del diseño visual de la IU y nos centraremos en la corrección de errores. y ayúdanos con el fuego o la retroalimentación.

Gracias a todos por participar en la codificación y la prueba. Tu ayuda significa mucho :)

Hola a todos, se ha lanzado la versión beta. Si la API no tiene problemas de diseño importantes, no se realizarán más cambios. En la versión beta, los diseñadores ayudarán a ajustar el estilo de la interfaz de usuario de la v4 y nos centraremos en las correcciones de errores. Bienvenido a ayudarnos a encontrar errores o tener cualquier otro comentario.

Gracias por participar en el trabajo de desarrollo y prueba. Tu ayuda es muy significativa :)

ref: http://new-issue.ant.design/

zombieJ en 12 dic. 2019

🎉9 ❤5 🚀3

¿Cómo puedo contribuir al diseño también?
Buscando escuchar a alguien

@ ekeminimarkk001 tal vez consulte: https://ant.design/docs/react/contributing

jinliming2 en 12 dic. 2019

@zombieJ ¿ implementado todos los cambios enumerados en el problema en la versión beta?

zachguo en 12 dic. 2019

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.
En primer lugar, debe saber que no tiene nada que ver con si está integrado o no. Se puede decir que el uso de los llamados componentes integrados es un accidente.
getFieldDecorator es el puente que conecta el componente de formulario y el componente de entrada. Form.item se pasa a los dos atributos value y onChange , y luego el componente envuelto pasa value y onChange Estos dos métodos de interfaz interactúan con el mundo exterior. En otras palabras, cualquier componente puede convertirse en un parámetro de getFieldDecorator siempre que se implementen value y onChange .Esta es la idea típica de program to interface
PD: no he leído el código fuente, todo lo anterior es mi suposición después de leer el documento

Después de leer sus respuestas, debo decir que mi sugerencia para el componente de formulario de antd no es demasiado madura, pero por otro lado, hacer esta sugerencia es pensar completamente en el problema desde la perspectiva de un usuario común. Para un componente con una intensidad de uso tan alta, ¿cómo puede ser más conveniente desarrollar y usar, escribir menos código y usar expresiones más claras y naturales? Es mi ardiente expectativa de antd.

Desde el punto de vista del usuario, antd ya es muy bueno, la mayoría de los componentes se pueden usar como están, olvídelos cuando se agoten y utilícelos la próxima vez que quiera usarlos. La razón de este efecto es inseparable del buen diseño de la API y el empaquetado de los componentes, pero todavía existen algunos escenarios de uso de los componentes (como desde, tabla), y hay espacio para una mejor mejora.

Antd es solo un componente de la herramienta en el proyecto. Es mejor no exponer su mecanismo de implementación, o esconder y asimilar inteligentemente el mecanismo de implementación en la API externa. Los usuarios solo quieren usar este componente, quieren usarlo de la forma más conveniente y natural, y no quieren ser expertos en un componente de herramienta.

Volviendo al componente de formulario, bajo la api 3.x actual, estoy más dispuesto a usar uform basado en Ali. En comparación con el formulario de antd, uform necesita escribir menos código y es más productivo. Por supuesto, uform se siente más como una forma declarativa de escritura, que es muy diferente de la forma de antd, y puede que no tenga mucho valor como referencia.

Como parte de la antd, es un poco vergonzoso pedir tantos requisitos, pero por amor, espero que sea mejor, espero que el equipo del proyecto entienda y espero optimizar aún más el desarrollo y la experiencia de uso del componente en la versión adecuada. .

shengliangli en 12 dic. 2019

👍3 👎1

Muy extraño. No usé Icon en absoluto, pero empaqueté todos los icons-svg en él.

Número de versión: 4.0.0-beta.0. Se utilizan Babel-plugin-import y tree-shaking, pero son inútiles.

Xezzon en 14 dic. 2019

👀2 👍1

Muy extraño. No usé Icon en absoluto, pero empaqueté todos los icons-svg en él.

Número de versión: 4.0.0-beta.0. Se utilizan Babel-plugin-import y tree-shaking, pero son inútiles.

Utilice esta configuración

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

RavilM en 15 dic. 2019

Muy extraño. No usé Icon en absoluto, pero empaqueté todos los icons-svg en él.

Número de versión: 4.0.0-beta.0. Se utilizan Babel-plugin-import y tree-shaking, pero son inútiles.

Utilice esta configuración

{
                    test: /\.js?$/,
                    include: [/node_modules[\\\\/]antd/],
                    use: [
                        {
                            loader: 'babel-loader',
                            options: {
                                plugins: [
                                    '@babel/plugin-syntax-dynamic-import',
                                    [
                                        'import',
                                        {
                                            libraryName: 'antd',
                                            style: true,
                                            libraryDirectory: 'es',
                                        },
                                        'ant',
                                    ],
                                    [
                                        'import',
                                        {
                                            libraryName: '@ant-design/icons',
                                            customName: name => {
    const formatName = name.split('-').reduce((acum, value) => acum + value[0].toUpperCase() + value.slice(1), '');

    return `@ant-design/icons/lib/icons/${formatName}`;
};
                                        },
                                        '@ant-design/icons',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Gracias por su respuesta, pero no funcioné según su configuración.

Xezzon en 16 dic. 2019

Versión: 4.0.0-beta.0
Problema: cuando se cambia el componente modal visible, la página se desplaza y reproduce la dirección:

https://next.ant.design/components/form-cn/#components -form-demo-form-in-modal
- https://next.ant.design/components/modal-cn/

xiaoxintang en 16 dic. 2019

@xiaoxintang Está arreglado en la rama maestra, esperando la fusión.

shaodahong en 16 dic. 2019

@ afc163 ¿Cómo instalo antd4.0 beta?

XianZhengquan en 18 dic. 2019

👎2

https://next.ant.design/ colgó

githubmann en 18 dic. 2019

👀7

@ afc163 ¿Cómo instalo antd4.0 beta?

npm install antd@next
O
yarn add antd@next

fwh1990 en 18 dic. 2019

👍1

Parece que el sitio de vista previa no funciona. Solo obtengo un error de página no encontrada .

shaoran en 18 dic. 2019

Una sugerencia sobre el componente de formulario:
Estoy muy feliz de ver que en la nueva versión 4.0, el componente de formulario será más amigable para los desarrolladores. Vi un nuevo ejemplo, el componente Form.Item debajo del componente Form ya no necesitará usar getFieldDecorator. Esta es una muy buena mejora, pero tengo una sugerencia más radical: elimine el componente Form.Item, optimice aún más la experiencia de escritura de código y haga que la codificación sea más refrescante. Las funciones originales del componente Form.Item se transfieren directamente a componentes de entrada específicos (como Input, DataPick, etc.).
Esto es para tener en cuenta que, en la mayoría de los casos, los formularios desarrollados utilizan los componentes de entrada integrados de antd, y tienen las condiciones para realizar la función del componente Form.Item mejorando las capacidades de los componentes de entrada; y para algunos casos especiales (como el usuario Defina los componentes, ciertos componentes de entrada no quieren estar vinculados por Formulario), puede proporcionar componentes de empaque especiales para instrucciones.
La investigación sobre antd no es en profundidad y solo propone sugerencias de apelación desde la perspectiva de los usuarios comunes. Si hay algo mal, por favor, Haihan.

Puede probar esto: https://github.com/aweiu/ant-modifier

aweiu en 21 dic. 2019

¿Existen optimizaciones para la contaminación de estilo global?

k644606347 en 26 dic. 2019

¿Existen optimizaciones para la contaminación de estilo global?

Antd parece tener prefijos, no es contaminación.El código css de su propio proyecto puede intentar utilizar módulos css para resolver el problema de la contaminación global

fwh1990 en 27 dic. 2019

¿Existen optimizaciones para la contaminación de estilo global?
Antd parece tener prefijos, no es contaminación.El código css de su propio proyecto puede intentar utilizar módulos css para resolver el problema de la contaminación global

Bueno, conozco este prefijo, me refiero a la contaminación de la parte del reinicio global de css y la contaminación causada por la introducción de antd y css reset en proyectos heredados

k644606347 en 28 dic. 2019

¿Existen optimizaciones para la contaminación de estilo global?
Antd parece tener prefijos, no es contaminación.El código css de su propio proyecto puede intentar utilizar módulos css para resolver el problema de la contaminación global

Para obtener más información, consulte la discusión del problema en el enlace del sitio web oficial: https://ant.design/docs/react/faq-cn#antd -% E8% A6% 86% E7% 9B% 96% E4% BA% 86% E6% 88 % 91% E7% 9A% 84% E5% 85% A8% E5% B1% 80% E6% A0% B7% E5% BC% 8F% EF% BC% 81

k644606347 en 28 dic. 2019

¿Existe un plan para migrar el diseño de Antd Pro 4.0 desde Antd Pro 4.0?
Encontré el error SiderMenu.js Icon.createFromIconfontCN en pro-layout al migrar el proyecto por mí mismo. Debido a que la dependencia en pro-layout sigue siendo la versión v3, no sé cómo cambiar la dependencia. Alguien que sepa me enseñará

wushizhan en 4 ene. 2020

¿Existe un plan para migrar el diseño de Antd Pro 4.0 desde Antd Pro 4.0?
Encontré el error SiderMenu.js Icon.createFromIconfontCN en pro-layout al migrar el proyecto por mí mismo. Debido a que la dependencia en pro-layout sigue siendo la versión v3, no sé cómo cambiar la dependencia. Alguien que sepa me enseñará

Dado que el icono se separó en 4.0, la importación debe modificarse, puede tomar next.ant.design para ver el documento de la API del icono actual

zkwolf en 6 ene. 2020

Gracias por toda su contribución en la versión v4. Cerrar desde 4.0.0-rc.0 versión publicada: ref # 20661

zombieJ en 9 ene. 2020

👍2

¿Es StrictMode un objetivo? El contexto heredado debe migrarse https://github.com/ant-design/ant-design/issues/9870

ntucker en 10 ene. 2020

👍2

https://github.com/ant-design/ant-motion/issues/272

prateekrastogi en 25 ene. 2020

¿Podemos mantener tanto antd3 como antd4 en el repositorio? No se puede cambiar en todas partes ya que el repositorio es demasiado grande y casi se reescribirá el código base completo.
Además, si es así, ¿podemos mantener antd3 CSS en global y antd4 CSS solo para algunas carpetas y sus hijos?

Ekta398 en 11 sept. 2020

¿Fue útil esta página

0 / 5 - 0 calificaciones

Temas relacionados

¿Se puede programar el onChange de un control de formulario después de onFieldsChange?

yangbin1994 · 3Comentarios

¿Puede la tabla especificar el color de una celda determinada?

mineralres · 3Comentarios

Manejo de envíos de formularios con el componente Formulario

Orbyt · 3Comentarios

Haga clic en una sola fila para agregar un color de fondo a la tabla

xtznhzxdev · 3Comentarios

¿Cómo agregar un enlace al contenido del cuadro de advertencia de alerta? ?

longzb · 3Comentarios

Ant-design: 💥 ¡Ant Design 4.0 está en progreso!

Vista previa del sitio

Resumen

🌓 Acerca de la compatibilidad

Utilice la última API de React

Detener el soporte de IE9 / 10

Otra actualización compatible

📦 Reducir tamaño

Optimizar el tamaño del icono

Eliminar Draft.js

🧭 Optimización del rendimiento

Desplazamiento virtual

Animación de refactorización

🧩 Optimización de componentes

Formar

Mesa

New DatePicker

🚀 Continuar actualizando

🧶 Mejorar la accesibilidad

🎯 Estándar de API para desarrolladores

💼 Reaccionar modo estricto

💡 Mejorar la experiencia del desarrollador

🐱 Recurso de diseño

Hitos

Q2

Tercer trimestre

Cuarto trimestre

Bienvenido a bordo

Introducción

🌓 Ajuste de compatibilidad

Utilice la última versión de React API

Detener el soporte de IE9 / 10

Otros ajustes de compatibilidad

📦 Reducir el volumen

Optimizar el tamaño del icono

Eliminar Draft.js

🧭 Optimización del rendimiento

Desplazamiento virtual

Mejoras de animación

🧩 Acerca de los componentes

Componente de formulario

Componente de tabla

DatePicker rehecho

🚀 Actualización continua

🧶 Mejorar la experiencia de accesibilidad

🎯 Especificación de API para desarrolladores

💼 Reaccionar en modo estricto

💡 Mejora la experiencia del desarrollador

🐱 Diseño de gestión de activos

Plan de tiempo

Q2

Tercer trimestre

Cuarto trimestre

Bienvenido a participar

Comentario más útil

15311

Todos 182 comentarios

15311

Preparación alfa de V4

Principalmente objetivo

Continuar objetivo

Acerca de templateAreas

Sobre la dependencia

Acerca del icono

关于templateAreas

关于 依赖

关于 图标

sobre templateAreas

15311

¡Ahora es el momento de deshacerse de moment.js !

:perro:

https://github.com/ant-design/ant-motion/issues/272

Temas relacionados

Acerca de `templateAreas`

关于`templateAreas`

关于依赖

关于图标

sobre `templateAreas`