Ant-design: 💥 Ant Design 4.0 est en cours!

Créé le 31 mai 2019 · 182Commentaires · Source: ant-design/ant-design

Aperçu du site

next.ant.design

résumer

Cela fait 16 mois depuis décembre 2017 lorsque Ant Design 3.0 est sorti. Nous avons corrigé de nombreux bugs et ajouté de nombreuses nouvelles fonctionnalités ( changelog ) dans 4289 commits, 138 versions, 7675 problèmes et PR, ce qui nous a apporté 25375 étoiles dans GitHub. Nous avons également publié Ant Design Pro 4.0 . Prise en charge de TypeScript, des blocs et de l'abstraction des mises en page. Nous tenons à remercier tous les contributeurs et votre contribution rend Ant Design de mieux en mieux.

Dans le même temps, nous avons publié Ant Design Pro 4.0. Support TypeScript, Block et fournit le composant de mise en page

En ce moment, nous pensons: Ok alors, quelle est la prochaine étape? Que pouvons-nous faire pour que Ant Design aille plus loin? Il est temps de planifier le Ant Design 4.0! 🍻

Voici le plan détaillé sur 4.0. Nous pouvons ajuster certains d'entre eux car ils sont toujours en cours de planification.

🌓 À propos de la compatibilité

Nous supprimerons les accessoires obsolètes dans la version 4.0, ce qui signifie que les accessoires obsolètes ne seront plus pris en charge. Si vous ne recevez aucun avertissement de la dernière version 3.x, la mise à niveau sera transparente. Sinon, il y aura une phase de maintenance de six mois pour la version 3.0 après la sortie de la version 4.0.

Nous savons qu'il est difficile d'effectuer des mises à niveau. Nous prévoyons de fournir un package compatible pour gérer cela:

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

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

Ce package sera disponible jusqu'à la fin de la phase de maintenance 3.x.

Utilisez la dernière API React

Nous avons fourni le support React 15 depuis longtemps. Mais cela ne semble pas nécessaire d'après les retours sociaux (il y a près de 0% de problèmes avec React 15), car React a une forte compatibilité. Pour prendre en charge React 15, nous utilisons la nouvelle API très soigneusement. Ce ne sera plus un problème après la version 4.0:

Fournit l'API Hooks pour le composant associé
Prise en charge du mode simultané (toujours en préparation, continuera à s'ajuster dans 4.0)
Embrassez React 17 (wow！ ~)

Arrêter le support IE9 / 10

Ant Design 3.0 consacre beaucoup d'efforts à la prise en

Autre mise à jour compatible

Less 2.x mise à niveau vers Less 3.x
Réglage des icônes
Mention obsolète

📦 Réduisez la taille

Optimiser la taille de l'icône

Nous utilisons l'icône svg ( pourquoi svg? ) Après [email protected] . Nous utilisons le nom de la chaîne pour mapper l'icône, qui ne peut pas se charger à la demande. Nous importons tous les fichiers d'icônes dans antd, ce qui augmente la taille du bundle . Nous allons gérer cela dans 4.0.

L'ancienne méthode d'utilisation de l'icône sera * obsolète *:

import { Icon, Button } from 'antd';

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

Utilisera plutôt une icône d'importation unique dans la version 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>
);

Vous pouvez toujours utiliser une manière compatible à l'ancienne.

Supprimer Draft.js

Nous utilisons Draft.js dans le composant Mention pour confirmer l'emplacement de la fenêtre contextuelle, mais seule une petite partie de ses fonctionnalités est utilisée. Cela semble trop cher. Nous prévoyons de supprimer Draft.js dans la version 4.0 et d'utiliser une autre solution légère à la place. En même temps, pour faire la distinction avec le composant d'origine Mention de la version 3.0, un nouveau composant Mentions sera introduit pour éviter les conflits d'API. En outre, il prend en charge de manière 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 />
);

🧭 Optimisation des performances

Nous avons quelques problèmes de performances pour un ensemble de données volumineux de la communauté. Nous nous assurerons qu'une optimisation sera effectuée ici.

Défilement virtuel

Le défilement virtuel est un moyen courant d'optimiser les performances. Nous prévoyons de prendre en charge cela de manière native dans les composants. Il peut ne pas se terminer immédiatement dans la version 4.0. Intègre pas à pas.

Refactoriser l'animation

Nous avons fait du piratage avec l'animation dans le passé. Cela fonctionne bien dans la plupart des cas. Nous prévoyons d'utiliser une manière React beaucoup plus pure au lieu de la pirater. Cette mise à jour se fera en silence, rien ne vous affectera.

🧩 Optimisation des composants

Nous avons ajouté de nombreux composants dans la version 3.0 et continuerons dans la version 4.0. Ces composants proviendront du scénario d'entreprise, d'Ant Design Pro et des exigences sociales. Le nouveau processus de composants sera le même que Ant Design 3.0, nous mettrons le fichier de conception associé dans PR et le collecterons sur le site officiel. Sortie dans chaque version mineure.

En outre, nous prévoyons de refactoriser certains composants clés pour en faciliter l'utilisation. Comprend mais pas seulement:

Forme

Le formulaire est l'un des composants les plus utilisés. Nous remarquons que les réseaux sociaux ont de nombreux commentaires sur la conception de l'API.
Nous souhaitons simplifier l'API en 4.0:

Le formulaire comprendra le magasin de données. Plus besoin d'utiliser Form.create() .
Fom.Item inclura la liaison de champ. Plus besoin d'utiliser getFieldDecorator .
Form.Item conservera la valeur, mais le validateur sera désactivé lorsque le champ sera supprimé.

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>
  );
}

Dans le monde réel, on rencontre beaucoup de communication entre les formulaires (généralement en configuration détaillée). Nous voulons vous faciliter la tâche:

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

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

Si vous souhaitez suivre la progression du formulaire, vous pouvez le voir ici .

Table

Dans le passé, nous avons reçu beaucoup de commentaires de la table . Nous savons que les accessoires d'extension et de défilement ne fonctionnent pas bien ensemble. Cette fois, nous allons nous concentrer pour y remédier. De plus, nous ferons beaucoup sur l'optimisation de la table. Et un moyen facile de faire la mise en page ：

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

Nous prévoyons également d'ajouter un pied de

Nouveau DatePicker

Current DatePicker satisfait la plupart des exigences. Mais à partir de la discussion communautaire , nous pouvons creuser davantage. Nous fournirons un cueilleur d'année de repos et un cueilleur de ranger ( discuter ). Et aussi, nous mettrons à jour le style de conception DatePicker pour améliorer l'expérience utilisateur.

🚀 Continuer la mise à jour

Outre le contenu ci-dessus, nous prévoyons également de continuer à mettre à jour. Ceux-ci continueront à être mis à jour dans 4.0 pour améliorer le développement et l'expérience utilisateur.

🧶 Améliorez l'accessibilité

Ant Design 3.0 a une prise en charge limitée de l'accessibilité, nous prévoyons d'ajuster la structure du dom et d'ajouter plus de marque aria pour améliorer l'expérience du lecteur d'écran. En outre, nous nous préparons également à optimiser l'interaction du clavier.

🎯 Norme API développeur

Nous constatons que certains styles de dénomination d'API sont peu différents des autres. Ce n'est pas un problème pour les développeurs Typescript, mais il est difficile de s'en souvenir autrement.
Ainsi, nous allons créer un document standard de dénomination qui inclut les API actuelles et les règles de dénomination associées. Dans la nouvelle fonctionnalité, suivra la règle de dénomination pour éviter les conflits de dénomination d'API. Nous accueillons également les opinions de la communauté à ce sujet dans les relations publiques.

💼 Mode de réaction strict

Si vous avez essayé d'envelopper le composant antd avec <React.StrictMode> , vous recevrez un avertissement. Nous avons déjà remplacé certains composants par une nouvelle méthode de cycle de vie. Ce travail se poursuivra dans la version 4.0.

💡 Améliorez l'expérience des développeurs

Dans le passé, nous avons constaté que certains problèmes venaient à plusieurs reprises. Ces problèmes sont en quelque sorte une question d'utilisation. Nous pensons que nous pouvons faire quelque chose à ce sujet (en fait déjà en 3.0). Dans l'environnement de développement, nous avertirons les statuts inattendus (comme invalider l'objet Moment, l'ajustement du préfixe / affixe provoquera un changement de structure dom, etc.). Nous pensons que la console est le premier endroit sur lequel se concentrer en cas de problème. Fournit des conseils appropriés peut aider à trouver le problème. En même temps, nous résumerons les autres questions dans la FAQ de chaque document composant. Du côté de la maintenance, nous ne pouvons pas aider sur chaque question d'utilisation, mais elles existent, en particulier avec les nouveaux développeurs. La FAQ peut aider à gagner beaucoup de temps de recherche. Si cela vous intéresse, n'hésitez pas à nous aider à améliorer l'expérience des développeurs.

🐱 Ressource de conception

Ant Design n'est pas seulement une bibliothèque de composants. La conception est la puissance du support. Nous synchroniserons la mise à jour de la ressource de conception (package de composants Sketch, outils de cuisine, jeton de conception, etc.). Nous ajusterons également le style actuel des composants pour améliorer l'expérience utilisateur.

Jalons

Voici notre plan de jalons. Nous allons créer un problème connexe sur Github. Nous souhaitons également la bienvenue aux contributeurs sociaux:

Q2

Marquer l'API associée comme obsolète et la supprimer du document.
Mise à jour d'avertissement des composants de bas niveau.

Q3

Créez la branche antd 4.0 et mettez à jour le document.
Développement de composants.

T4

Libérez Ant Design 4.0.

Bienvenue à bord

Nous vous tiendrons au courant pendant le processus de développement. Le contenu ci-dessus n'est peut-être pas définitif. Les réflexions / conseils de la communauté seront plus que bienvenus! Améliorons Ant Design 4.0!

introduction

Cela fait 16 mois que Ant Design a publié la version 3.0 en décembre 2017. Durant cette période, nous avons corrigé un grand nombre de bugs et ajouté un grand nombre de nouvelles fonctionnalités ( journal de mise à jour ). Soumis 4289 commits, publié 138 versions, fermé 7675 numéros et PR et ajouté 25375 étoiles. Nous avons également publié Ant Design Pro 4.0 . Prend en charge TypeScript, bloque et résume la mise en page. Nous tenons à remercier tous les bénévoles de la communauté pour votre dévouement à rendre Ant Design plus utilisable.

Dans le même temps, nous réfléchissons également à la prochaine étape et à la manière de faire avancer Ant Design.Nous prévoyons de sortir la version Ant Design 4.0 au quatrième trimestre de cette année . 🍻

Ce qui suit est un plan détaillé pour 4.0, bien sûr, cela est toujours en cours de planification. Il peut y avoir des ajustements lors de la sortie officielle.

🌓 Ajustement de compatibilité

Nous supprimerons les attributs marqués comme obsolètes dans la version 4.0. À ce moment-là, vous ne pourrez plus utiliser la méthode abandonnée. Si vous mettez à niveau votre projet vers la dernière version 3.x et que vous ne voyez pas le message d'avertissement d'antd dans la console, votre mise à niveau vers la version 4.0 sera également transparente. Pour la version 3.x, nous continuerons d'effectuer six mois supplémentaires de travaux de maintenance après la version 4.0.

Nous savons que la version de mise à niveau a beaucoup d'énergie pour abandonner l'API obsolète. Nous prévoyons de fournir un package compatible pour aider la transition du projet lors de la publication de la version 4.0 (l'API associée est encore en cours de conception et peut être différente lorsqu'elle sera officiellement publiée):

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

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

Le pack de compatibilité restera également mis à jour jusqu'à l'arrêt des travaux de maintenance 3.0.

Utilisez la dernière version de l'API React

Nous soutenons la version React 15 depuis longtemps, mais d'après les commentaires de la communauté, ce n'est en fait pas important (le numéro de problème de React 15 approche les 0%). Parce que React lui-même a une compatibilité très robuste. Afin de prendre en charge React 15, nous faisons très attention à l'utilisation de nouvelles API pendant le processus de développement. Après la version 4.0, nous utiliserons la dernière version de React comme référence pour le développement:

Fournir la version Hooks des composants associés
Prise en charge du mode simultané (bien sûr, il y a plus de choses à préparer et continueront d'être ajustées dans la version 4.0.)
Embrassez React 17 (wow! ~)

Arrêter le support IE9 / 10

Ant Design 3.0 a fait beaucoup d'efforts pour être compatible avec l'ancienne version d'IE . Cependant, selon les statistiques de l'industrie, la part mondiale et nationale du navigateur IE9 / 10 diminue avec la mise à jour du système Windows. Dans la version 4.0, nous arrêterons de prendre en charge IE 9/10 (mais continuerons de supporter IE 11). Cela signifie également qu'il est possible de prendre en charge les nouvelles fonctionnalités du navigateur.

Autres ajustements de compatibilité

Mettre à niveau de Less 2.x vers Less 3.x
Changement d'utilisation des icônes
Mention obsolète

📦 Réduisez le volume

Optimiser la taille de l'icône

Dans [email protected] , nous avons introduit l'icône svg ( pourquoi utiliser l'icône svg? ). L'API pour définir les icônes avec un nom de chaîne est utilisée. Dans cette conception, nous ne pouvons pas charger à la demande. Par conséquent, nous avons introduit tous les fichiers d'icônes svg, ce qui augmente considérablement la taille du produit emballé. Dans la version 4.0, nous ajusterons cela pour optimiser le volume.

L'ancienne version de l'utilisation de Icon sera obsolète :

import { Icon, Button } from 'antd';

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

Dans la version 4.0, une méthode d'introduction à la demande sera adoptée:

// 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>
);

Vous pourrez toujours continuer à utiliser la méthode compatible ci-dessus.

Supprimer Draft.js

Nous avons introduit Draft.js dans le composant Mention pour implémenter la fonction de positionnement des invites déroulantes, mais nous n'avons utilisé qu'une petite partie de sa fonction. Compte tenu de la rentabilité, cela semble un peu inutile. Nous prévoyons d'en supprimer la dépendance dans la version 4.0 et de passer à une solution plus légère. Dans le même temps, afin de distinguer les composants Mention dans la version 3.0, nous fournirons un nouveau composant Mentions pour éviter les conflits d'API. De même, il prend également en charge l'utilisation continue des méthodes compatibles ci-dessus:

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

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

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

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

🧭 Optimisation des performances

Au cours du processus de maintenance, nous avons reçu de nombreuses discussions sur les

Défilement virtuel

Le défilement virtuel est une méthode d'optimisation courante, mais en raison des effets d'animation dans Ant Design, il n'est pas si facile de personnaliser le défilement virtuel. Désormais, nous prévoyons de prendre en charge nativement le défilement virtuel dans les composants avec défilement. Bien entendu, nous ne garantissons pas que tous les composants ont été mis à jour lors de la sortie de la version 4.0 et continueront d'être mis à jour.

Améliorations de l'animation

Dans le passé, nous utilisions des hacks pour traiter les animations. Dans la plupart des scénarios, cela fonctionne assez bien. Dans la version 4.0, nous prévoyons d'ajuster cela et d'abandonner l'approche du hack pour un chemin plus réactif. L'ajustement sera mis à jour en silence et vous n'aurez pas besoin d'y apporter de modifications.

🧩 À propos des composants

Dans la version 3.0, nous avons continué d'ajouter de nombreux composants. En 4.0, nous continuerons. Ces composants seront affinés à partir de nos scénarios commerciaux, d'Ant Design Pro et des besoins de la communauté. Il s'agit d'un processus continu. Le processus d'ajout de nouveaux composants est le même que Ant Design 3.0. Nous allons précipiter les projets de conception des composants associés et les afficher dans le PR et les mettre à jour avec le site officiel. Une fois le développement terminé, ils seront publiés dans la version mineure mensuelle.

En outre, nous nous préparons également à refactoriser certains composants clés pour améliorer la facilité de développement et d'interaction. Il comprend, mais sans s'y limiter:

Composant de formulaire

Le public des composants de formulaire est très large et nous avons également remarqué les plaintes de la communauté concernant la lourdeur de l'API de formulaire. Dans la version 4.0, nous espérons explorer de meilleures formes d'API pour simplifier les coûts de développement:

Le formulaire agrégera les champs de données du formulaire par défaut et vous n'avez plus besoin de créer un contexte via Form.create() .
Fom.Item agrégera les champs du formulaire par défaut, vous n'avez pas besoin de lier le champ via getFieldDecorator .
La valeur de Form.Item sera toujours conservée, mais sa fonction de validation ne prendra effet que lorsque l'élément de formulaire 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>
  );
}

Dans la scène réelle, nous avons rencontré la scène de liaison multi-formes (commune dans la configuration détaillée). Nous savons que ce n'est pas pratique à utiliser, nous allons donc également fournir la fonction de liaison entre les formulaires:

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

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

Si vous souhaitez suivre la progression du formulaire, n'hésitez pas à vérifier la progression .

Composant de table

Dans la version précédente, nous avons reçu beaucoup de commentaires sur le composant Table . Nous savons que les propriétés d'expansion et de défilement de Table n'ont pas bien fonctionné dans le passé. Cette fois, nous nous concentrerons sur la résolution des conflits dans ce domaine. De plus, nous optimiserons davantage les performances du composant Table. Et explorez quelques méthodes de disposition de table plus 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

En outre, nous prévoyons également d'ajouter un pied de

DatePicker refait

Le DatePicker existant a répondu à la plupart des besoins, mais à partir de la discussion communautaire . Nous avons encore l'opportunité d'approfondir, nous allons compléter les sélecteurs d'année restants et les sélecteurs de gamme correspondants ( discussion ). En outre, nous ajusterons le style des sélecteurs de date et d'heure associés pour réduire davantage le coût cognitif des utilisateurs.

🚀 Mise à jour en continu

En plus du contenu ci-dessus, nous prévoyons également de continuer à mettre à jour une partie du contenu. Cela sera suivi dans la version 4.0 afin de mieux améliorer le développement et l'expérience utilisateur.

🧶 Améliorez l'expérience d'accessibilité

Ant Design 3.0 ne prend pas en charge l'expérience d'accessibilité. Pour cette raison, nous prévoyons d'ajuster la structure des composants et d'ajouter plus de balises aria pour améliorer l'expérience de lecture de l'écran. En outre, nous nous préparons également à optimiser les méthodes d'interaction du clavier des composants existants pour garantir une meilleure expérience d'interaction complète avec le clavier.

🎯 Spécifications de l'API du développeur

Au cours de l'évolution, nous avons constaté qu'un petit nombre de styles d'API sembleraient incompatibles avec d'autres composants. Pour les utilisateurs de TypeScript, ce n'est pas un problème, mais pour les autres utilisateurs, cela peut entraîner des problèmes de mémoire.

Nous allons donc rassembler un document de dénomination standard. Le document contiendra une liste des API existantes et des conventions de dénomination appropriées. Lors de l'ajout de nouvelles fonctionnalités, elles seront également nommées conformément à cette spécification. Pour éviter les divergences d'API qui pourraient survenir à l'avenir. Bien sûr, nous invitons également les étudiants de la communauté à donner leur avis sur les relations publiques.

💼 Réagir en mode strict

Si vous essayez d'encapsuler <React.StrictMode> dehors du composant antd, vous obtiendrez beaucoup de messages d'avertissement du composant antd. Nous avons mis à jour les méthodes de cycle de vie de certains composants dans la version 3.0. En 4.0, nous continuerons.

💡 Améliorez l'expérience des développeurs

Dans le processus de maintenance précédent, nous avons constaté que certains problèmes se produisaient dans les deux sens. Ces problèmes sont courants dans certaines spécifications d'utilisation ou scénarios d'application. Pour cela, nous avons décidé d'apporter des améliorations ici (en fait, depuis la version 3.0, nous nous améliorons). Dans l'environnement de développement, nous vous demanderons dans la console certaines situations inattendues (telles que des objets Moment invalides, des changements de structure Dom provoqués par l'ajustement dynamique du préffixe / affixe d'entrée, etc.). Nous sommes convaincus que la console est le premier endroit auquel les développeurs porteront attention lorsqu'ils rencontrent un problème, et fournir des conseils appropriés ici peut aider à localiser rapidement le problème. En même temps, pour certains usages ou scénarios spéciaux. Nous fournirons des FAQ dans la documentation correspondante des composants. Du point de vue de la maintenance des projets, notre énergie est incapable d'apporter des réponses détaillées à la problématique des usages. Mais ces questions sont réelles, en particulier pour les développeurs débutants, une FAQ peut aider à gagner beaucoup de temps de recherche. Si vous êtes intéressé, les bénévoles de la communauté sont également les bienvenus pour aider à améliorer l'expérience des développeurs.

🐱 Gestion des actifs de conception

Ant Design n'est pas seulement un ensemble de bibliothèques de composants, mais aussi un puissant système de conception derrière lui. Dans la version 4.0, nous mettrons à jour les derniers actifs liés à la conception (paquet de composants Sketch, ensemble d'outils de cuisine, jeton de conception, etc.) pour faciliter les concepteurs et les étudiants intéressés par le design comme référence. Les styles de conception de composants existants seront également affinés pour améliorer les effets visuels et l'expérience utilisateur.

Plan de temps

Voici notre calendrier, dans lequel certaines mises à jour de composants sont en cours. Nous créerons des problèmes connexes sur github, et les bénévoles de la communauté sont également invités à participer:

Q2

Marquez l'API obsolète requise comme obsolète et effacez-la dans le document.
Les composants sous-jacents sont préchauffés.

Q3

Créez une branche antd 4.0 et mettez à jour la documentation.
Développement de composants de bas niveau.

T4

Version 4.0.

Bienvenue à participer

Pendant le processus de développement 4.0, le contenu ci-dessus peut être ajusté. Bienvenue aux étudiants de la communauté pour leur fournir des idées et des suggestions précieuses, laissez-nous rendre Ant Design 4.0 plus pratique et plus facile à utiliser!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

Source

zombieJ

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

Commentaire le plus utile

15311

Remplacerons-nous Moment.js dans la version 4?

hk-ng le 1 juin 2019

👍101 ❤13

Tous les 182 commentaires

15311

Remplacerons-nous Moment.js dans la version 4?

hk-ng le 1 juin 2019

👍101 ❤13

Super, j'ai hâte de mettre à jour

lcoder le 1 juin 2019

Préparation alpha V4

Principalement cible

[x] branche v4
[x] Package compatible
[x] Supprimer le contenu obsolète
- [x] Mention composant
- [x] Nouveau composant Mentions # 16532
- [x] Form.create
- [x] Icône avec type # 12011
- [x] Autre avec des accessoires d'avertissement obsolètes
[x] Moins v3
[x] Performances
- [x] rc-animate surclassement
- [x] prise en charge du mode simultané
- [x] Prise en charge de l'animation de défilement virtuel
- [x] Parchemin virtuel
- [x] composant rc
- [x] Arbre
- [x] Sélectionnez
- [x] TreeSelect
- [x] Formulaire: https://github.com/react-component/form/pull/292
- [x] Fournit la version Hooks
- [x] Tableau
- [] templateAreas
- [x] Support expand & scroll co-work
[x] DatePicker avec un nouveau design
- [x] YearPicker
- [x] RangePicker.YearPicker
- [x] RangePicker.MonthPicker
- [x] RangePicker.YearMonthPicker
- [x] RangePicker.WeekPicker
- [x] TimePicker.RangePicker

Continuer la cible

[] Accessibilité
[x] norme API
[] React.StrictMode

afc163 le 1 juin 2019

👍1

Voici quelques suggestions sur Ant 4

Environ `templateAreas`

templateArea analyse la chaîne au moment de l'exécution, cela provoquera des erreurs d'analyse non exclues ou des erreurs slient en cas de faute de frappe dans la chaîne. L'analyse du runtime est également hostile à TypeScript. Est-ce que Ant Team considère la proposition ci-dessous:

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

À propos de la dépendance

Est-ce que Ant Team envisagerait de supprimer la dépendance moment ?

Moment est trop gros pour un projet frontal, il existe de nombreuses alternatives, mais les accessoires de TimePicker et DatePicker relaient sur Moment. Cela nous amène à ne pas remplacer moment par date-fns ou une autre bibliothèque plus petite que Moment.

À propos de l'icône

Je pense que la façon dont les icônes Ant sont utilisées maintenant ne devrait pas être obsolète, la nouvelle façon dont l'icône d'importation peut entraîner un changement de bloc de paquet commun lorsque j'ajoute ou supprime une icône.

Ant Team peut fournir deux façons d'utiliser les icônes Ant:

Empaquetez toutes les icônes dans un seul fichier js, les développeurs peuvent importer un fichier entier en utilisant la balise <script> et définir externals dans le pack Web.
La nouvelle façon d'introduire ci-dessus.

这是我对 Ant4 的一些建议

关于`templateAreas`

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

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

关于依赖

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

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

关于图标

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

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

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

jas0ncn le 1 juin 2019

👍47

Un plan pour prendre en charge le défilement virtuel pour la table? La table infinie est préférée dans certains cas plutôt que la pagination.
Et comme «Comment» est inclus dans la version 3.11, peut-être ChatBox et ChatMessage?

ifiknew le 2 juin 2019

👍10

Un plan pour prendre en charge le défilement virtuel pour la table? La table infinie est préférée dans certains cas plutôt que la pagination.
Et comme «Comment» est inclus dans la version 3.11, peut-être ChatBox et ChatMessage?

UserInfo peut-être des priorités.

jas0ncn le 2 juin 2019

environ `templateAreas`

Je supporte également la syntaxe des tableaux à deux dimensions
Je supporte également la syntaxe des tableaux à deux dimensions.

Concernant templateAreas, voici un exemple de vérification statique
Ceci est un exemple de vérification statique de type utilisant ts pour 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);

Terrain de jeux

muzea le 2 juin 2019

👍3 🚀1 😕1 🎉1 😄1

impressionnant

Huanglei2010 le 3 juin 2019

15311
Remplacerons-nous Moment.js dans la version 4?

Je pense que le principal problème pour s'éloigner de moment est la rupture du changement autour de locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

zachguo le 4 juin 2019

J'espère que le support pour dactylographié peut être meilleur

fwh1990 le 5 juin 2019

👎2

Great Seeing 4.0 est en cours! J'ai quelques suggestions ci-dessous à prendre en considération, je ne suis pas tout à fait sûr qu'elles s'inscrivent dans le modèle de conception, mais pour la personnalisation, elles seraient excellentes à mon avis.

Être capable de contrôler la couleur d'arrière-plan d'une ligne dans <Table> . Par exemple, colorer une ligne en orange pour mettre en évidence l'avertissement pour cette ligne.
Couleurs des boutons, n'a trouvé aucune discussion précédente à ce sujet. Mais ce serait formidable de pouvoir avoir une API similaire à <Tag color="red">RED<Tag /> pour les boutons, par exemple <Button color="red">Red Button<Button/> .
Prise en charge des icônes Font-Awesome 5.x dans les différents composants, ou assurez-vous qu'elles fonctionneront avec les autres icônes en cours. J'ai remarqué des problèmes d'alignement lors de l'utilisation de FA au lieu du composant natif <Icon> .
Le composant <Pagination> ne prend pas en charge la fourniture directe du nombre de pages, le cas d'utilisation est que je n'ai que le nombre de pages et la page actuelle disponibles par exemple, mais pas le nombre d'éléments dans chaque page. Je n'ai pas encore trouvé de bon moyen de gérer cela.

orecus le 5 juin 2019

@orecus

Par exemple, colorer une ligne en orange pour mettre en évidence l'avertissement pour cette ligne

J'ai tendance à utiliser rowClassName pour attacher une classe à cette ligne, puis remplacer le style par défaut avec css.

leLe composant ne prend pas en charge la fourniture directe du nombre de pages

Peut passer un faux total. Par exemple, si vous voulez 50 pages, vous pouvez passer total = pageSize * 50 .

muzea le 5 juin 2019

C'est vraiment une bonne nouvelle 🚀 L'accent mis sur les performances est visible et c'est génial, car certains composants ne sont pas utilisables avec de grandes quantités de données.

Comment voulez-vous implémenter le défilement virtuel? En utilisant react-window ?

Existe-t-il des priorités pour les fonctionnalités principalement cibles?
J'aimerais essayer la sélection virtuelle en phase alpha et je pense que je ne suis pas seul à ce sujet.

Merci.

bend-up le 5 juin 2019

👍6

Pourquoi le nom de chaîne ne peut pas se charger à la demande? Lazy () de react ne résout-il pas le problème?

faradaytrs le 6 juin 2019

@faradaytrs
Oui, mais cela dépend des caractéristiques de webpack , des opérations spécifiques

Deux problèmes sont plus importants

/* webpackChunkName: "icons/icon-" */ écrit par webpack Magic Comments
Comme le dit l'original, "Chaque icône contient des informations supplémentaires sur le module Webpack en plus du contenu de l'icône"

muzea le 6 juin 2019

👎1

Des idées sur la pollution de style global? # 4331 # 9363

wangjianio le 9 juin 2019

👍30 😕3

Des idées sur la pollution de style global? # 4331 # 9363

À mon humble avis, ce serait formidable que la version 4.0 permette aux utilisateurs de définir des styles antdesign sous un nom global (voir mon commentaire https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

abenhamdine le 9 juin 2019

👍6

Ravi d'entendre parler de la prochaine étape!

Mon 2 Ct. concernant les documents et la rationalisation:

Il y a souvent des props transmis aux éléments DOM sous-jacents, qui ne sont pas documentés (IIRC Dans certains cas, tous les props qui ne sont pas sélectionnés par l'implémentation du composant le sont). Il serait très utile de les avoir documentés, regroupés par élément cible (il peut y en avoir plusieurs): "Les accessoires suivants sont transmis au conteneur

"ou" Les accessoires suivants sont passés à travers le element ... "ou" Tous les autres accessoires sont passés à ... ". Pour ces accessoires, aucune explication détaillée n'est nécessaire, des liens vers MDN pourraient être suffisants.

Un tel changement serait également formidable pour nous, les développeurs TypeScript, actuellement c'est un travail fastidieux pour maintenir la définition TS à jour à cet égard.

Dans le "Developer API standard", cela devrait être documenté, et il devrait y avoir une décision concernant les accessoires à toujours passer (className, id,?)

sbusch le 11 juin 2019

Une autre question:

Envisagez-vous de passer plus de fichiers (ou même de composants rc) de JavaScript avec des définitions TypeScript à TypeScript natif?

sbusch le 11 juin 2019

Pensez à remplacer rc-form par quelque chose de plus flexible, comme Formik.

iamvanja le 12 juin 2019

👎7 👍6

Question pour les responsables:

Mon équipe est intéressée à essayer Ant, mais https://github.com/ant-design/ant-design/issues/11097 (Antd Less crée des fuites JavaScript globales) nous bloque. La feuille de route ci-dessus indique qu'Ant passera à la version LESS 3, et j'ai lu que la fonctionnalité JavaScript en ligne non sécurisée et obsolète en question est désactivée par défaut. Cela signifie-t-il que la version 4 d'Ant n'aura plus le problème LESS?

kaiyoma le 15 juin 2019

👍5

Non seulement IE9 / 10, mais arrêtez le support IE,

wanliyunyan le 19 juin 2019

👍6 🎉5 😄5 👎4

Oh mon Dieu, il serait si utile de ne pas polluer les styles globaux ( html , body , *::before , ...)

and-semakin le 20 juin 2019

👍10

Le carrousel basé sur react-slick a de nombreux problèmes lors de son utilisation. Il est recommandé de remplacer la nouvelle version par une autre bibliothèque
react-pannable est assez bon à utiliser

cztflove le 26 juin 2019

👎1 👍1

La description des commits de @cztflove cette bibliothèque est tout no message 😃, et l'attention de la communauté est trop faible, je ne devrais pas la considérer.

yoyo837 le 26 juin 2019

@ yoyo837 Le composant principal de virtual list et 仿ios边缘弹性 , sur la base de ce composant, certaines fonctions 拖拽 peuvent être réalisées 🤔 Il y a plus de place pour l'expansion à l'avenir

cztflove le 26 juin 2019

👍2

Ne devrions-nous pas migrer vers une langue universelle?

Je suis entièrement d'accord et respecte les langues régionales, même si je ne suis pas anglophone. Il y a des centaines de tâches répétitives, ou mieux dire en double avec un double langage, le facteur le plus important est le temps, la traduction des chaînes discutées, l'apprentissage de la documentation ou des tuts. démos etc.

Je dois admettre que les contributeurs ne manquent pas à cause des conflits linguistiques, des centaines d'entre nous ont encore peur de s'impliquer. Il y a déjà de nombreux sprints, des problèmes de traduction en cours, mais ce que je demande, c'est de migrer complètement vers une langue universelle avec cette version majeure pour réduire le fossé de communication entre nous tous.

asharamseervi le 29 juin 2019

👍8 😕1

Ne devrions-nous pas migrer vers une langue universelle?
Je suis entièrement d'accord et respecte les langues régionales, même si je ne suis pas anglophone. Il y a des centaines de tâches répétitives, ou mieux dire en double avec un double langage, le facteur le plus important est le temps, la traduction des chaînes discutées, l'apprentissage de la documentation ou des tuts. démos etc.
Je dois admettre que les contributeurs ne manquent pas à cause des conflits linguistiques, des centaines d'entre nous ont encore peur de s'impliquer. Il y a déjà de nombreux sprints, des problèmes de traduction en cours, mais ce que je demande, c'est de migrer complètement vers une langue universelle avec cette version majeure pour _réduire le fossé de communication_ entre nous tous.

说得对， ↔ 中文吧

faradaytrs le 30 juin 2019

👍2

Question pour les responsables: est-il prévu d'utiliser des variables CSS pour changer la couleur et les thèmes de style en vol?

J'ai appris en pratique que changer les styles de composants via des variables est une manière très confortable. J'ai essayé de réécrire Less variables avec var(--css-vars) , mais j'ai attrapé beaucoup d'erreurs sur les compilations de style, car beaucoup de styles utilisent des fonctions et des opérations avec des vars, pas seulement des valeurs. Je suppose que c'est une grande tâche et que cela crée des changements de rupture, mais des versions majeures ont été créées pour des changements de rupture :) Et l'utilisation des variables CSS peut donner de nombreuses possibilités de personnalisation des styles de composants.

Qu'est-ce que vous en pensez? J'ai de toute façon prévu de développer un thème avec l'utilisation des variables CSS comme pull request, car cette fonctionnalité (changement de thème en vol) est nécessaire dans mon projet.

Désolé, si cette suggestion est en double, mais je n'ai rien trouvé à ce sujet dans d'autres numéros et PR.

Z3SA le 2 juil. 2019

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Cela doit arrêter tout support IE, arrêter le support IE11 est trop radical, même si je soutiens également le faire.

yoyo837 le 2 juil. 2019

@ yoyo837 , je suis d'accord que c'est une cause trop radicale des problèmes de support d'IE. Mais Ant Design a également le support officiel (comme indiqué sur ant.design) d'Electron (en tant que plate-forme séparée, pas Web). Dans ce cas, il pourrait y avoir moyen de créer deux thèmes: l'un avec Less vars, l'autre avec CSS vars. Mais cela semble trop difficile à supporter.

Donc, autre stratégie possible que je suppose - créer Less vars pour tous les attributs personnalisables dans Less, ou supprimer l'utilisation de toutes les fonctions et opérations sous Less vars que tout développeur peut utiliser comme entrée pour ses variables CSS. Ou si vous le dites plus simplement, utilisez Less vars uniquement comme conteneur de valeur, pas pour les fonctions et les opérations.

Z3SA le 2 juil. 2019

Si vous ne supportez que les principaux navigateurs, je pense que la taille du code sera plus petite et que le code sera plus facile à maintenir.

wanliyunyan le 3 juil. 2019

👍2

Non seulement IE9 / 10, mais arrêtez le support IE,

@wanliyunyan Trop de rupture. Certains développeurs peuvent rester sur antd @ 3 et ce n'est pas une bonne chose pour nous.

dancerphil le 3 juil. 2019

@ Z3SA Ce sera un travail énorme.

yoyo837 le 3 juil. 2019

@dancerphil Heureusement, je considère uniquement la dernière version de chrome pour mon projet. 😃 J'espère donc que plus la taille est petite, mieux c'est.

wanliyunyan le 3 juil. 2019

@ yoyo837 Je le sais. Et je le ferai moi-même si cette idée ne pouvait pas attirer suffisamment l'attention.

Z3SA le 3 juil. 2019

Nous sommes une entreprise qui aimerait migrer progressivement vers antd en utilisant des composants individuels; Cependant, l'utilisation par fourmi des styles Global complique vraiment ce problème. Veuillez arrêter de polluer les styles mondiaux.

jmackay-hippocmms le 6 juil. 2019

👍6

Le formulaire est l'un des composants les plus utilisés. Nous remarquons que les réseaux sociaux ont de nombreux commentaires sur la conception de l'API. Nous souhaitons simplifier l'API en 4.0:

Fom.Item inclura la liaison de champ.

Ces changements nous permettront-ils toujours d'utiliser Form.Item comme un composant strictement de présentation? J'adore les composants d'antd, mais je préfère la forme de réaction finale pour la gestion de l'état. Je veux le style de Form.Item, et aucune logique de gestion d'état.

jmackay-hippocmms le 6 juil. 2019

👍3

la branche 4.0 est créée. Quand puis-je prévisualiser

jeessy2 le 10 juil. 2019

le nouveau composant de formulaire est génial!

fxxjdedd le 16 juil. 2019

👍4

Veuillez remplacer momentjs par dayjs car momentjs est énorme et la taille du bundle est également devenue énorme.

ViktorAksionov le 17 juil. 2019

👍24

Y a-t-il des pièges à envisager de reprendre l'éditeur de texte enrichi?

XUANLANcognition le 18 juil. 2019

Quelle est la date de sortie?

rafaelodassi le 19 juil. 2019

@rafaelodassi Il n'y a pas encore de date confirmée, mais probablement au quatrième trimestre.

ztplz le 21 juil. 2019

🎉1

La mise à niveau vers @babel/runtime@7 et core-js@3 serait également notre priorité.

afc163 le 22 juil. 2019

🎉3

Pas la v3? Y a-t-il des nouvelles pour core-js@4 ?

yoyo837 le 22 juil. 2019

😄1

Tout le monde parle de supprimer complètement le support IE parce que les statistiques montrent qu'il est à peine utilisé. Qu'en est-il des millions d'utilisateurs d'entreprise derrière l'intranet qui ne sont pas du tout dans les statistiques? Ils sont bloqués avec IE10 et IE11 en raison des politiques d'entreprise.

Je m'en tiendrai à

filipjnc le 23 juil. 2019

👍10 👎4

Je suggérerais d'introduire une API pour permettre l'utilisation d'objets en tant que valeurs <Select/> .
pour plus de détails, veuillez consulter https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

SergeyVolynkin le 25 juil. 2019

Il est recommandé que chaque composant dispose de son propre journal de mise à jour. Peu importe que vous le gardiez caché. Suggestion personnelle ~

redclown le 27 juil. 2019

👍1

Quand Release ou RC est-il possible?

fwh1990 le 27 juil. 2019

👍1

Il est recommandé que chaque composant dispose de son propre journal de mise à jour. Peu importe que vous le gardiez caché. Suggestion personnelle ~

D'accord, si la documentation de chaque composant peut être ajoutée par quelle version. Sinon, vous pouvez consulter la documentation et voir si la version actuelle peut être utilisée et s'il faut mettre à jour les dépendances.

_{Envoyé avec GitHawk}

jas0ncn le 28 juil. 2019

@ fwh1990 @ jas0ncn @redclown
sur les pls anglais)

akaguny le 29 juil. 2019

👍7

Gardez-le comme une chaîne anglaise, merci ~

ztplz le 30 juil. 2019

👍2

4.0 alpha a été publié. C'est incroyable. Allez mon frère.

Je vais refactoriser mon projet une fois que vous publiez la version

fwh1990 le 31 juil. 2019

👀1

Le thème par défaut de antd est beau, mais il peut aussi être meilleur.
Pour plus de lisibilité, pensez à un contraste amélioré et utilisez un texte plus grand.

Il y a tellement d'articles et d'outils.
https://www.google.com/search?q=web+readability

Airkro le 1 août 2019

❤1

Il est préférable de fournir un script pour migrer antd v3 vers v4.

Dans le projet biz, il existe trop de composant de formulaire. La migration de antd v3 vers la v4 coûtera trop de fois.

L'équipe react-relay a fait quelque chose de similaire.
Si vous souhaitez migrer react-relay v3 vers react-relay v4 Realease , vous devez modifier de nombreux fichiers.
Pour cela, ils utilisent jscodeshift pour écrire un script de migration, de sorte que l'utilisateur de react-relay puisse facilement migrer react-relay v3 vers la v4.

xyy94813 le 1 août 2019

👍2

Je pense qu'il est difficile de surcharger certains styles. Alors, s'il y a un plan pour améliorer cela?

Personnellement, je préfère utiliser CSS-in-JS, il est très flexible et s'intègre incroyablement bien avec React.

FuJuntao le 2 août 2019

👍5

Lors de l'utilisation du composant de classe sous 4.0 alpha, l'entité de formulaire ne peut pas être obtenue, https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn L'exemple de code sous ce lien ne peut pas être implémenté, et il n'y a pas d'entité dans formRef méthode

Résolu en

Kwei9 le 6 août 2019

@ Kwei9 , pouvez-vous ouvrir un numéro et le joindre pour le reproduire?Laisse-moi regarder

zombieJ le 6 août 2019

@ Kwei9 , pouvez-vous ouvrir un numéro et le joindre pour le reproduire?Laisse-moi regarder

L'écriture de référence est modifiée pour cette solution

Kwei9 le 6 août 2019

Je pense que le moment est venu de s'attaquer à la pollution de style mondial! Cela rend très nécessaire d'utiliser antd avec d'autres applications!

ChuckJonas le 7 août 2019

👍16 ❤4 👎1

Moment est trop gros pour un projet frontal, il existe de nombreuses alternatives, mais les accessoires de TimePicker et de DatePicker relaient Moment. Cela nous conduit ne peut pas remplacer le moment ...

@ jas0ncn Bonjour, veuillez envisager de remplacer momentjs par dayjs (une alternative de 2 ko). Il s'agit déjà d'un numéro testé de Replace Moment.js dans Ant Design (Antd) avec Day.js https://github.com/iamkun/dayjs/issues/529 et cela fonctionne très bien.

En tant que principal responsable de la maintenance de dayjs, nous sommes prêts à offrir toute aide pour ce remplacement.

Merci.

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

xxyuk le 8 août 2019

👍34 ❤12

L'ancienne méthode d'utilisation de l'icône sera * obsolète *:
import { Icon, Button } from 'antd';

const Demo = () => (
  <div>
    <Icon type="smile" />
    <Button icon="smile" />
  </div>
);
Utilisera plutôt une icône d'importation unique dans la version 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>
);
J'ai une idée de la nouvelle référence d'icône. En raison du nouveau libellé ci-dessus, chaque icône équivaut à un composant distinct. Par exemple, l'introduction d'une icône de chargement peut ressembler à ceci:

import Loading from 'antd/icons/Loading';

<Loading />

Mais généralement, vous pouvez encapsuler vous-même un composant de chargement réel. Dans le passé, <Icon /> savaient que c'était une icône en un coup d'œil. Maintenant, il prend trop de noms et vous devez trouver le lieu d'importation si vous voulez savoir si c'est l'icône.
tel que:

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

À première vue, il semble que les deux suivants ne puissent pas être considérés comme des icônes (bien sûr, cela n'a aucun effet sur l'exécution du code ~)
Si vous modifiez le libellé suivant:

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

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

Grâce à la couche externe de pain, il ressemble beaucoup à la précédente, et il peut également être utilisé à la demande. Il ne s'agit que d'introduire un composant Icon.
Et si certaines conventions sont respectées, l'icône définie par l'utilisateur peut être transmise via l'attribut spec? Cela équivaut à antd qui aide à définir un grand nombre d'icônes à l'avance, mais celles définies par l'utilisateur sont exactement les mêmes ~~~

ps: Ou est-ce que ce genre d'écriture a en fait été pensé il y a longtemps ou n'y a pas pensé parce qu'il y a un problème avec ce genre d'écriture? . . 😂
J'y ai juste pensé. . .

ppbl le 14 août 2019

👍4

@ppbl est similaire à ce qui suit selon votre idée:

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

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

La nouvelle icône est également générée de la même manière, voir https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

Pouvons-nous éviter cette situation en ajoutant le préfixe / suffixe Icon au nom de Icon?

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

<LoadingOutlineIcon  {...otherProps}/>

vagusX le 14 août 2019

👍1

Veuillez travailler sur la réduction de la taille du paquet
https://github.com/ant-design/ant-design/issues/9419
Lors de l'importation de Button ajoute 95 Ko au projet - c'est tout simplement inacceptable en 2019. 👎

avalanche1 le 14 août 2019

😕1

@vagusX Peut-être que je pense que le nom est un peu long? Je pense toujours que le nom est concis et ressemble à un petit composant ou à un composant relativement simple. Si le nom est trop long, il devrait être un gros composant (bien sûr, c'est une mauvaise impression ~ je sais). . ~

Bien sûr, si je sais que c'est une icône juste pour voir <Icon /> , je peux aussi créer moi-même <Icon /> composant

ppbl le 14 août 2019

@ avalanche1, vous pouvez consulter le résultat de l'analyse du bundle de ce pr https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838, et la taille du composant Button décline clairement

vagusX le 14 août 2019

Bon à savoir. Mais sur vos captures d'écran, il n'y a aucune indication de la taille réelle, donc je ne peux ni confirmer ni infirmer.

avalanche1 le 15 août 2019

Je vais migrer Form vers de nouvelles API, mais j'ai trouvé que la version de field-form est instable, donc je veux savoir si des changements de rupture avec ces interfaces seraient désormais possibles à l'avenir.

orzyyyy le 16 août 2019

@orzyyyy ,
antd publie la version 4.0-alpha.x pour que les bénévoles sociaux et internes puissent la tester. Si aucun commentaire négatif de la version alpha, cette API sera la dernière à la sortie.

zombieJ le 16 août 2019

👍3

@ avalanche1 @ant-design/icons la version v4-alpha prend en charge le tremblement des arbres, de sorte que la taille du bundle dépend de la quantité d'icônes que vous avez utilisées dans votre propre projet, que vous utilisiez le composant antd qui importe des icônes en interne ou que vous utilisiez @ant-design/icons directement, alors peut-être que je ne pourrais pas comprendre votre inquiétude sur ce point.

vagusX le 16 août 2019

Pourquoi parlons-nous d'icônes alors que mon message initial portait sur Button, Calendar et d'autres composants? https://github.com/ant-design/ant-design/issues/9419

avalanche1 le 16 août 2019

La valeur DatePicker doit être moment, peut-être supprimer moment? Si je mets à jour le from, je dois convertir en moment

jeessy2 le 18 août 2019

👍2

Pour le moment , voici ma considération. DatePicker utilise toujours moment par défaut depuis l'exigence de compatibilité, mais il fournit la fonction de fabrique à créer avec une autre bibliothèque de date:

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 />;

Juste réflexion, bienvenue discussion.

zombieJ le 19 août 2019

👍6

Il est maintenant temps de se débarrasser de moment.js !

Moment.js ne sera arbre en raison de son API OOP complexe . (Ils auraient besoin de le réécrire à partir de zéro). C'est une surcharge énorme pour antd et les utilisateurs.
Ant Design v4 est une version majeure avec déjà des changements de rupture. Le moment est venu!
Je suggère de ne pas le remplacer par une autre bibliothèque. Antd peut utiliser quelque chose de petit comme dayjs ou date-fns interne, mais il devrait accepter des objets ou des chaînes natives Date pour ses composants.

Chaque fois que vous appelez moment() , un chiot meurt .

:chien:

onury le 21 août 2019

👍38 👀1 ❤1 👎1

@zombieJ aimerait savoir comment progresse le composant Table. Existe-t-il une version

Liu-Ya le 21 août 2019

La version alpha inclut-elle déjà la nouvelle table? Si tel est le cas, le site Web de prévisualisation devrait en contenir un exemple?

ArthurBrito le 21 août 2019

La table est dans la file d'attente, actuellement je travaille sur la liste virtuelle.

zombieJ le 21 août 2019

👍9 ❤4

Qu'en est-il du support des composants stylisés?

khryshyn le 24 août 2019

👎3 👍1

Formulaire initialValues ne définit pas moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

hengkx le 24 août 2019

👍1

J'espère que Form peut fournir une version incontrôlée pour résoudre le problème de performance des grands formulaires comme Excel

zoffyzhang le 26 août 2019

Y a-t-il une chance que la documentation alpha soit déplacée vers le site de documentation Ant habituel?

Mon employeur bloque les domaines Netlify et je suppose que d'autres pourraient aussi le faire.

hannaofsweden le 4 sept. 2019

👍1

Un plan concret pour prendre en charge le fonctionnement du clavier sur le menu et la liste déroulante?

wattlebird le 9 sept. 2019

Y a-t-il une chance que la documentation alpha soit déplacée vers le site de documentation Ant habituel?
Mon employeur bloque les domaines Netlify et je suppose que d'autres pourraient aussi le faire.

Pourquoi? lol

lu-zen le 10 sept. 2019

On espère que le composant Table ressemblera au composant Table de l'élément. Chaque colonne définira automatiquement une largeur en premier. Il est suggéré que le caractère d'en-tête du tableau soit remplacé par min-width au lieu de changement de ligne. On espère que le pliage et les fonctions de défilement peuvent être utilisées simultanément. On espère que la table en forme d'arbre ressemblera à TreeSelect lorsque plusieurs choix sont faits.

J'espère que le composant Table peut être comme le composant Table de Element. Chaque colonne définira automatiquement une largeur en premier. Il est recommandé de changer le caractère de la tête du tableau en min-width sans wrapping. J'espère que la fonction de pliage et la fonction de défilement pourront être utilisées en même temps. J'espère que la table arborescente sera utilisée lors de sélections multiples , Peut être similaire à TreeSelect

z5829984520 le 11 sept. 2019

👍3

Y a-t-il une chance qu'avec la v4 ou peut-être la v5, vous fassiez quelque chose à propos de la personnalisation? MaterialUI est beaucoup plus facile à personnaliser, ce qui en fait toujours un choix pour le projet sur lequel je travaille, même si j'aimerais vraiment utiliser AntD car il est beaucoup plus complet, etc.
Veuillez déposer moins pour quelque chose de mieux pour la personnalisation.

murbanowicz le 18 sept. 2019

👍5 👎1

Après avoir laissé une agence tester notre application Web antd, ils ont identifié de graves problèmes d'accessibilité et nous avons obtenu la pire note possible. Lors de l'examen des principales raisons, cela se résume aux composants rc suivants:

rc-select (nous avons dû remplacer par Downshift et appliquer des styles antd sur le dessus)
rc-tabs (voir # 18798)
et peut-être d'autres que nous n'utilisons pas jusqu'à présent

Quelle est l'ampleur de la gouvernance d'antd sur les composants rc et l'équipe serait-elle en mesure de résoudre ce problème en temps opportun pour la version 4.0? L'accessibilité sera toujours relativement peu prioritaire, mais la vérité est qu'il est de plus en plus difficile de l'ignorer car les entreprises sont légalement tenues de fournir des applications accessibles aux employés / clients.

Vous pouvez compter sur moi pour des tests approfondis avec des lecteurs d'écran et des comparaisons avec les meilleures pratiques.

filipjnc le 19 sept. 2019

👍1

MaterialUI est beaucoup plus facile à personnaliser

@murbanowicz pourriez-vous élaborer? Je suis curieux de savoir pourquoi vous pensez cela.

abenhamdine le 19 sept. 2019

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.

Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.

Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.

J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

murbanowicz le 19 sept. 2019

👍6

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.
Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.
Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.
J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

explication claire et précise, merci!

abenhamdine le 19 sept. 2019

👍3

@abenhamdine Pas de problème!
Dans MUI, il y a un ThemeProvider lequel vous enveloppez votre application et vous configurez tout le thème juste par l'objet JS qui est tapé dans TypeScript, donc c'est tellement agréable de travailler avec.
Dans AntD pour personnaliser, vous devez jouer avec LESS ou SASS (avec certains plugins), vous devez donc gérer d'autres deps, etc., vous devez passer par la source des composants pour trouver la variable que vous souhaitez modifier pour un composant spécifique, etc.
De plus, il n'y a pas de bon moyen de changer le thème à l'exécution, ce qui est si facile avec MUI, simplement en changeant d'objet JS qui peut être facilement extrait du serveur, etc.
Fondamentalement, lorsque vous recherchez la personnalisation d'AntD et de MUI, vous trouvez des exemples faciles sur MUI car il n'y a rien à dire car c'est simple, mais lorsque vous recherchez la personnalisation AntD sur Google, vous trouvez beaucoup de solutions hacky, etc.
J'adore AntD pour ses complets et tant de bons composants, mais la personnalisation est vraiment mauvaise et basée sur mon expérience et mes discussions avec d'autres développeurs, cela devrait être l'un des points clés de la feuille de route

Je suis d'accord avec @murbanowicz que la personnalisation avec Antd peut devenir un peu compliquée (fuite de style global, manière piratée d'utiliser Sass, conflits de priorité entre les remplacements de style, beaucoup de dépendances externes telles que moment conduisant à une taille de paquet énorme ), mais ayant utilisé MUI pendant longtemps, je trouve Antd beaucoup plus personnalisable.

Je ne suis pas au courant des nouvelles versions de MUI, mais la dernière fois que j'ai vérifié, il y avait une partie des composants que vous ne pouviez pas personnaliser, car MUI utilise styled-components , si les développeurs n'ont pas ajouté classNames partout, vous ne pouvez pas simplement sélectionner le nom de classe exact du composant et le remplacer par votre propre style.
Le thème est cool pour une utilisation directe d'une bibliothèque, mais si vous voulez adapter le style à votre système de conception, c'est très compliqué avec MUI, parfois même impossible;)

Mais quand même, antd effectivement besoin d'un peu de travail pour rendre l'expérience de personnalisation plus facile;)

pybuche le 19 sept. 2019

👍4

@filipjnc ,
rc-select publié une version alpha qui améliore l'accessibilité. Vous pouvez aider à tester là-dessus. Et la branche de préparation v4 l'a utilisée, vous pouvez voir un aperçu en haut.
Pour rc-tabs , puisque ce n'est pas la priorité absolue, je vais l'améliorer aussi mais plus tard.

zombieJ le 20 sept. 2019

@zombieJ d' accord, je vais jeter un oeil à rc-select alpha.

Même si rc-tabs n'est pas une priorité, pouvez-vous jeter un œil à ma pull request, où je corrige les points les plus critiques de nos résultats de test d'accessibilité?

filipjnc le 20 sept. 2019

J'ai un problème ici. Selon la méthode actuelle de réforme des icônes, s'il existe une forme et une icône de composant antd
Un seul alias peut être donné lorsque le formulaire est introduit en même temps

zkwolf le 25 sept. 2019

👎1

@zkwolf Oui, nous https://github.com/ant-design/ant-design-icons/pull/118

cc @vagusX

afc163 le 25 sept. 2019

👎1

Je souhaiterais vivement que le problème du re-rendu

avalanche1 le 30 sept. 2019

👍1

Veuillez noter que sur https://next.ant.design, les composants ne sont pas triés par ordre alphabétique dans la barre latérale des composants
Schermata 2019-09-30 alle 18 01 03

avalanche1 le 30 sept. 2019

👍1

Comme vous le savez peut-être, la conception des fourmis ne se porte pas vraiment bien en termes d'accessibilité. Ce n'est pas trop visible en surface pour la majorité des gens, mais c'est un gros problème lorsque vous plongez plus profondément. Voyez comment ant-design obtient de très mauvais résultats ici: https://darekkay.com/blog/accessible-ui-frameworks/

La bonne nouvelle est que, puisque j'aime beaucoup le design de fourmis et que je compte continuer à l'utiliser pour des projets d'entreprise, mon objectif est de l'amener en tête de liste.

Je laisse une agence tester une de mes applications d'entreprise pour un client en Allemagne (où l'accessibilité est un sujet important dans les grandes entreprises). Les choses les plus critiques étaient:

Accessibilité du lecteur d'écran pour les composants de base mais cruciaux tels que Select, Autocomplete et Tabs
Contrastes de couleurs dans de nombreux endroits
Navigation au clavier à certains endroits

J'ai d'abord choisi rc-tabs comme solution rapide pour résoudre tous ses problèmes d'accessibilité - il devrait bientôt sortir (https://github.com/react-component/tabs/pull/218). Mais ce qui m'inquiète le plus, c'est rc-select , en particulier la partie combobox (autocomplete). Les combobox sont l'un des aspects les plus délicats de l'accessibilité des lecteurs d'écran et il est facile de se tromper. Pour résoudre tous les problèmes, il faut non seulement quelques ajustements aux propriétés de l'aria, mais plutôt une grande refonte.

Pour résoudre ce problème rapidement dans mon application avant la mise en service, j'ai remplacé la sélection et la saisie semi-automatique de ant-design ( rc-select ) par mes propres composants basés sur https://github.com/downshift-js/downshift. Je viens de reproduire les meilleures pratiques ARIA et d'appliquer les styles antd par-dessus - c'est presque exactement la même chose et c'est parfaitement accessible.

La question provocante est donc: envisageriez-vous de ne pas faire le double travail et de déprécier rc-select en faveur de la bibliothèque downshift plus populaire et complète? Vous pourriez gagner du temps dans l'équipe et vous concentrer sur le perfectionnement des autres composants de base, qui n'ont pas de bonnes alternatives sur le marché open-source.

filipjnc le 4 oct. 2019

👍13 ❤2 🎉1

Cette idée me semble fantastique @filipjnc . De plus, rétrograder fait 1/4 de la taille de rc-select. J'espère que l'équipe antd pourra le faire.

ArthurBrito le 4 oct. 2019

👍3

J'aimerais voir plus d'améliorations des couleurs dans la version 4.0. Plus précisément, les documents mentionnent une «palette de couleurs de visualisation des données (à venir)» qui serait très utile dans les tableaux de bord et autres applications lourdes de données. Des gris chauds et froids aideraient également à créer des palettes de couleurs plus cohérentes. De plus, c'est une bonne occasion de corriger le contraste des couleurs pour l'accessibilité (comme mentionné par @filipjnc). Continuez votre bon travail 👍

jlarmstrongiv le 4 oct. 2019

Comme vous le savez peut-être, la conception des fourmis ne se porte pas vraiment bien en termes d'accessibilité. Ce n'est pas trop visible en surface pour la majorité des gens, mais c'est un gros problème lorsque vous plongez plus profondément. Voyez comment ant-design obtient de très mauvais résultats ici: https://darekkay.com/blog/accessible-ui-frameworks/
La bonne nouvelle est que, puisque j'aime beaucoup le design de fourmis et que je compte continuer à l'utiliser pour des projets d'entreprise, mon objectif est de l'amener en tête de liste.
Je laisse une agence tester une de mes applications d'entreprise pour un client en Allemagne (où l'accessibilité est un sujet important dans les grandes entreprises). Les choses les plus critiques étaient:
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
J'ai d'abord choisi rc-tabs comme solution rapide pour résoudre tous ses problèmes d'accessibilité - il devrait bientôt sortir ( react-component / tabs # 218 ). Mais ce qui m'inquiète le plus, c'est rc-select , en particulier la partie combobox (autocomplete). Les combobox sont l'un des aspects les plus délicats de l'accessibilité des lecteurs d'écran et il est facile de se tromper. Pour résoudre tous les problèmes, il faut non seulement quelques ajustements aux propriétés de l'aria, mais plutôt une grande refonte.
Pour résoudre ce problème rapidement dans mon application avant la mise en service, j'ai remplacé Select and AutoComplete ( rc-select ) par ant-design par mes propres composants basés sur https://github.com/downshift-js/downshift. Je viens de reproduire les meilleures pratiques ARIA et d'appliquer les styles antd par-dessus - c'est presque exactement la même chose et c'est parfaitement accessible.
La question provocante est donc: envisageriez-vous de ne pas faire le double travail et de déprécier rc-select en faveur de la bibliothèque downshift plus populaire et complète? Vous pourriez gagner du temps dans l'équipe et vous concentrer sur le perfectionnement des autres composants de base, qui n'ont pas de bonnes alternatives sur le marché open-source.

Je ne serais pas aussi enthousiasmé par la rétrogradation, voir https://github.com/downshift-js/downshift/issues/730
L'accessibilité est importante pour certains utilisateurs, mais les performances sont importantes pour encore plus d'utilisateurs.

abenhamdine le 5 oct. 2019

👀1

La table est dans la file d'attente, actuellement je travaille sur la liste virtuelle.

salut, @zombieJ
Y a-t-il des progrès dans le pied de page de résumé?

alexchen1875 le 8 oct. 2019

@ alexchen1875 ,
En attente d'une nouvelle mise à jour du code du cycle de vie. Le tableau est le suivant après avoir terminé :)

zombieJ le 8 oct. 2019

👍2 ❤1

4.0 Certains paramètres d'accessoires peuvent-ils être modifiés en cas de chameau? Par exemple, Input.TextArea in autosize remplacé par autoSize ?
Les accessoires des balises HTML natives dans React sont tous des cas camel, comme <input autoComplete /> , ce autosize semble toujours discordant. . .

jinliming2 le 9 oct. 2019

👍7 👎1

Il peut être modifié dans 3.x, compatible avec et supprimer l'utilisation d'origine. @ jinliming2 Êtes- vous intéressé par un PR?

afc163 le 10 oct. 2019

👎1

4.0 Pourquoi marquer les props.children de Tree comme une api obsolète et recommander la méthode pure data de treeData à la place. Je pense que props.children est très utile et hautement jouable
ComponentWillReceiveProps a été marqué comme obsolète dans la dernière API de react. À l'heure actuelle, il s'avère que le composant table et le composant Animate existent toujours pendant la période d'essai.

itlangzi le 14 oct. 2019

👎1

+1 pour l'accessibilité. S'il vous plaît!

timkindberg le 18 oct. 2019

En parlant du problème de la taille de l'icône claire, il semble que l'icône des autres composants est de 12 pixels et que le sélecteur de date est de 14 pixels. Y a-t-il une prise en compte de la différence entre la taille des icônes claires et des suffixes d'autres composants ou est-ce 14 pixels parce que le sélecteur de date est le commutateur d'icône?Avez-vous des plans pour unifier la taille

zkwolf le 19 oct. 2019

👎1

@zombieJ prévoit d'ajouter une fonction de tri multi-colonnes de table

Nokecy le 23 oct. 2019

👎1

pls écrire en anglais

akaguny le 23 oct. 2019

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

Le problème d'une taille de moment trop importante sera-t-il résolu?

swaitw le 24 oct. 2019

👎1

Le problème d'une taille de moment trop importante sera-t-il résolu?

Essayez d'abord d'utiliser dayjs

fatelei le 24 oct. 2019

👍6 👎1

Peut-il être en anglais? Compte tenu des sentiments des étrangers, je traduis toujours sur Google. Il n'est pas important que la norme de grammaire ne soit pas standard, les mots peuvent être compris par eux

wanliyunyan le 24 oct. 2019

👎3

@ afc163
Avez-vous pensé que les étrangers suivent ce repo? Malheureusement, Google Translate n'est pas un bon outil pour comprendre ce que vous dites. Je me rends compte que la plupart des développeurs et utilisateurs d'Ant-Design sont chinois, mais considérez-vous également des non-chinois?
Par conséquent, je vous exhorte à utiliser le langage international pour nous respecter tous.

lvlohammadi le 24 oct. 2019

👍19 ❤7 👎6

Salut,
Je voulais essayer Ant Design 4.0 avec create-react-app et Typescript.
J'ai suivi les instructions sur https://next.ant.design/docs/react/introduce mais je ne parviens pas à obtenir une application fonctionnelle.
Les instructions de base suivies ( import Button from 'antd/es/button'; ) pour create-react-app provoquent une erreur:

Impossible de trouver le module antd / es / bouton

Après avoir ajouté react-app-rewired, personnaliser-cra, babel-plugin-import et changer l'importation en import {Button} from 'antd' j'obtiens un message d'erreur:

Impossible de trouver un fichier de déclaration pour le module 'antd'

Pouvez-vous me donner des conseils sur la façon de faire fonctionner antd4 avec crea-react-app et dactylographié, s'il vous plaît?

gynekolog le 24 oct. 2019

@gynekolog ,
Veuillez vérifier si node_modules correctement installé.

réf https://codesandbox.io/s/cool-paper-4y1u7

zombieJ le 24 oct. 2019

@lvlohammadi Malheureusement, certains Chinois comme moi ne sont pas assez bons en anglais, mais je ferai de mon mieux pour utiliser la langue internationale pour participer à la communication communautaire.

yoyo837 le 25 oct. 2019

❤12

@gynekolog ,
Veuillez vérifier si node_modules correctement installé.
réf https://codesandbox.io/s/cool-paper-4y1u7

Vous avez raison. je cours

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

au lieu

yarn add "[email protected]"

La honte...
Je vous remercie.

gynekolog le 25 oct. 2019

dropdownMatchSelectWidth on Select component break on alpha version, effective in the previous version

GuichiZhao le 25 oct. 2019

Si je dois démarrer un nouveau projet avec antd, choisiriez-vous la version 3 ou 4 alpha? Dans quelle mesure la version 4 est-elle «prête pour la production»? Visez-vous toujours une version Q4?

thj-dk le 1 nov. 2019

👍1

Si je dois démarrer un nouveau projet avec antd, choisiriez-vous la version 3 ou 4 alpha? Dans quelle mesure la version 4 est-elle «prête pour la production»? Visez-vous toujours une version Q4?

Antd 4 n'est pas encore prêt pour la production. Vous devriez commencer par antd 3, la transition devrait être facile (notamment si les codemods sont fournis comme prévu).

abenhamdine le 1 nov. 2019

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.

yeegr le 4 nov. 2019

👎2

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.

Je pense que cette idée de tout purifier est inutile. Il vaut mieux se concentrer sur quelque chose de plus important.

faradaytrs le 5 nov. 2019

👍7

Des plans pour la sélection multiple dans la saisie semi-automatique, comme https://react-select.com?

nite le 5 nov. 2019

👍3 👀1

J'espère voir une séparation complète entre la logique et l'affichage, c'est-à-dire qu'à part la manipulation des noms de classe, js ne fait rien d'autre à la vue. L'apparence visuelle doit toutes être gérées par CSS (LESS). De plus, au lieu des composants React, utilisez peut-être des composants Web afin que les développeurs non React puissent l'utiliser plus facilement.
Je pense que cette idée de tout purifier est inutile. Il vaut mieux se concentrer sur quelque chose de plus important.

Je ne pense pas qu'il y ait une question plus urgente que la séparation. Dans une équipe, CSS est généralement géré par des concepteurs, tandis que JS est généralement géré par des codeurs. Permettre aux deux de manipuler le style conduira au chaos et au temps de développement inutilement perdu.

Prenez Menu par exemple, la largeur et la hauteur par défaut sont définies par JS, le problème est que lorsque quelqu'un veut changer la largeur ou la hauteur de l'emballage extérieur, le menu ressortirait ou présenterait des espaces. Cela nécessiterait à la fois le concepteur et le codeur de corriger, ce qui signifie des temps d'arrêt.

De plus, en tant que composants, le code n'est pas trop complexe, la séparation ne devrait pas demander trop d'efforts, mais le résultat faciliterait beaucoup la vie des utilisateurs et de l'équipe ant.design elle-même.

yeegr le 7 nov. 2019

Un autre petit problème, Icon doit être défini par défaut sur 16 pixels et non sur 14 pixels, qui est la taille de police par défaut globale. Cela signifie que Icon doit utiliser des variables telles que @ default-icon-size, @ icon-size-lg, etc., distinctes du texte. Ce n'est pas vraiment un bug, mais une fonctionnalité perdue.

yeegr le 7 nov. 2019

👀1 🚀1

@ afc163
Avez-vous pensé que les étrangers suivent ce repo? Malheureusement, Google Translate n'est pas un bon outil pour comprendre ce que vous dites. Je me rends compte que la plupart des développeurs et utilisateurs d'Ant-Design sont chinois, mais considérez-vous également des non-chinois?
Par conséquent, je vous exhorte à utiliser le langage international pour nous respecter tous.

Les gens ont le droit d'utiliser leur propre langue et devraient se sentir à l'aise de le faire, et même si je respecte l'effort visant à impliquer le plus grand public possible en fournissant des traductions, personne ne devrait avoir une conférence juste pour utiliser la langue avec laquelle il est le plus à l'aise. que le responsable comprend pour communiquer. L'idée que les principaux contributeurs de ce projet ne devraient pas utiliser leur langue maternelle pour communiquer car une autre langue est supérieure est au-delà de l'absurde. Il est normal de demander des traductions, mais avec respect. Refuser les réponses parce qu'elles sont en chinois est à la fois contre-productif et enfantin.

viztor le 9 nov. 2019

👍21 👎1

Mec, est-ce que And Design version 4.0 a JSS au lieu de _Less_ pour générer du CSS?

amerllica le 13 nov. 2019

Mec, est-ce que And Design version 4.0 a JSS au lieu de _Less_ pour générer du CSS?

AFAIK, non. Mais vous pouvez essayer d'utiliser des composants stylisés (par exemple) en plus de moins.

abenhamdine le 13 nov. 2019

👍2

Merci, cher @ tomgao365 , je crée le problème auquel vous l'avez référencé. Je veux faire un excellent PR pour supprimer Less complètement et utiliser JSS à la place. Travailler sur la version 3 n'est pas une bonne idée, car de nombreux projets ont été réalisés en utilisant la version 3, j'ai donc décidé de travailler sur l'implémentation de JSS sur la version 4.

Aussi, j'ai une petite question, cher @abenhamdine , quelle est votre idée d'utiliser JSS au lieu d'utiliser Less?

amerllica le 13 nov. 2019

Aussi, j'ai une petite question, cher @abenhamdine , quelle est votre idée d'utiliser JSS au lieu d'utiliser Less?

Principaux avantages selon moi:

style dynamique (douleur avec moins)
autocompletion (pas sûr pour celui-là, dépend de l'outillage / bibliothèque JSS que vous utilisez)
héritage des styles

la peine d'essayer.
Mais ce n'est pas une solution miracle.

abenhamdine le 13 nov. 2019

Cher @abenhamdine , je laisse un numéro qui a obtenu le badge Discussion . C'est # 19181.

Et je veux commencer à implémenter JSS et omettre Less, mais une nouvelle version arrive et j'ai peur que tous mes efforts soient vains.

amerllica le 16 nov. 2019

Heureux de voir une discussion sur le remplacement de moment.js par une alternative comme Day.js ou un objet de date natif ici https://github.com/ant-design/ant-design/issues/19738

xxyuk le 16 nov. 2019

😄2

Y aura-t-il un moyen plus simple de changer les thèmes de couleur à l'aide de create-react-app dans la version 4?

flashtheman le 16 nov. 2019

Je suis d'accord avec @flashtheman pour remplacer le thème sans https://emotion.sh/docs/theming

hsz le 16 nov. 2019

👍2

À l'ère de jQuery, les paramètres de thème sont très populaires et les utilisateurs aiment l'utiliser.
J'attendais un moyen simple de modifier le thème dans l'environnement de production depuis plus de 2 ans.

tomgao365 le 17 nov. 2019

👍4 👎3

Dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, comment doit-elle être gérée dans la nouvelle version? Pour le moment, je ne peux penser qu'à utiliser des chaînes de variables require +. Il s'avère que je n'ai besoin que de remplir l'attribut type avec des variables. Existe-t-il un autre moyen de le gérer?
google translate: dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, alors comment la gérer dans la nouvelle version, pour le moment ne peut penser qu'à la chaîne de variable require +, l'original n'a besoin que de remplir l'attribut type avec des variables, quelles autres méthodes de traitement?

thding le 21 nov. 2019

Dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, comment doit-elle être gérée dans la nouvelle version? Pour le moment, je ne peux penser qu'à utiliser des chaînes de variables require +. Il s'avère que je n'ai besoin que de remplir l'attribut type avec des variables. Existe-t-il un autre moyen de le gérer?
google translate: dans la nouvelle version du composant icon, si l'icône est déterminée dynamiquement, alors comment la gérer dans la nouvelle version, pour le moment ne peut penser qu'à la chaîne de variable require +, l'original n'a besoin que de remplir l'attribut type avec des variables, quelles autres méthodes de traitement?

Essayez d'utiliser https://github.com/smooth-code/loadable-components recommandé dans la documentation React

jinliming2 le 21 nov. 2019

Quand la version officielle sera-t-elle publiée?

guangming21 le 22 nov. 2019

4.0 La table prend-elle en charge la fonction Pivot?

liuhaidi1209 le 28 nov. 2019

@ afc163 - On dirait que la pollution de style global est le problème numéro 1 que les gens veulent avec une nouvelle version. Avez-vous quelqu'un pour y travailler? Je serais heureux de faire ce travail et d'aider. Cela ne devrait pas être difficile, il faudra juste quelques efforts. Je souffre également de ce problème avec Ant Design. J'aimerais le résoudre.

meebix le 29 nov. 2019

👍9

Des travaux sont-ils en cours pour réduire la taille des composants?
Pour une fois: pourquoi si je veux un simple Button - je dois importer tout le fichier antd.css ??

avalanche1 le 29 nov. 2019

Des travaux sont-ils en cours pour réduire la taille des composants?
Pour une fois: pourquoi si je veux un simple Button - je dois importer tout le fichier antd.css ??

@ avalanche1 Reportez-vous à https://ant.design/docs/react/introduce#Usage

Utilisez antd modulaire

jinliming2 le 30 nov. 2019

Pour moi, un composant de téléchargement ne suffit pas actuellement pour prendre en charge le rendu de liste personnalisée.
De plus, la progression du téléchargement n'est qu'un pourcentage et il n'est pas pratique de l'étendre pour prendre en charge l'affichage de la vitesse en temps réel.

codetalks-new le 3 déc. 2019

@ banxi1988

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

Si vous voulez un affichage de la vitesse, onChange a renvoyé le pourcentage du fichier qui a été téléchargé. Vous pouvez calculer la vitesse de téléchargement.

muzea le 3 déc. 2019

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Cela doit arrêter tout support IE, arrêter le support IE11 est trop radical, même si je soutiens également le faire.

Vous pouvez toujours le faire avec le support de secours. Ex: color: var(--red, @red); Une simple recherche / remplacement global pour toutes les variables actuelles résoudrait cela.

davidpanzarella le 5 déc. 2019

Est-ce que l'abandon de MOINS en faveur du SASS ou d'une autre meilleure solution de coiffage est envisagé pour la v4 ou non?

murbanowicz le 8 déc. 2019

@murbanowicz , Salut, merci pour votre commentaire, je laisse un problème concernant l'utilisation de JSS au lieu de Less et ici, je montre ma préparation à cette migration mais personne ne montre aucune action.

amerllica le 8 déc. 2019

Salut @zombieJ , merci pour votre excellent travail sur Ant Design? Existe-t-il des plans pour fournir un moyen prêt à l'emploi pour basculer le thème sombre dans l'application?

veeral-patel le 8 déc. 2019

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

shengliangli le 10 déc. 2019

👎8

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

@shengliangli estime que le couplage est trop fort. . .

jinliming2 le 10 déc. 2019

👎1

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.
@shengliangli estime que le couplage est trop fort. . .

Je pense que Form.Item est un composant "extra" ajouté par antd afin de réaliser la fonction de liaison de données du composant Form.Il y a des raisons à cela, mais après tout, il ajoute une chose supplémentaire. Tout comme tout le monde critique le problème de trop de code modulaire dans redux, les développeurs peuvent ne pas aimer cette façon d'écrire. Si la fonction de liaison de données implémentée par form.item peut être comprise comme les caractéristiques des composants d'entrée tels que Input, afin d'améliorer les capacités des composants d'entrée, cela semble-t-il plus naturel?

J'ai aussi pensé au problème du couplage, dont la racine peut résider dans la façon dont nous définissons les capacités et les caractéristiques de comportement des composants d'entrée.

shengliangli le 11 déc. 2019

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.
@shengliangli estime que le couplage est trop fort. . .
Je pense que Form.Item est un composant "extra" ajouté par antd afin de réaliser la fonction de liaison de données du composant Form.Il y a des raisons à cela, mais après tout, il ajoute une chose supplémentaire. Tout comme tout le monde critique le problème de trop de code modulaire dans redux, les développeurs peuvent ne pas aimer cette façon d'écrire. Si la fonction de liaison de données implémentée par form.item peut être comprise comme les caractéristiques des composants d'entrée tels que Input, afin d'améliorer les capacités des composants d'entrée, cela semble-t-il plus naturel?
J'ai aussi pensé au problème du couplage, dont la racine peut résider dans la façon dont nous définissons les capacités et les caractéristiques de comportement des composants d'entrée.

Je ne suis pas particulièrement d'accord.

dancerphil le 11 déc. 2019

Salut @zombieJ
Vous souhaitez savoir quand la version 4 sortira?
Au plaisir de vous entendre

madurak le 11 déc. 2019

👀2

Comment puis-je contribuer à la conception aussi.
Vous cherchez à entendre quelqu'un

ekeminimarkk001 le 12 déc. 2019

La version beta.0 est disponible, cela signifie-t-il qu'elle peut être utilisée?

fwh1990 le 12 déc. 2019

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Tout d'abord, vous devez savoir que cela n'a rien à voir avec le fait qu'il soit intégré ou non. L'utilisation de composants dits intégrés peut être considérée comme un accident
getFieldDecorator est le pont qui relie le composant de formulaire et le composant d'entrée. Form.item est passé dans les deux attributs value et onChange , puis le composant encapsulé passe value et onChange Ces deux méthodes d'interface interagissent avec le monde extérieur. En d'autres termes, tout composant tant que value et onChange sont implémentés peut devenir des paramètres de getFieldDecorator .C'est l'idée typique de program to interface

PS: je n'ai pas lu le code source, tout ce qui précède est ma supposition après avoir lu le document

GuichiZhao le 12 déc. 2019

👍1

La raison pour laquelle Form.Item peut interagir avec le Component sous-jacent n'a rien à voir avec un mécanisme 'intégré' comme on s'y attend. C'est juste une astuce courante dans le monde de la programmation appelée program to interface

Fondamentalement, le composant Form et le composant sous-jacent s'accordent sur quelque chose comme value et onChange . Ils servent d'interface entre les deux mondes pour communiquer. C'est une bonne conception dans le but de découpler

@dancerphil Vous pouvez peut-être clarifier l'idée plus explicitement sur la documentation officielle

GuichiZhao le 12 déc. 2019

Salut à tous, la version bêta de la version 4 est disponible. L'API est désormais stable, ce qui signifie qu'aucune modification majeure n'est apportée à l'API, sauf en cas de problème critique. Pendant la version bêta, les concepteurs aideront à poursuivre l'ajustement de la conception visuelle de l'interface utilisateur et nous nous concentrerons sur la correction de bogues. N'hésitez pas à essayer et aidez-nous en cas de bug d'incendie ou de rétroaction.

Merci à tous de participer au codage et aux essais. Votre aide compte beaucoup :)

Bonjour à tous, la version bêta est sortie. S'il n'y a pas de problèmes de conception majeurs avec l'API, aucune autre modification ne sera apportée. Dans la version bêta, les concepteurs aideront à ajuster le style d'interface utilisateur de la v4 et nous nous concentrerons sur les corrections de bogues. Bienvenue pour nous aider à trouver des bugs ou avoir tout autre commentaire.

Merci d'avoir participé aux travaux de développement et d'essai. Votre aide est très significative :)

réf: http://new-issue.ant.design/

zombieJ le 12 déc. 2019

🎉9 ❤5 🚀3

Comment puis-je contribuer à la conception aussi.
Vous cherchez à entendre quelqu'un

@ ekeminimarkk001 peut-être se référer: https://ant.design/docs/react/contributing

jinliming2 le 12 déc. 2019

@zombieJ Toutes les modifications répertoriées dans le problème ont-elles été implémentées dans la version bêta?

zachguo le 12 déc. 2019

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.
Tout d'abord, vous devez savoir que cela n'a rien à voir avec le fait qu'il soit intégré ou non. L'utilisation de composants dits intégrés peut être considérée comme un accident
getFieldDecorator est le pont qui relie le composant de formulaire et le composant d'entrée. Form.item est passé dans les deux attributs value et onChange , puis le composant encapsulé passe value et onChange Ces deux méthodes d'interface interagissent avec le monde extérieur. En d'autres termes, tout composant tant que value et onChange sont implémentés peut devenir des paramètres de getFieldDecorator .C'est l'idée typique de program to interface
PS: je n'ai pas lu le code source, tout ce qui précède est ma supposition après avoir lu le document

Après avoir lu vos réponses, je dois dire que ma suggestion pour le composant de formulaire d'antd n'est pas trop mature, mais d'un autre côté, faire cette suggestion revient à réfléchir complètement au problème du point de vue d'un utilisateur ordinaire. Pour un composant avec une intensité d'utilisation aussi élevée, comment peut-il être plus pratique à développer et à utiliser, à écrire moins de code et à utiliser une expression plus claire et plus naturelle, est mon attente ardente d'antd.

Du point de vue de l'utilisateur, antd est déjà très bon: la plupart des composants peuvent être utilisés dès qu'ils sont utilisés, puis oubliés lorsqu'ils sont épuisés. La raison de cet effet est indissociable de la bonne conception d'API et de l'empaquetage des composants, mais il existe encore des scénarios d'utilisation des composants (tels que from, table), et il y a place pour une meilleure amélioration.

Antd n'est qu'un composant outil du projet. Il est préférable de ne pas exposer son propre mécanisme d'implémentation ou de cacher et d'assimiler intelligemment le mécanisme d'implémentation dans l'API externe. Les utilisateurs veulent simplement utiliser ce composant, ils veulent l'utiliser sous la forme la plus pratique et la plus naturelle, et ils ne veulent pas être un expert sur un composant d'outil.

De retour au composant de formulaire, sous l'API 3.x actuelle, je suis en fait plus disposé à utiliser uform d'Ali.Par rapport au formulaire antd, uform a besoin d'écrire moins de code et est plus productif. Bien sûr, uform ressemble plus à une façon d'écrire déclarative, qui est très différente de la forme d'antd et peut ne pas avoir beaucoup de valeur pour référence.

En tant qu'antd party, c'est un peu embarrassant de demander autant d'exigences, mais par amour, j'espère que c'est mieux, j'espère que l'équipe du projet comprend, et j'espère optimiser davantage l'expérience de développement et d'utilisation du composant sous la version appropriée. .

shengliangli le 12 déc. 2019

👍3 👎1

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.

Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Xezzon le 14 déc. 2019

👀2 👍1

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.

Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Utilisez cette configuration

{
                    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 le 15 déc. 2019

Très étrange. Je n'ai pas du tout utilisé Icon, mais j'y ai intégré toutes les icônes-svg.

Numéro de version: 4.0.0-beta.0. Babel-plugin-import et tree-shaking sont utilisés, mais ils sont inutiles.

Utilisez cette configuration

{
                    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',
                                    ],
                                ],
                            },
                        },
                    ],
                },

Merci pour votre réponse, mais je n'ai pas travaillé selon votre configuration.

Xezzon le 16 déc. 2019

Version: 4.0.0-beta.0
Problème: lorsque le composant modal visible est commuté, la page revient à l'adresse:

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

xiaoxintang le 16 déc. 2019

@xiaoxintang C'est corrigé dans la branche principale, en attente de fusion.

shaodahong le 16 déc. 2019

@ afc163 Comment installer antd4.0 beta

XianZhengquan le 18 déc. 2019

👎2

https://next.ant.design/ a raccroché

githubmann le 18 déc. 2019

👀7

@ afc163 Comment installer antd4.0 beta

npm install antd@next
OU
yarn add antd@next

fwh1990 le 18 déc. 2019

👍1

Il semble que le site de prévisualisation soit cassé. Je n'obtiens qu'une erreur Page non trouvée .

shaoran le 18 déc. 2019

Une suggestion concernant le composant de formulaire:
Je suis très heureux de voir que dans la nouvelle version 4.0, le composant formulaire sera plus convivial pour les développeurs. J'ai vu un nouvel exemple, le composant Form.Item sous le composant Form n'aura plus besoin d'utiliser getFieldDecorator. C'est une très bonne amélioration, mais j'ai une suggestion plus radicale: supprimer le composant Form.Item, optimiser davantage l'expérience d'écriture de code et rendre le codage plus rafraîchissant. Les fonctions d'origine du composant Form.Item sont directement transférées vers des composants d'entrée spécifiques (tels que Input, DataPick, etc.).
Ceci pour tenir compte du fait que dans la plupart des cas, les formulaires développés utilisent les composants d'entrée intégrés d'antd, qui sont qualifiés pour réaliser la fonction du composant Form.Item en améliorant les capacités des composants d'entrée; et pour quelques cas particuliers (comme l'utilisateur self Définir les composants, certains composants d'entrée ne veulent pas être liés par Form), vous pouvez fournir des composants d'emballage spéciaux pour les instructions.
La recherche sur antd n'est pas approfondie et ne propose que des suggestions d'appel du point de vue des utilisateurs ordinaires. S'il y a quelque chose qui ne va pas, s'il vous plaît Haihan.

Vous pouvez essayer ceci: https://github.com/aweiu/ant-modifier

aweiu le 21 déc. 2019

Y a-t-il des optimisations pour la pollution de style global?

k644606347 le 26 déc. 2019

Y a-t-il des optimisations pour la pollution de style global?

Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

fwh1990 le 27 déc. 2019

Y a-t-il des optimisations pour la pollution de style global?
Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

Eh bien, je connais ce préfixe, je veux dire la pollution de la partie de réinitialisation css globale, qui est le problème de pollution causé par l'introduction de la réinitialisation antd et css dans les projets hérités.

k644606347 le 28 déc. 2019

Y a-t-il des optimisations pour la pollution de style global?
Antd semble avoir des préfixes, ce n'est pas de la pollution.Le code css de votre propre projet peut essayer d'utiliser des modules css pour résoudre le problème de la pollution mondiale

Pour plus de détails, veuillez vous référer à la discussion sur le problème dans le lien du site officiel: 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 le 28 déc. 2019

Existe-t-il un plan pour migrer la mise en page Antd Pro 4.0 depuis Antd Pro 4.0?
J'ai rencontré l'erreur SiderMenu.js Icon.createFromIconfontCN dans pro-layout lors de la migration du projet par moi-même. Comme la dépendance dans pro-layout est toujours la version v3, je ne sais pas comment changer la dépendance. Quelqu'un qui sait m'apprendra

wushizhan le 4 janv. 2020

Existe-t-il un plan pour migrer la mise en page Antd Pro 4.0 depuis Antd Pro 4.0?
J'ai rencontré l'erreur SiderMenu.js Icon.createFromIconfontCN dans pro-layout lors de la migration du projet par moi-même. Comme la dépendance dans pro-layout est toujours la version v3, je ne sais pas comment changer la dépendance. Quelqu'un qui sait m'apprendra

Étant donné que l'icône a été séparée dans 4.0, l'importation doit être modifiée, vous pouvez utiliser next.ant.design pour voir le document API actuel de l'icône

zkwolf le 6 janv. 2020

Merci pour votre contribution sur la version v4. Fermé depuis la sortie de la version 4.0.0-rc.0 : réf # 20661

zombieJ le 9 janv. 2020

👍2

StrictMode est-il un objectif? Le contexte hérité doit être migré https://github.com/ant-design/ant-design/issues/9870

ntucker le 10 janv. 2020

👍2

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

prateekrastogi le 25 janv. 2020

Pouvons-nous conserver à la fois antd3 et antd4 dans le repo? On ne peut pas changer partout car le dépôt est trop gros et il réécrira presque la base de code complète.
Aussi si oui, pouvons-nous garder antd3 CSS dans le CSS global et antd4 pour juste un dossier et ses enfants

Ekta398 le 11 sept. 2020

Cette page vous a été utile?

0 / 5 - 0 notes

Questions connexes

L'icône signale une erreur lors de l'utilisation du déploiement local

tianyacsdn · 3Commentaires

Lorsque getFieldProps et checkbox sont utilisés en combinaison, initialValue ne peut pas prendre effet

taikongfeizhu · 3Commentaires

Popover et sélectionner

plandem · 3Commentaires

La démo d'affixe ne fonctionne pas correctement

PeteAndersen · 3Commentaires

Arbre dynamique avec antd Tree & TreeNode

drcmda · 3Commentaires

Ant-design: 💥 Ant Design 4.0 est en cours!

Aperçu du site

résumer

🌓 À propos de la compatibilité

Utilisez la dernière API React

Arrêter le support IE9 / 10

Autre mise à jour compatible

📦 Réduisez la taille

Optimiser la taille de l'icône

Supprimer Draft.js

🧭 Optimisation des performances

Défilement virtuel

Refactoriser l'animation

🧩 Optimisation des composants

Forme

Table

Nouveau DatePicker

🚀 Continuer la mise à jour

🧶 Améliorez l'accessibilité

🎯 Norme API développeur

💼 Mode de réaction strict

💡 Améliorez l'expérience des développeurs

🐱 Ressource de conception

Jalons

Q2

Q3

T4

Bienvenue à bord

introduction

🌓 Ajustement de compatibilité

Utilisez la dernière version de l'API React

Arrêter le support IE9 / 10

Autres ajustements de compatibilité

📦 Réduisez le volume

Optimiser la taille de l'icône

Supprimer Draft.js

🧭 Optimisation des performances

Défilement virtuel

Améliorations de l'animation

🧩 À propos des composants

Composant de formulaire

Composant de table

DatePicker refait

🚀 Mise à jour en continu

🧶 Améliorez l'expérience d'accessibilité

🎯 Spécifications de l'API du développeur

💼 Réagir en mode strict

💡 Améliorez l'expérience des développeurs

🐱 Gestion des actifs de conception

Plan de temps

Q2

Q3

T4

Bienvenue à participer

Commentaire le plus utile

15311

Tous les 182 commentaires

15311

Préparation alpha V4

Principalement cible

Continuer la cible

Environ templateAreas

À propos de la dépendance

À propos de l'icône

关于templateAreas

关于 依赖

关于 图标

environ templateAreas

15311

Il est maintenant temps de se débarrasser de moment.js !

:chien:

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

Questions connexes

Environ `templateAreas`

关于`templateAreas`

关于依赖

关于图标

environ `templateAreas`