Ant-design: [email protected]

Mis à jour.

Mis à jour.

https://github.com/ant-design/ant-design/issues/5140 peut être un terrain de jeu modifiable.

Peut-être une taille de police par défaut plus grande, suivant le plan de notre concepteur.

Refactoriser cloneElement en context ?

1. Menu
2. Onglets

rouvrir # 1473?

J'espère toujours un support i18n intégré plus robuste https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

Améliorer et perfectionner le commentaire de la définition des composants?

Qu'en est-il des outils de 2> 3 ou même de 1> 3?

@yesmeck ceci https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 signifie que nous devons renoncer à Tabs.TabPane[key] et Menu.Item[key] ...

J'espère toujours un support i18n intégré plus robuste # 5554 (commentaire)

@plandem que

Améliorer et perfectionner le commentaire de la définition des composants?

@infeng c'est pourquoi je veux réécrire la démo dans TypeScript, afin que nous puissions remarquer des problèmes de définition https://github.com/ant-design/ant-design/issues/5390

Qu'en est-il des outils de 2> 3 ou même de 1> 3?

Oui, nous devons encore fournir des outils comme https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773, bien que ce ne soit pas une solution parfaite

@sorrycc que pensez-vous de webpack@2 ?

Des progrès concernant l'éditeur de texte enrichi? # 1083

https://github.com/MicheleBertoli/css-in-js

L'éditeur n'est peut-être pas dans notre plan récent pour le moment.

ThemeProvider doit être discuté dans https://github.com/ant-design/ant-design/issues/5656

Mais je ne sais pas si nous avons le temps de l'introduire dans [email protected] .

Ajouter une nouvelle fonctionnalité pour le graphique
Tels que Pie, hisgram etc.

Ajouter une nouvelle fonctionnalité pour le graphique
Je suis contre. C'est une classe de composants différente.

Si vous voulez des graphiques de la même équipe, vous pouvez essayer celui-ci:
https://antv.alipay.com/index.html

Le seul composant manquant à antd que je me retrouve à implémenter encore et encore dans tous les projets est une barre latérale hors écran.

react-sidebar est un composant intéressant, mais il rompt tout ce qui a trait au défilement de la page, donc c'est assez inutile. Une barre latérale intégrée, de préférence avec un support de balayage sur les appareils tactiles, serait mon plus grand souhait pour la version 3.0!

@JesperWe Je pense que ce dont vous avez besoin, c'est de Layout.

@benjycui En fait, je n'ai pas regardé le Sider depuis quelques mois, je vois qu'il a un déclencheur personnalisé depuis 2.6, ce qui le rend plus utile qu'avant. Cependant, il serre toujours la colonne de contenu pour devenir étroite quand elle apparaît, elle n'est donc pas utilisable comme barre latérale.

Mais il pourrait être étendu pour fonctionner comme une barre latérale avec de nouveaux accessoires:

• cover: true pour le faire apparaître en haut du contenu de la page au lieu de le presser.
• mask: true pour afficher un masque sur la partie non couverte de la page lorsque Sider est en haut.
• maskCloseable: true pour le réduire lorsque vous cliquez à l'extérieur

et enfin dans un monde de rêve

• swipeable: true pour mieux prendre en charge les appareils tactiles (mais comme vous pensez probablement à antd comme à un ordinateur de bureau, cela pourrait également être réalisé en dehors de antd).

@benjycui @JesperWe Dans la démo de Layout.Sider , le contenu est compressé (ce qui est mauvais) lorsque Sider s'ouvre sur mobile.

Est-il également possible de pousser le contenu vers la droite? Ou placer le Sider au-dessus du contenu?

Encore un autre changement de rupture que je veux faire dans la prochaine version majeure, et je veux que vous donniez des conseils: https://github.com/ant-design/ant-design/issues/6139

@JesperWe donc, ce dont vous avez besoin est quelque chose comme Drawer .

Et nous ne devrions pas discuter des détails des fonctionnalités ici, il suffit d'ouvrir un nouveau numéro pour en discuter.

@benjycui Ok donc je reformule mon rêve 3.0 :-): Quelque chose comme Drawer intégré dans antd (Parce que l'ajout d'antd-mobile / Drawer rend le bundle beaucoup plus gros et ajoute beaucoup de trucs indésirables)

Comparez les résultats et considérez le rollup comme un packer de bibliothèque.

Voici quelques réflexions:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Comparez les résultats et considérez le rollup comme un packer de bibliothèque.

Nous pouvons le faire dans 2.x, car les développeurs ne ressentiront aucun changement.

Et vous pouvez ouvrir un nouveau numéro pour discuter de cette idée @plandem

Essayez de remplacer moins par https://github.com/styled-components/styled-components

A propos des composants stylisés, j'ai trop de problèmes:

• la bibliothèque d'autoprefixer peut ne pas être très fiable comparée à postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Ou nous pouvons dire qu'une fois que vous aurez choisi css-in-js, nous perdrons la commodité du système de plugin post-css, tel que px-to-rem?
• nous devons rester tout le nom de classe css actuel pour la compatibilité, tandis que les composants stylisés généreront leur propre nom de classe pour le style, ce sera la redondance et difficile à maintenir?

C'est pourquoi try existait, la compatibilité est un gros problème que nous devons considérer.

nous devons rester tout le nom de classe css actuel pour la compatibilité, tandis que les composants stylisés généreront leur propre nom de classe pour le style, ce sera la redondance et difficile à maintenir?

En fait, ce n'est pas un problème. Les noms de classe CSS actuels ne sont pas uniquement destinés à la compatibilité, mais aux sélecteurs que nous pouvons utiliser dans les tests (par exemple, enzyme). Donc, nous devons les garder.

@paranoidjk @ afc163 @benjycui

Bonjour, je suis l'un des principaux contributeurs des composants stylisés et j'ai trouvé ce fil en raison d'un problème ouvert sur notre dépôt (voir ci-dessus), qui m'a informé que cette bibliothèque ne supportait pas SC. Par hasard j'ai alors trouvé cette conversation: wink: - Ok, contexte à part maintenant

la bibliothèque d'autoprefixer peut ne pas être très fiable par rapport à postcss

Nous avons soigneusement choisi stylis et travaillons en étroite collaboration avec @thysultan , qui le développe. Nous ne l'aurions pas choisi, si ce n'était pas un remplacement digne de PostCSS et les quelques problèmes qu'il avait (quelques préfixes manquants dans la v3), ont été résolus très rapidement. La v2 elle-même est en cours d'élaboration depuis quelques mois et est enfin sortie. Nous pouvons certainement nous porter garant de cette partie. Laissez ce détail de mise en œuvre être notre souci, si vous optez pour SC: smile:

Le fichier vers lequel vous pointez n'est pas utilisé et a été supprimé maintenant, et fait partie de l'ancien préfixe automatique avec préfixeur de style en ligne. Mais même cela est (et était pour nous) une solution très, très, très fiable grâce à la communauté css-in-js de @rofrischmann.

Ou nous pouvons dire qu'une fois que vous aurez choisi css-in-js, nous perdrons la commodité du système de plugin post-css, tel que px-to-rem?

Puisque dans les interpolations dans nos littéraux de gabarit étiquetés, vous pouvez simplement utiliser n'importe quel JS, des fonctions simples peuvent remplacer tout cela. Nous avons en fait un projet séparé appelé "poli" qui est comme le lodash pour CSS-in-JS et est livré avec tous les mixins (c'est-à-dire les fonctions d'assistance) que vous attendez de SASS / LESS et autres: https: // poli. js.org

(En effet, nous n'utilisons plus PostCSS comme mentionné ci-dessus, ni n'avons supporté ses plugins btw)

nous devons rester tout le nom de classe css actuel pour la compatibilité, tandis que les composants stylisés généreront leur propre nom de classe pour le style, ce sera la redondance et difficile à maintenir?

Si vous avez besoin d'attacher des noms de classe personnalisés, vous pouvez facilement utiliser notre méthode .attrs , qui vous permet d'attacher des accessoires supplémentaires à un composant. Par exemple:

const ButtonLink = styled.a.attrs({
  className: 'your-custom-extra-classname'
})`
   ... // css and stuff
`

Quelques autres goodies et fonctionnalités:

• Vous écrivez juste du CSS (comme vous le savez peut-être déjà), et les seuls ajouts sont les esperluettes et l'imbrication
• Il n'y a pas de styles + mappage de composants
• Tout est un composant
• Vous pouvez écrire des mixins / styles partagés avec notre aide css

Je suis là si vous avez besoin de plus d'aide. Si vous avez besoin de plus d'informations, consultez notre nouveau site Web: 100: https://styled-components.com

@philpl @benjycui

Les noms de classe CSS actuels ne sont pas uniquement destinés à la compatibilité, mais aux sélecteurs que nous pouvons utiliser dans les tests (par exemple, enzyme). Donc, nous devons les garder.

La plupart des sélecteurs de classe dans les tests semblent pouvoir être remplacés par des sélecteurs de

Les composants stylisés peuvent aider à personnaliser le thème . Il semble que cela nous donnerait plus de flexibilité que la première approche et une meilleure optimisation que la deuxième approche.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Je seconde @philpl - VEUILLEZ rendre le style beaucoup plus facile dans Ant Design. Actuellement, c'est une vraie douleur. styled-components est incroyable.

Je pense que nous pouvons résoudre ce problème en même temps https://github.com/ant-design/ant-design/issues/4998 , si nous refactorisons en styled-component .

PS Cela ne signifie pas que styled-component peut résoudre ce problème, simplement parce que nous pouvons le faire en même temps pour réduire le travail.

Mis à jour:

C'est ainsi que je stylise actuellement Ant Design dans un projet React. Ce n'est pas le meilleur, car nous devons parcourir la bibliothèque _entire_ Ant Design et tout styliser. Je ne veux pas m'embêter avec un préprocesseur LESS dans create-react-app , car c'est un peu pénible.

// <strong i="7">@flow</strong>

import { injectGlobal } from 'styled-components';
import Color from 'color';

/*
 * We'll start with just one theme for now. Define colors and other styles here.
 * More themes can be easily added later. Look in ./App.js to see where this
 * theme is actually used.
 */

const mainTheme = {
  primaryColor: Color('#fd3d57'),
  primaryTextColor: Color('#fff'),
};

const defaultTheme = mainTheme;

// Inject global styles - seems to be the only way to customize Ant Design
// PLEASE ADD STYLES IN ALPHABETICAL ORDER for everyone's sanity. Thanks.
injectGlobal`
  .ant-btn {
    &:hover {
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.lighten(0.2).toString()} !important;
    }

    &:active {
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryColor.darken(0.2).toString()} !important;
    }
  }

  .ant-btn-primary {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
    color: ${defaultTheme.primaryTextColor.toString()} !important;

    &:hover {
      background-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .lighten(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }

    &:active {
      background-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      border-color: ${defaultTheme.primaryColor
        .darken(0.2)
        .toString()} !important;
      color: ${defaultTheme.primaryTextColor.toString()} !important;
    }
  }

  .ant-btn-clicked:after {
    border: 0 solid ${defaultTheme.primaryColor.toString()} !important;
  }

  .ant-switch-checked {
    background-color: ${defaultTheme.primaryColor.toString()} !important;
    border-color: ${defaultTheme.primaryColor.toString()} !important;
  }
`;

export default defaultTheme;

Si Ant Design était rendu compatible avec styled-components , alors nous pourrions simplement envelopper l'application avec <ThemeProvider theme={primaryTheme}> et elle serait stylée en conséquence.

Je voudrais juste lancer fela de @rofrischmann comme alternative aux composants modulaire et plus rapide. Il a beaucoup de fonctionnalités et un faible encombrement . En outre, cloudflare a décidé de construire son interface utilisateur avec lui au lieu de composants

Quoi que vous décidiez, je serais très heureux de voir antd utiliser une solution css-in-js au lieu de moins.

styled-components est un meilleur choix pour créer des composants d'interface utilisateur modernes, modulaires et évolutifs.
le plus important, il peut rendre le composant indépendant sans aucun fichier css externe.
qui rendent possible l'importation partielle de composants avec des styles minimums requis.
espérons que [email protected] l'utilisera.

https://github.com/ant-design/ant-design/tree/antd-3.0

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

ajouter # 4853?

ajouter # 4853?

C'est difficile, pour certains composants utilisent key dans le cadre de l'API, nous ne pouvons pas résoudre ce problème tant que nous n'avons pas renommé tous les noms de l'API. par exemple

key => id
expandedKeys => expandedIds
selectedKeys => selectedIds
....

Ce sera un changement de rupture, mais ce type de changement de rupture peut être résolu par antd-codemod .

Nous pouvons continuer à discuter dans # 4853

Réécrire la démo dans TypeScript

La démo sera-t-elle uniquement Typescript ou à la fois JS et Typescript? J'espère garder les deux.

https://github.com/react-bootstrap/react-overlays/issues/188

Assurez-vous que rc-trigger fonctionne avec React 16.

Est-ce que styled-components ou une solution css-in-js du choix des responsables / collaborateurs est toujours une option?
J'adorerais ça et j'aimerais aider à refactoriser :)

Trop de travaux pour migrer nos moins de fichiers vers des composants stylisés, je crains que nous n'introduisons pas de composants stylisés dans antd 3. Mais, puisque les composants stylisés peuvent appliquer des styles au composant d'antd sans intrusion dans le code d'antd, donc si quelqu'un intéresse en utilisant des composants stylisés avec antd, voici un exemple https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck aimerait voir des exemples de antd avec glamour

@yesmeck @ afc163 pourquoi ne pas
Pensez-vous que les avantages énumérés ici pourraient le rendre plus réalisable que les composants stylisés ?

C'est peut-être plus lié à l'écosystème d'outillage, mais cela pourrait être une bonne idée de s'assurer que antd 3.0 fonctionne bien avec babel 7.
Surtout avec la génération intégrée de Babel Typecript prévue dans la version 7.0.
Cela pourrait grandement simplifier l'utilisation de antd / typescript avec create-react-app

Envisagez de supprimer le support pour IE6-8, peut-être même toutes les versions inférieures à IE11.

Cela rendra le fichier css plus mince et plus rapide à télécharger. React ne prend même pas en charge IE sous la version 9, donc .clearfix, -ms-filter, etc. peuvent être supprimés en toute sécurité.

ant ne prend déjà officiellement en charge IE9 +

Le jeu.12 octobre 2017 à 07:58, Andreas Cederström <
[email protected]> a écrit:

Envisagez de supprimer le support pour IE6-8, peut-être même toutes les versions inférieures à IE11.

Cela rendra le fichier css plus mince et plus rapide à télécharger. Réagir ne fait pas
supporte même IE sous la version 9 afin que .clearfix, -ms-filter, etc. puissent être en toute sécurité
supprimé.

-
Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

D'accord. Vérifiez que antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) contient des hacks IE6-8 qui devraient alors être supprimés.

Exemple:

  /* IE6-IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
  zoom: 1;

.clearfix {
  zoom: 1;
}

@andriijas Je pense qu'il a été supprimé dans antd-3.0 , si vous voyez toujours un hack, juste PR pour le supprimer, merci.

J'ai un gros problème avec les composants stylisés et la forme antd. Lorsque j'enveloppe des composants de formulaire décorés avec fieldDecorator dans un wrapper stylé avec des composants stylisés, les champs de formulaire cessent de fonctionner. Je ne comprends pas vraiment ce problème, mais je dois l'envelopper dans un <div> avec des styles en ligne pour le faire fonctionner. C'est vraiment énervant ...

Sélecteur de semaine !!!

@malekjaroslav qui pourrait être lié à une utilisation incorrecte. Pouvez-vous ouvrir un problème sur le référentiel styled-components, afin que je puisse vous aider?

@benjycui Que pensez-vous de l'assistant réactif dans antd3.0? Quelque chose comme ça https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss en réaction

import { Utils } from "antd";
const { Display } = Utils;

const Foo = props => (
  <h1>
    My idiotic example header
    <Display xs="block" sm="inline" print="inline-block">my subheader is fantastic</Display>
  </h1>
);

const Zoo = props => (
  <h1>
    My idiotic example header
    <Display xs={{display: "block", className: ..}} sm="inline" print="hidden">my subheader is fantastic</Display>
  </h1>
);

Je peux faire des relations publiques pour la première fois si vous avez besoin d'aide mais que vous aurez besoin d'aide pour traduire la documentation, etc.

@andriijas utilise simplement https://github.com/contra/react-responsive . Nous ajoutons simplement un composant d'interface utilisateur qui suit les spécifications de conception d'Ant à antd. Bref, merci 😄

Oui, je l'ai vu dans le référentiel ant-design-pro. Je vais créer un wrapper avec les points d'arrêt d'antd.

Dans l'attente de cette version!

Bonjour à tous, je viens de publier [email protected] , voir https://github.com/ant-design/ant-design/issues/8233

J'attends avec impatience la sortie de la nouvelle version, car je ne peux commencer à utiliser les composants antd pro que lors de sa sortie. Envisagez-vous toujours de le sortir à la fin du mois?

Merci de fournir de si bons composants frontaux, vous avez surpassé le matériel de Google

Vraiment excité pour cette version car c'est le bloqueur pour commencer à utiliser les nouveaux composants d'antd pro. La période de sortie prévue est-elle toujours fin novembre?

Merci d'avoir fourni une bibliothèque aussi géniale. Vous quittez l'interface matérielle de Google, c'est la poussière.

https://medium.com/ant-design/announcing-ant-design-3-0-70e3e65eca0c

Ant Design 3.0 est maintenant disponible! 🎉 🎉 🎉

+1 pour le support styled-components / emotion / fela dans une prochaine version.