Ant-design: [email protected]

Aktualisiert.

Aktualisiert.

https://github.com/ant-design/ant-design/issues/5140 kann ein bearbeitbarer Spielplatz sein.

Möglicherweise eine größere Standardschriftgröße, die dem Plan unseres Designers folgt.

Refactor cloneElement bis context ?

1. Speisekarte
2. Tabs

# 1473 wieder öffnen?

Ich hoffe immer noch auf eine robustere integrierte i18n-Unterstützung https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

Kommentar der Definition der Komponente verbessern und perfektionieren?

Was ist mit Werkzeugen von 2-> 3 oder sogar 1-> 3?

@yesmeck this https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 bedeutet, dass wir Tabs.TabPane[key] und Menu.Item[key] aufgeben müssen ...

Ich hoffe immer noch auf eine robustere integrierte i18n-Unterstützung # 5554 (Kommentar)

@plandem Ich evaluiere, lassen Sie uns in dieser Ausgabe weiter diskutieren.

Kommentar der Definition der Komponente verbessern und perfektionieren?

@infeng Aus diesem Grund möchte ich die Demo in TypeScript neu schreiben, damit wir Probleme in der Definition https://github.com/ant-design/ant-design/issues/5390 feststellen können

Was ist mit Werkzeugen von 2-> 3 oder sogar 1-> 3?

Ja, wir müssen noch Tools wie https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773 bereitstellen, obwohl dies keine perfekte Lösung ist

@sorrycc was denkst du über webpack@2 ?

Fortschritte beim Rich Text Editor? # 1083

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

Der Editor ist möglicherweise noch nicht in unserem aktuellen Plan.

ThemeProvider sollte unter https://github.com/ant-design/ant-design/issues/5656 besprochen werden

Aber ich bin mir nicht sicher, ob wir Zeit haben, es in [email protected] einzuführen.

Neue Funktion für Diagramm hinzufügen
Wie Pie, Hisgram etc.

Neue Funktion für Diagramm hinzufügen
Ich bin dagegen. Es ist eine andere Klasse von Komponenten.

Wenn Sie Diagramme von demselben Team möchten, können Sie dieses ausprobieren:
https://antv.alipay.com/index.html

Die einzige Komponente, die in antd fehlt und die ich in allen Projekten immer wieder implementiere, ist eine Seitenleiste außerhalb des Bildschirms.

Die React-Sidebar ist eine nette Komponente, aber sie unterbricht alles, was mit dem Scrollen auf der Seite zu tun hat, und ist daher ziemlich nutzlos. Eine integrierte Seitenleiste, vorzugsweise mit Swipe-Unterstützung auf Touch-Geräten, wäre mein größter Wunsch nach 3.0!

@JesperWir, ich denke, was Sie brauchen, ist Layout.Sider

@benjycui Eigentlich habe ich mir den Sider seit einigen Monaten nicht mehr angesehen. Ich sehe, dass er seit 2.6 einen benutzerdefinierten Trigger hat, was ihn nützlicher macht als zuvor. Es drückt jedoch immer noch die Inhaltsspalte, um schmal zu werden, wenn sie angezeigt wird, sodass sie nicht als Seitenleiste verwendet werden kann.

Aber es könnte erweitert werden, um wie eine Seitenleiste mit einigen neuen Requisiten zu funktionieren:

• cover: true , damit es über dem Seiteninhalt angezeigt wird, anstatt es zu quetschen.
• mask: true , um eine Maske über dem nicht abgedeckten Teil der Seite anzuzeigen, wenn Sider oben ist.
• maskCloseable: true , damit es beim Klicken nach draußen zusammenbricht.

und schließlich in einer Traumwelt

• swipeable: true , um Touch-Geräte besser zu unterstützen (aber da Sie Antd wahrscheinlich als Desktop-Sache betrachten, könnte dies auch außerhalb von Antd erreicht werden).

@benjycui @JesperWe In der Layout.Sider- Demo wird der Inhalt gequetscht (was schlecht ist), wenn Sider in Mobile geöffnet wird.

Ist es möglich, den Inhalt auch nach rechts zu verschieben? Oder den Sider auf den Inhalt legen?

Noch eine bahnbrechende Änderung, die ich in der nächsten Hauptversion vornehmen möchte und die Sie beraten sollen: https://github.com/ant-design/ant-design/issues/6139

@JesperWir also, was Sie brauchen, ist etwas wie Schublade .

Und wir sollten hier keine Details zu Funktionen diskutieren, sondern nur eine neue Ausgabe zur Diskussion öffnen.

@benjycui Ok, also formuliere ich meinen 3.0-Traum neu :-): So etwas wie Drawer in antd integriert (Weil das Hinzufügen von antd-mobile / Drawer das Bundle viel größer macht und viele unerwünschte reaktionsnative Dinge hinzufügt)

Vergleichen Sie die Ergebnisse und betrachten Sie das Rollup als Bibliothekspacker.

Hier sind einige Gedanken:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Vergleichen Sie die Ergebnisse und betrachten Sie das Rollup als Bibliothekspacker.

Wir können dies in 2.x tun, da Entwickler keine Änderungen spüren werden.

Und Sie können eine neue Ausgabe öffnen, um diese Idee @plandem zu diskutieren

Versuchen Sie, weniger durch https://github.com/styled-components/styled-components zu ersetzen

Über gestylte Komponenten habe ich auch Probleme:

• Die Autoprefixer-Bibliothek ist möglicherweise nicht sehr zuverlässig im Vergleich zu postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Oder können wir sagen, sobald wir css-in-js auswählen, verlieren wir die Bequemlichkeit des Post-CSS-Plugin-Systems wie px-to-rem?
• Wir müssen aus Kompatibilitätsgründen den gesamten aktuellen CSS-Klassennamen beibehalten, während Styled-Components einen eigenen Klassennamen für den Stil generiert. Er ist redundant und schwer zu pflegen.

Aus diesem Grund gab es try . Kompatibilität ist ein großes Problem, das wir berücksichtigen müssen.

Wir müssen aus Kompatibilitätsgründen den gesamten aktuellen CSS-Klassennamen beibehalten, während Styled-Components einen eigenen Klassennamen für den Stil generiert. Er ist redundant und schwer zu pflegen.

Eigentlich ist das kein Problem. Aktuelle CSS-Klassennamen dienen nicht nur der Kompatibilität, sondern auch Selektoren, die wir im Test verwenden können (z. B. Enzym). Also müssen wir sie behalten.

@paranoidjk @ afc163 @benjycui

Hiya, ich bin einer der Core-Contributors für gestylte Komponenten und habe diesen Thread aufgrund eines offenen Problems in unserem Repo (siehe oben) gefunden, das mich darüber informiert hat, dass diese Bibliothek SC nicht unterstützt. Durch Zufall fand ich dann dieses Gespräch: Augenzwinkern: - Ok, Kontext jetzt beiseite

Die Autoprefixer-Bibliothek ist im Vergleich zu postcss möglicherweise nicht sehr zuverlässig

Wir haben stylis sorgfältig ausgewählt und arbeiten eng mit @thysultan zusammen , der es entwickelt. Wir hätten es nicht gewählt, wenn es kein würdiger Ersatz für PostCSS gewesen wäre und die wenigen Probleme, die es hatte (ein paar fehlende Präfixe in Version 3), sehr schnell behoben wurden. Die v2 selbst ist übrigens seit ein paar Monaten in Arbeit und ist nun endlich raus. Dafür können wir definitiv bürgen. Lassen Sie dieses Implementierungsdetail unsere Sorge sein, wenn Sie sich für SC entscheiden würden: smile:

Die Datei, auf die Sie zeigen, wird nicht verwendet und wurde jetzt übrigens gelöscht. Sie ist Teil des alten automatischen Präfixes mit Inline-Stil-Präfix. Aber auch das ist (und war für uns) eine sehr, sehr, sehr vertrauenswürdige Lösung in der gesamten CSS-in-JS-Community von @rofrischmann.

Oder können wir sagen, sobald wir css-in-js auswählen, verlieren wir die Bequemlichkeit des Post-CSS-Plugin-Systems wie px-to-rem?

Da Sie bei Interpolationen in unseren mit Tags versehenen Vorlagenliteralen einfach jedes JS verwenden können, können einfache Funktionen all diese Dinge ersetzen. Wir haben tatsächlich ein separates Projekt namens "poliert", das dem Lodash für CSS-in-JS ähnelt und alle Mixins (dh Hilfsfunktionen) enthält, die Sie von SASS / LESS und dergleichen erwarten würden: https: // poliert. js.org

(Wir verwenden PostCSS in der Tat weder mehr wie oben erwähnt, noch haben wir seine Plugins übrigens unterstützt.)

Wir müssen aus Kompatibilitätsgründen den gesamten aktuellen CSS-Klassennamen beibehalten, während Styled-Components einen eigenen Klassennamen für den Stil generiert. Er ist redundant und schwer zu pflegen.

Wenn Sie benutzerdefinierte Klassennamen anhängen müssen, können Sie ganz einfach unsere Methode .attrs verwenden, mit der Sie zusätzliche Requisiten an eine Komponente anhängen können. Zum Beispiel:

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

Einige weitere Extras und Funktionen:

• Sie schreiben nur CSS (wie Sie vielleicht bereits wissen), und die einzigen Ergänzungen sind kaufmännisches Und und Verschachtelung
• Es gibt keine Stile + Komponentenzuordnung
• Alles ist eine Komponente
• Mit unserem css -Helfer können Sie Mixins / Shared Styles schreiben

Ich bin hier, wenn Sie weitere Hilfe benötigen. Wenn Sie weitere Informationen benötigen, besuchen Sie unsere neue Website: 100: https://styled-components.com

@philpl @benjycui

Aktuelle CSS-Klassennamen dienen nicht nur der Kompatibilität, sondern auch Selektoren, die wir im Test verwenden können (z. B. Enzym). Also müssen wir sie behalten.

Die meisten Klassenselektoren in den Tests sehen so aus, als könnten sie stattdessen durch Anzeigenamen- Selektoren ersetzt werden. Dies gilt nicht für alle Tests, aber es würde uns den größten Teil des Weges dorthin bringen. Es würde mir nichts ausmachen, das anzunehmen.

Ein Ort, an dem gestaltete Komponenten hilfreich sein könnten, ist das Anpassen des Themas . Es scheint, als würde es uns mehr Flexibilität als der erste Ansatz und eine bessere Optimierung als der zweite Ansatz geben.

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

I second @philpl - BITTE machen Sie das Styling in Ant Design viel einfacher. Derzeit ist es ein echter Schmerz. styled-components ist unglaublich.

Ich denke, wir können dieses Problem gleichzeitig lösen, https://github.com/ant-design/ant-design/issues/4998 , wenn wir auf styled-component umgestalten.

PS Dies bedeutet nicht, dass styled-component dieses Problem lösen kann, nur weil wir dies gleichzeitig tun können, um die Arbeit zu reduzieren.

Aktualisiert:

So gestalte ich derzeit Ant Design in einem React-Projekt. Es ist nicht das Beste, weil wir die gesamte Ant Design-Bibliothek durchgehen und alles stylen müssen. Ich möchte mich nicht mit einem WENIGER Präprozessor in create-react-app herumschlagen, weil es eine Art Schmerz ist.

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

Wenn Ant Design mit styled-components kompatibel gemacht würde, könnten wir die App einfach mit <ThemeProvider theme={primaryTheme}> umhüllen und sie würde entsprechend gestaltet.

Ich möchte nur fela von @rofrischmann als Alternative zu gestylten Komponenten modularer und schneller. Es hat viele Funktionen und einen kleinen Platzbedarf . Außerdem hat Cloudflare beschlossen, ihre

Was auch immer ihr euch entscheidet, ich würde mich sehr freuen, wenn antd eine CSS-in-JS-Lösung anstelle von weniger verwendet.

styled-components ist eine bessere Wahl für die Erstellung moderner, modularer und skalierbarer UI-Komponenten.
Am wichtigsten ist jedoch, dass Komponenten ohne externe CSS-Datei unabhängig gerendert werden können.
Dies ermöglicht einen teilweisen Import von Komponenten mit minimal erforderlichen Stilen.
hoffe, [email protected] wird es verwenden.

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

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

# 4853 hinzufügen?

# 4853 hinzufügen?

Es ist schwierig, da einige Komponenten key als Teil der API verwenden. Wir können dies erst beheben, wenn wir alle API-Namen umbenannt haben. z.B

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

Es wird eine bahnbrechende Veränderung sein, aber eine solche bahnbrechende Veränderung kann durch antd-codemod gelöst werden .

Wir können in # 4853 weiter diskutieren

Schreiben Sie die Demo in TypeScript neu

Wird die Demo nur Typescript sein oder sowohl JS als auch Typescript? Ich hoffe, beide zu behalten.

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

Stellen Sie sicher, dass rc-trigger mit React 16 funktioniert.

Ist styled-components oder eine CSS-in-JS-Lösung nach Wahl der Betreuer / Mitarbeiter noch eine Option?
Ich würde das lieben und würde gerne beim Refactoring helfen :)

Zu viele Arbeiten, um unsere weniger Dateien auf gestaltete Komponenten zu migrieren, werden wir leider keine gestalteten Komponenten in antd 3 einführen. Da gestylte Komponenten jedoch Stile auf die Komponente von antd anwenden können, ohne den Code von antd zu beeinträchtigen, also wenn jemand Interesse hat Bei der Verwendung von Styled-Komponenten mit antd finden Sie hier ein Beispiel: https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck würde gerne Beispiele für antd mit , um zu sehen glamourösen

@yesmeck @ afc163 Wie wäre es mit JSS für CSS-in-JS?
Denken Sie, dass die hier aufgeführten Vorteile es praktikabler machen könnten als gestaltete Komponenten ?

Vielleicht hängt es eher mit dem Tooling-Ökosystem zusammen, aber es könnte eine gute Idee sein, sicherzustellen, dass antd 3.0 mit babel 7 gut funktioniert.
Insbesondere mit der in 7.0 geplanten integrierten Generierung von Babel Typoskript.
Dies könnte die Verwendung von Antd / Typoskript mit der Create-React-App erheblich vereinfachen

Ziehen Sie in Betracht, die Unterstützung für IE6-8 einzustellen, möglicherweise sogar für alle Versionen unter IE11.

Dadurch wird die CSS-Datei schlanker und kann schneller heruntergeladen werden. React unterstützt nicht einmal IE unter Version 9, sodass .clearfix, -ms-filter usw. sicher entfernt werden können.

ant unterstützt bereits offiziell nur IE9 +

Am Do, 12. Oktober 2017 um 07:58 Uhr, Andreas Cederström <
[email protected]> schrieb:

Ziehen Sie in Betracht, die Unterstützung für IE6-8 einzustellen, möglicherweise sogar für alle Versionen unter IE11.

Dadurch wird die CSS-Datei schlanker und kann schneller heruntergeladen werden. Reagiert nicht
Unterstützt sogar IE unter Version 9, so dass .clearfix, -ms-filter usw. sicher sein können
entfernt.

- -
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

In Ordnung. Überprüfen Sie, ob antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) einige IE6-8-Hacks enthält, die dann entfernt werden sollten.

Beispiel:

  /* 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 Ich denke, es wurde in antd-3.0 . Wenn Sie immer noch einen Hack sehen, nur PR, um ihn zu entfernen, danke.

Ich habe ein großes Problem mit gestylten Komponenten und Ameisenform. Wenn ich Formularkomponenten, die mit fieldDecorator dekoriert sind, in einen Wrapper einbinde, der mit gestalteten Komponenten gestaltet ist, funktionieren die Formularfelder nicht mehr. Ich verstehe dieses Problem nicht wirklich, aber ich muss es in ein <div> mit Inline-Stilen einschließen, damit es funktioniert. Das ist wirklich ärgerlich ...

Wochenauswahl !!!

@malekjaroslav , die möglicherweise mit einer falschen Verwendung zusammenhängen. Können Sie ein Problem mit dem Repo für gestaltete Komponenten eröffnen, damit ich Ihnen helfen kann?

@benjycui Was halten Sie von Responsive Helper in Antd3.0? So etwas wie https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss reagiert

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

Ich kann PR für den Anfang machen, wenn Sie Hilfe benötigen, aber Hilfe bei der Übersetzung von Dokumentation usw. benötigen.

@andriijas verwenden Sie einfach https://github.com/contra/react-responsive . Wir fügen nur eine UI-Komponente hinzu, die der Ant Design Specification zu antd folgt. Trotzdem danke 😄

Ja, ich habe es im Ant-Design-Pro-Repository gesehen. Ich werde Wrapper mit Haltepunkten von antd machen.

Ich freue mich auf diese Veröffentlichung!

Hallo allerseits, ich habe gerade [email protected] veröffentlicht. Siehe https://github.com/ant-design/ant-design/issues/8233

Ich freue mich auf die Veröffentlichung der neuen Version, da ich die antd pro-Komponenten erst dann verwenden kann, wenn sie herauskommen. Planen Sie noch, es Ende des Monats zu veröffentlichen?

Vielen Dank, dass Sie so gute Front-End-Komponenten bereitgestellt haben, dass Sie das Material von Google übertroffen haben

Wirklich aufgeregt für diese Version, da sie der Blocker für den Beginn der Verwendung der neuen Antd Pro-Komponenten ist. Wird der erwartete Veröffentlichungszeitraum noch Ende November sein?

Vielen Dank, dass Sie eine so großartige Bibliothek bereitgestellt haben. Ihr verlässt die Material-Benutzeroberfläche von Google.

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

Ant Design 3.0 jetzt veröffentlicht! 🎉 🎉 🎉

+1 für Styled-Components / Emotion / Fela-Unterstützung in einer zukünftigen Version.