Ant-design: ­čĺą Ant Design 4.0 ist in Bearbeitung!

Erstellt am 31. Mai 2019  ┬Ě  182Kommentare  ┬Ě  Quelle: ant-design/ant-design

Vorschau der Site

next.ant.design


Rekapitulieren

Seit der Ver├Âffentlichung von Ant Design 3.0 im Dezember 2017 sind 16 Monate vergangen. Wir haben viele Fehler behoben und viele neue Funktionen ( Changelog ) innerhalb von 4289 Commits, 138 Releases, 7675 Problemen und PRs hinzugef├╝gt, die uns 25375 Sterne in GitHub eingebracht haben. Wir haben auch Ant Design Pro 4.0 ver├Âffentlicht . Unterst├╝tzung f├╝r TypeScript, Bl├Âcke und Abstraktion von Layouts. Wir m├Âchten uns bei allen Mitwirkenden bedanken und Ihr Beitrag macht Ant Design immer besser.

Gleichzeitig haben wir Ant Design Pro 4.0 ver├Âffentlicht. Unterst├╝tzt TypeScript, Block und bietet Layout-Komponente.

In diesem Moment denken wir: Ok, was kommt als n├Ąchstes? Was k├Ânnen wir tun, um Ant Design weiter voranzutreiben? Es ist Zeit, das Ant Design 4.0 zu planen! ­čŹ╗

Es folgt der Detailplan zu 4.0. Wir k├Ânnen einige davon anpassen, da sie noch in Planung sind.

­čîô Informationen zur Kompatibilit├Ąt

Wir werden veraltete Requisiten in 4.0 entfernen, was bedeutet, dass veraltete Requisiten nicht mehr unterst├╝tzt werden. Wenn Sie von der neuesten Version 3.x keine Warnung erhalten, kann das Upgrade nahtlos durchgef├╝hrt werden. Andernfalls wird es nach der Ver├Âffentlichung von 4.0 eine halbj├Ąhrige Wartungsphase f├╝r 3.0 geben.

Wir wissen, dass Upgrades schwierig sind. Wir planen, ein kompatibles Paket bereitzustellen, um dies zu handhaben:

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

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

Dieses Paket ist bis zum Ende der 3.x Wartungsphase verf├╝gbar.

Verwenden Sie die neueste React-API

Wir bieten seit langem React 15-Support. Aufgrund des sozialen Feedbacks scheint dies jedoch nicht erforderlich zu sein (es gibt fast 0% der Probleme mit React 15), da React eine starke Kompatibilit├Ąt aufweist. Um React 15 zu unterst├╝tzen, verwenden wir die neue API sehr sorgf├Ąltig. Dies wird nach 4.0 kein Problem mehr sein:

  • Bietet Hooks-API f├╝r verwandte Komponenten
  • Support Concurrent Mode (Wird noch vorbereitet, wird in 4.0 weiter angepasst)
  • Umarmungsreaktion 17 (wow´╝ü ~)

Beenden Sie die IE9 / 10-Unterst├╝tzung

Ant Design 3.0 unternimmt gro├če Anstrengungen, um den alten IE zu

Anderes kompatibles Update

  • Weniger 2.x Upgrade auf weniger 3.x.
  • Symbolanpassung
  • Erw├Ąhnung veraltet

­čôŽ Gr├Â├če reduzieren

Symbolgr├Â├če optimieren

Wir verwenden das SVG-Symbol ( warum SVG? ) Nach [email protected] . Wir verwenden den String-Namen, um das Symbol zuzuordnen, das bei Bedarf nicht geladen werden kann. Wir importieren die gesamte Symboldatei in antd, wodurch das Bundle gro├č wird . Wir werden dies in 4.0 behandeln.

Die alte Art der Verwendung von Symbolen wird * veraltet *:

import { Icon, Button } from 'antd';

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

Verwendet stattdessen ein einzelnes Importsymbol in 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>
);

Sie k├Ânnen weiterhin kompatible Methoden auf alte Weise verwenden.

Entfernen Sie Draft.js

Wir verwenden die Komponente Draft.js in Mention, um den Popup-Speicherort zu best├Ątigen, es wird jedoch nur ein kleiner Teil der Funktionalit├Ąt verwendet. Es scheint ├╝ber die Kosten. Wir planen, Draft.js in 4.0 zu entfernen und stattdessen eine andere Lichtl├Âsung zu verwenden. Gleichzeitig wird zur Unterscheidung mit der Origin-Mention-Komponente in 3.0 eine neue Komponente Mentions eingef├╝hrt, um API-Konflikte zu vermeiden. Au├čerdem unterst├╝tzt es kompatible Methoden :

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

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

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

­čžş Leistungsoptimierung

Wir erhalten nur wenige Leistungsprobleme f├╝r gro├če Datenmengen von der Community. Wir werden sicherstellen, dass hier einige Optimierungen vorgenommen werden.

Virtuelles Scrollen

Virtuelles Scrollen ist eine g├Ąngige Methode zur Leistungsoptimierung. Wir planen, dies nativ in Komponenten zu unterst├╝tzen. In Version 4.0 wird es m├Âglicherweise nicht sofort beendet. Wird Schritt f├╝r Schritt integriert.

Refactor Animation

Wir haben in der Vergangenheit einige Hacks mit Animationen gemacht. In den meisten F├Ąllen funktioniert es gut. Wir planen, viel reinen Reaktionsweg zu verwenden, anstatt einen zu hacken. Dieses Update wird stillschweigend sein, nichts wird Sie beeinflussen.

­čžę Komponentenoptimierung

Wir haben in 3.0 viele Komponenten hinzugef├╝gt und werden in 4.0 fortfahren. Diese Komponenten stammen aus dem Gesch├Ąftsszenario, Ant Design Pro und den sozialen Anforderungen. Der Prozess f├╝r neue Komponenten ist der gleiche wie f├╝r Ant Design 3.0. Wir werden die zugeh├Ârige Designdatei in PR einf├╝gen und auf der offiziellen Website sammeln. Release in jeder Nebenversion.

Au├čerdem planen wir, einige Schl├╝sselkomponenten zu ├╝berarbeiten, um die Verwendung zu vereinfachen. Beinhaltet aber nicht nur:

Bilden

Form ist eine der am h├Ąufigsten verwendeten Komponenten. Wir stellen fest, dass Social Media viele Kommentare zum API-Design hat.
Wir m├Âchten die API in 4.0 vereinfachen:

  • Das Formular enth├Ąlt einen Datenspeicher. Sie m├╝ssen Form.create() nicht mehr verwenden.
  • Fom.Item enth├Ąlt Feldbindung. Sie m├╝ssen getFieldDecorator nicht mehr verwenden.
  • Form.Item beh├Ąlt den Wert bei, aber der Validator wird deaktiviert, wenn das Feld entfernt wird.
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>
  );
}

In der realen Welt treffen wir auf viel Kommunikation zwischen Formularen (normalerweise in Detailkonfiguration). Wir wollen es einfacher machen:

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

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

Wenn Sie den Fortschritt des Formulars verfolgen m├Âchten, k├Ânnen Sie dies hier sehen .

Tabelle

In der Vergangenheit haben wir viele R├╝ckmeldungen zu Tabellen erhalten . Wir wissen, dass Erweiterungs- und Bildlauf-Requisiten nicht gut zusammenarbeiten. Dieses Mal werden wir uns darauf konzentrieren, das Problem zu beheben. Au├čerdem werden wir viel an der Tabellenoptimierung tun. Und einfache M├Âglichkeit, das Layout zu erstellen:

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

Wir planen auch, die Zusammenfassungsfu├čzeile hinzuzuf├╝gen, um die

Neuer DatePicker

Current DatePicker erf├╝llt die meisten Anforderungen. Aber aus der Community-Diskussion k├Ânnen wir mehr herausholen. Wir werden Ruhejahr Picker und Ranger Picker zur Verf├╝gung stellen ( besprechen ). Au├čerdem werden wir den DatePicker-Designstil aktualisieren, um die Benutzererfahrung zu verbessern.

­čÜÇ Aktualisieren Sie weiter

Neben den oben genannten Inhalten planen wir auch weitere Aktualisierungen. Diese werden in 4.0 st├Ąndig aktualisiert, um die Entwicklung und Benutzererfahrung zu verbessern.

­čžÂ Verbesserung der Zug├Ąnglichkeit

Ant Design 3.0 bietet nur eingeschr├Ąnkte Unterst├╝tzung f├╝r die Barrierefreiheit. Wir planen, die Dom-Struktur anzupassen und weitere Arienmarkierungen hinzuzuf├╝gen, um das Bildschirmleseerlebnis zu verbessern. Au├čerdem bereiten wir uns auf die Optimierung der Tastaturinteraktion vor.

­čÄ» Entwickler-API-Standard

Wir stellen fest, dass einige API-Benennungsstile sich kaum von anderen unterscheiden. F├╝r Typescript-Entwickler ist dies kein Problem, aber es ist schwer, sich an etwas anderes zu erinnern.
Daher erstellen wir ein Namensstandarddokument, das aktuelle APIs und zugeh├Ârige Namensregeln enth├Ąlt. Befolgen Sie in der neuen Funktion die Namensregel, um einen API-Namenskonflikt zu vermeiden. Wir begr├╝├čen auch Community-Meinungen dazu in der PR.

­čĺ╝ Reagieren Sie auf den strengen Modus

Wenn Sie versucht haben, eine Antd-Komponente mit <React.StrictMode> verpacken, wird eine Warnung angezeigt. Wir haben bereits einige Komponenten durch eine neue Lebenszyklusmethode ersetzt. Diese Arbeit wird in 4.0 fortgesetzt.

­čĺí Verbessern Sie die Entwicklererfahrung

In der Vergangenheit haben wir festgestellt, dass einige Probleme wiederholt auftreten. Diese Probleme sind irgendwie Verwendungsfragen. Wir denken, wir k├Ânnen etwas dagegen tun (eigentlich schon ab 3.0). In der Entwicklungsumgebung warnen wir vor einem unerwarteten Status (z. B. Moment-Objekt ung├╝ltig machen, Pr├Ąfix- / Affix-Anpassung verursachen ├änderung der Dom-Struktur usw.). Wir glauben, dass die Konsole der erste Ort ist, an dem Sie sich auf Probleme konzentrieren k├Ânnen. Bietet die richtigen Tipps, um das Problem zu finden. Gleichzeitig werden wir weitere Fragen in den FAQ jedes Komponentendokuments zusammenfassen. Von der Seite der Wartung k├Ânnen wir nicht bei jeder Verwendungsfrage helfen, aber sie existieren, insbesondere bei neuen Entwicklern. FAQ kann helfen, viel Suchzeit zu sparen. Wenn Sie daran interessiert sind, k├Ânnen Sie gerne dazu beitragen, die Entwicklererfahrung bei uns zu verbessern.

­čÉ▒ Designressource

Ant Design ist nicht nur eine Komponentenbibliothek. Design ist die Unterst├╝tzungskraft. Wir werden die Aktualisierung der Designressource (Sketch-Komponentenpaket, K├╝chenwerkzeuge, Design Token usw.) synchronisieren. Wir werden auch den aktuellen Komponentenstil anpassen, um die Benutzererfahrung zu verbessern.

Meilensteine

Hier ist unser Meilensteinplan: Wir werden ein verwandtes Thema auf Github erstellen und auch soziale Mitwirkende begr├╝├čen:

Q2

  • Markieren Sie die zugeh├Ârige API als veraltet und entfernen Sie sie aus dem Dokument.
  • Aktualisierung der Komponentenwarnung auf niedriger Ebene.

Q3

  • Erstellen Sie einen Antd 4.0-Zweig und aktualisieren Sie das Dokument.
  • Komponentenentwicklung.

Q4

  • Geben Sie Ant Design 4.0 frei.

Willkommen an Bord

Wir werden Sie w├Ąhrend des Entwicklungsprozesses auf dem Laufenden halten. Der obige Inhalt ist m├Âglicherweise nicht endg├╝ltig. Gedanken / Ratschl├Ąge der Community sind mehr als willkommen! Lassen Sie uns Ant Design 4.0 verbessern!


Einf├╝hrung

Es ist 16 Monate her, seit Ant Design im Dezember 2017 3.0 ver├Âffentlicht hat. In diesem Zeitraum haben wir eine gro├če Anzahl von Fehlern behoben und eine gro├če Anzahl neuer Funktionen hinzugef├╝gt ( Aktualisierungsprotokoll ). 4289 Commits eingereicht, 138 Versionen ver├Âffentlicht, 7675 Ausgaben und PRs geschlossen und 25375 Sterne hinzugef├╝gt. Wir haben auch Ant Design Pro 4.0 ver├Âffentlicht . Unterst├╝tzt TypeScript, blockiert und abstrahiert das Layout. Wir m├Âchten allen Freiwilligen der Community f├╝r Ihr Engagement danken, um Ant Design benutzerfreundlicher zu machen.

Gleichzeitig ├╝berlegen wir, was der n├Ąchste Schritt ist und wie Ant Design weiterentwickelt werden kann. Wir gehen davon aus , dass

Das Folgende ist ein detaillierter Plan f├╝r 4.0, dies ist nat├╝rlich noch in Planung. Es kann Anpassungen geben, wenn es offiziell ver├Âffentlicht wird.

­čîô Kompatibilit├Ątsanpassung

Wir werden die Attribute entfernen, die in 4.0 als veraltet markiert sind. Zu diesem Zeitpunkt k├Ânnen Sie die abgebrochene Methode nicht mehr verwenden. Wenn Sie Ihr Projekt auf die neueste Version 3.x aktualisieren und die Warnmeldung von antd in der Konsole nicht angezeigt wird, ist auch die Aktualisierung auf 4.0 nahtlos. F├╝r die 3.x-Version werden wir nach der Version 4.0 noch weitere sechs Monate Wartungsarbeiten durchf├╝hren.

Wir wissen, dass die Upgrade-Version viel Energie hat, um die veraltete API aufzugeben. Wir planen, ein kompatibles Paket bereitzustellen, das den Projekt├╝bergang bei der Ver├Âffentlichung von 4.0 unterst├╝tzt (die zugeh├Ârige API befindet sich noch im Entwurf und kann bei der offiziellen Ver├Âffentlichung anders sein):

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

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

Das Kompatibilit├Ątspaket bleibt auch aktualisiert, bis die 3.0-Wartungsarbeiten beendet werden.

Verwenden Sie die neueste Version der React API

Wir unterst├╝tzen die React 15-Version schon seit langer Zeit, aber aufgrund des Community-Feedbacks ist dies eigentlich nicht wichtig (die Ausgabenummer von React 15 n├Ąhert sich 0%). Weil React selbst eine sehr robuste Kompatibilit├Ąt hat. Um React 15 zu unterst├╝tzen, achten wir sehr auf die Verwendung neuer APIs w├Ąhrend des Entwicklungsprozesses. Nach Version 4.0 verwenden wir die neueste React-Version als Benchmark f├╝r die Entwicklung:

  • Stellen Sie die Hooks-Version der zugeh├Ârigen Komponenten bereit
  • Support Concurrent Mode (Nat├╝rlich gibt es viele Dinge vorzubereiten und wird in der Version 4.0 weiter angepasst.)
  • Umarmungsreaktion 17 (wow! ~)

Beenden Sie die IE9 / 10-Unterst├╝tzung

Ant Design 3.0 hat gro├če Anstrengungen unternommen, um mit der alten Version von IE kompatibel zu sein. Laut Branchenstatistiken schrumpft jedoch sowohl der globale als auch der inl├Ąndische Anteil des IE9 / 10-Browsers mit dem Windows-Systemupdate. In Version 4.0 werden wir die Unterst├╝tzung von IE 9/10 einstellen (aber weiterhin IE 11 unterst├╝tzen). Dies bedeutet auch, dass neue Browserfunktionen unterst├╝tzt werden k├Ânnen.

Andere Kompatibilit├Ątsanpassungen

  • Upgrade von Less 2.x auf Less 3.x.
  • ├änderung der Symbolnutzung
  • Erw├Ąhnen Sie obsolet

­čôŽ Lautst├Ąrke reduzieren

Symbolgr├Â├če optimieren

In [email protected] haben wir das SVG-Symbol eingef├╝hrt ( warum das SVG-Symbol verwenden? ). Die API zum Festlegen von Symbolen mit Zeichenfolgenbenennung wird verwendet. Bei diesem Entwurf k├Ânnen wir nicht bei Bedarf laden. Daher haben wir alle SVG-Symboldateien eingef├╝hrt, wodurch die Gr├Â├če des verpackten Produkts erheblich erh├Âht wird . In 4.0 werden wir dies anpassen, um die Lautst├Ąrke zu optimieren.

Die alte Version der Symbolverwendung ist veraltet :

import { Icon, Button } from 'antd';

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

4.0 wird die Methode der Einf├╝hrung auf Anfrage ├╝bernehmen:

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

Sie k├Ânnen die oben beschriebene kompatible Methode weiterhin verwenden.

Entfernen Sie Draft.js

Wir haben Draft.js in die Mention-Komponente eingef├╝hrt, um die Dropdown-Eingabeaufforderungspositionierungsfunktion zu implementieren, aber wir haben nur einen kleinen Teil ihrer Funktion verwendet. In Anbetracht der Kostenleistung erscheint es etwas verschwenderisch. Wir planen, die Abh├Ąngigkeit davon in 4.0 zu entfernen und stattdessen eine leichtere L├Âsung zu verwenden. Gleichzeitig werden wir zur Unterscheidung von Mention-Komponenten in 3.0 eine neue Komponente Mentions bereitstellen, um API-Konflikte zu vermeiden. In ├Ąhnlicher Weise unterst├╝tzt es auch die fortgesetzte Verwendung der oben genannten kompatiblen Methoden:

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

const Demo = () => (
  <Mention />
);
// Added `Mentions` in 4.0
import { Mentions } from 'antd';

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

­čžş Leistungsoptimierung

W├Ąhrend des Wartungsprozesses erhielten wir viele Leistungsdiskussionen ├╝ber Big Data. Zu diesem Zweck planen wir auch eine Leistungsoptimierung.

Virtuelle Schriftrolle

Virtuelles Scrollen ist eine g├Ąngige Optimierungsmethode, aber aufgrund von Animationseffekten in Ant Design ist es nicht so einfach, das virtuelle Scrollen anzupassen. Jetzt planen wir, das virtuelle Scrollen in Komponenten mit Scrollen nativ zu unterst├╝tzen. Nat├╝rlich k├Ânnen wir nicht garantieren, dass alle Komponenten zum Zeitpunkt der Ver├Âffentlichung von 4.0 aktualisiert wurden und weiterhin aktualisiert werden.

Animationsverbesserungen

In der Vergangenheit haben wir einige Hacks verwendet, um Animationen zu verarbeiten. In den meisten Szenarien funktioniert es recht gut. In 4.0 planen wir, dies anzupassen und den Hack-Ansatz für einen reaktiveren Pfad aufzugeben. Die Anpassung wird unbeaufsichtigt aktualisiert. Sie müssen keine Änderungen daran vornehmen.

­čžę ├ťber Komponenten

In 3.0 haben wir weiterhin viele Komponenten hinzugef├╝gt. In 4.0 werden wir fortfahren. Diese Komponenten werden anhand unserer Gesch├Ąftsszenarien, Ant Design Pro und Community-Anforderungen verfeinert. Dies ist ein fortlaufender Prozess. Das Hinzuf├╝gen neuer Komponenten ist der gleiche wie bei Ant Design 3.0. Wir werden die Entwurfsentw├╝rfe verwandter Komponenten f├Ąllen und sie in der PR anzeigen und auf der offiziellen Website aktualisieren. Nach Abschluss der Entwicklung werden sie in der monatlichen Nebenversion ver├Âffentlicht.

Dar├╝ber hinaus bereiten wir uns darauf vor, einige Schl├╝sselkomponenten zu ├╝berarbeiten, um die Entwicklung und Interaktion zu vereinfachen. Es umfasst, ist aber nicht beschr├Ąnkt auf:

Formularkomponente

Das Publikum der Formularkomponenten ist sehr gro├č. Wir haben auch die Beschwerden der Community ├╝ber die umst├Ąndliche Formular-API bemerkt. In 4.0 hoffen wir, bessere API-Formulare zu untersuchen, um die Entwicklungskosten zu vereinfachen:

  • Das Formular aggregiert standardm├Ą├čig Formulardatenfelder, und Sie m├╝ssen keinen Kontext mehr ├╝ber Form.create() erstellen.
  • Fom.Item aggregiert die Formularfelder standardm├Ą├čig. Sie m├╝ssen das Feld nicht ├╝ber getFieldDecorator binden.
  • Der Wert von Form.Item bleibt immer erhalten, seine Validierungsfunktion wird jedoch nur wirksam, wenn das Formularelement sichtbar ist.
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>
  );
}

In der realen Szene sind wir auf die Szene der Multi-Form-Verkn├╝pfung gesto├čen (h├Ąufig in der detaillierten Konfiguration). Wir wissen, dass dies nicht bequem zu verwenden ist, daher werden wir auch die Funktion der Verkn├╝pfung zwischen Formularen bereitstellen:

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

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

Wenn Sie den Fortschritt des Formulars folgen wollen, begr├╝├čen die ├╝berpr├╝fen Fortschritte .

Tabellenkomponente

In der vergangenen Version haben wir viele R├╝ckmeldungen zur Table- Komponente erhalten. Wir wissen, dass die Erweiterungs- und Bildlaufeigenschaften von Table in der Vergangenheit nicht gut funktioniert haben. Dieses Mal konzentrieren wir uns auf die L├Âsung von Konflikten in diesem Bereich. Dar├╝ber hinaus werden wir die Leistung der Tabellenkomponente weiter optimieren. Und erkunden Sie einige einfachere Tabellenlayoutmethoden:

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

Dar├╝ber hinaus planen wir, eine Zusammenfassungsfu├čzeile hinzuzuf├╝gen, um die

DatePicker erneuert

Der vorhandene DatePicker hat die meisten Anforderungen erf├╝llt, jedoch aus der Community-Diskussion . Wir haben immer noch die M├Âglichkeit, tiefer zu graben. Wir werden die verbleibenden Jahresselektoren und die entsprechenden Bereichsselektoren vervollst├Ąndigen ( Diskussion ). Dar├╝ber hinaus werden wir den Stil der zugeh├Ârigen Datums- und Zeitauswahl anpassen, um die kognitiven Kosten der Benutzer weiter zu senken.

­čÜÇ Kontinuierliche Aktualisierung

Zus├Ątzlich zu den oben genannten Inhalten planen wir, einige Inhalte weiterhin zu aktualisieren. Dies wird in 4.0 weiterverfolgt, um die Benutzerentwicklung und die Benutzererfahrung besser zu verbessern.

­čžÂ Verbessern Sie die Barrierefreiheit

Ant Design 3.0 bietet keine Unterst├╝tzung f├╝r Barrierefreiheit. Aus diesem Grund planen wir, die Komponentenstruktur anzupassen und weitere Arien-Tags hinzuzuf├╝gen, um das Leseerlebnis auf dem Bildschirm zu verbessern. Dar├╝ber hinaus bereiten wir die Optimierung der vorhandenen Interaktionsmethoden f├╝r Komponententastaturen vor, um eine bessere vollst├Ąndige Interaktion mit der Tastatur zu gew├Ąhrleisten.

­čÄ» Entwickler-API-Spezifikation

Im Laufe der Evolution stellten wir fest, dass einige API-Stile mit anderen Komponenten nicht kompatibel zu sein scheinen. F├╝r TypeScript-Benutzer ist dies kein Problem, f├╝r andere Benutzer kann es jedoch zu Speicherproblemen kommen.

Daher werden wir ein Standard-Benennungsdokument erstellen. Das Dokument enth├Ąlt eine Liste der vorhandenen APIs und die entsprechenden Namenskonventionen. Wenn Sie neue Funktionen hinzuf├╝gen, werden diese auch gem├Ą├č dieser Spezifikation benannt. Um API-Abweichungen zu vermeiden, die in Zukunft auftreten k├Ânnen. Nat├╝rlich freuen wir uns auch ├╝ber Feedback von Community-Studenten in der PR.

­čĺ╝ Reagieren Sie auf den strengen Modus

Wenn Sie versuchen, <React.StrictMode> au├čerhalb der antd-Komponente zu verpacken, erhalten Sie viele Warnmeldungen von der antd-Komponente. Wir haben die Lebenszyklusmethoden einiger Komponenten in 3.0 aktualisiert. In 4.0 werden wir fortfahren.

­čĺí Verbessern Sie die Entwicklererfahrung

Im vergangenen Wartungsprozess haben wir festgestellt, dass bestimmte Probleme hin und her treten. Diese Probleme treten h├Ąufig in einigen Verwendungsspezifikationen oder Anwendungsszenarien auf. Zu diesem Zweck haben wir uns entschlossen, hier Verbesserungen vorzunehmen (tats├Ąchlich haben wir uns seit 3.0 verbessert). In der Entwicklungsumgebung werden wir in der Konsole nach unerwarteten Situationen fragen (z. B. ung├╝ltige Moment-Objekte, ├änderungen der Dom-Struktur, die durch die dynamische Anpassung des Eingabe-Pr├Ąfixes / -Anhangs verursacht werden usw.). Wir sind davon ├╝berzeugt, dass die Konsole der erste Ort ist, auf den Entwickler bei Problemen achten. Wenn Sie hier entsprechende Hinweise geben, k├Ânnen Sie das Problem schnell lokalisieren. Zur gleichen Zeit f├╝r einige spezielle Anwendungen oder Szenarien. FAQs finden Sie in der entsprechenden Komponentendokumentation. Aus Sicht der Projektwartung kann unsere Energie keine detaillierten Antworten auf das Thema Nutzung geben. Diese Fragen sind jedoch real, insbesondere f├╝r Neulinge. Eine h├Ąufig gestellte Frage kann viel Suchzeit sparen. Wenn Sie interessiert sind, k├Ânnen auch freiwillige Community-Mitarbeiter zur Verbesserung der Entwicklererfahrung beitragen.

­čÉ▒ Asset Management verwalten

Ant Design ist nicht nur eine Reihe von Komponentenbibliotheken, sondern auch ein leistungsstarkes Designsystem dahinter. In 4.0 werden wir die neuesten designbezogenen Elemente (Sketch-Komponentenpaket, K├╝chenwerkzeugsatz, Design-Token usw.) aktualisieren, um Designern und Studenten, die sich f├╝r Design als Referenz interessieren, die M├Âglichkeit zu geben. Bestehende Designstile f├╝r Komponenten werden ebenfalls optimiert, um die visuellen Effekte und die Benutzererfahrung zu verbessern.

Zeitplan

Das Folgende ist unser Zeitplan, in dem einige Komponentenaktualisierungen ausgef├╝hrt werden. Wir werden verwandte Themen zu Github erstellen und freiwillige Helfer aus der Community zur Teilnahme einladen:

Q2

  • Markieren Sie die erforderliche veraltete API als veraltet und l├Âschen Sie sie im Dokument.
  • Die zugrunde liegenden Komponenten sind vorgew├Ąrmt.

Q3

  • Richten Sie einen Antd 4.0-Zweig ein und aktualisieren Sie die Dokumentation.
  • Entwicklung von Komponenten auf niedriger Ebene.

Q4

  • Release 4.0 Version.

Willkommen zur Teilnahme

W├Ąhrend des 4.0-Entwicklungsprozesses kann der oben genannte Inhalt angepasst werden. Begr├╝├čen Sie Community-Studenten, um wertvolle Ideen und Vorschl├Ąge zu liefern. Lassen Sie uns Ant Design 4.0 bequemer und benutzerfreundlicher gestalten!

4.x ÔťĘ Announcement ­čĽÖ Plan ­čŚú Discussion

Hilfreichster Kommentar

15311

Werden wir Moment.js in Version 4 ersetzen?

Alle 182 Kommentare

15311

Werden wir Moment.js in Version 4 ersetzen?

Gro├čartig, ich kann es kaum erwarten, ein Upgrade durchzuf├╝hren

V4 Alpha vorbereiten

Haupts├Ąchlich Ziel

  • [x] v4-Zweig
  • [x] Kompatibles Paket
  • [x] Veralteten Inhalt entfernen

    • [x] Komponente erw├Ąhnen

    • [x] Neue Erw├Ąhnung Komponente # 16532

    • [x] Form.create

    • [x] Symbol mit type # 12011

    • [x] Andere mit veralteten Warnrequisiten

  • [x] Weniger v3
  • [x] Leistung

    • [x] rc-animate Upgrade

    • Unterst├╝tzung f├╝r [x] gleichzeitigen Modus

    • [x] Unterst├╝tzung f├╝r virtuelle Bildlaufanimationen

    • [x] Virtuelle Schriftrolle

    • [x] RC-Komponente

    • [x] Baum

    • [x] W├Ąhlen Sie

    • [x] TreeSelect

    • [x] Formular: https://github.com/react-component/form/pull/292

    • [x] Stellt die Hooks-Version bereit

    • [x] Tabelle

    • [] templateAreas

    • [x] Unterst├╝tzung von expand & scroll Zusammenarbeit

  • [x] DatePicker mit neuem Design

    • [x] YearPicker

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

Ziel fortsetzen

  • [ ] Barrierefreiheit
  • [x] API-Standard
  • [] React.StrictMode

Hier sind einige Vorschl├Ąge zu Ant 4

├ťber templateAreas

templateArea analysiert die Zeichenfolge zur Laufzeit und verursacht beim Tippfehler der Zeichenfolge nicht erwartete Analysefehler oder Fehler. Das Parsen zur Laufzeit ist auch f├╝r TypeScript unfreundlich. W├╝rde Ant Team den folgenden Vorschlag pr├╝fen:

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

├ťber Abh├Ąngigkeit

W├╝rde Ant Team in Betracht ziehen, die Abh├Ąngigkeit von moment beseitigen?

Moment ist zu gro├č f├╝r ein Front-End-Projekt, es gibt viele Alternativen, aber die Requisiten von TimePicker und DatePicker basieren auf Moment. Es f├╝hrt dazu, dass wir moment durch date-fns oder eine andere Bibliothek ersetzen k├Ânnen, die kleiner als Moment ist.

├ťber Icon

Ich denke, die Art und Weise, wie Ant-Symbole jetzt verwendet werden, sollte nicht veraltet sein. Die neue Art und Weise, wie das Importsymbol beim Hinzufügen oder Entfernen eines Symbols zu allgemeinen Änderungen an Bundle-Chunks führen kann.

Ant Team kann zwei M├Âglichkeiten zur Verwendung von Ant-Symbolen bereitstellen:

  1. Packen Sie alle Symbole in eine JS-Datei. Entwickler k├Ânnen die gesamte Datei <script> Tag externals im Webpack festlegen.
  2. Der neue Weg, der oben einf├╝hrt.

4 Šś» ŠłĹ ň»╣ Ant4 šÜä ńŞÇń║Ť ň╗║Ŕ««

ňů│ń║ÄtemplateAreas

templateAreas Script Ŕ┐ÉŔíî ŠŚÂ ň»╣ ňşŚšČŽńŞ▓ Ŕ┐ŤŔíî ŔžúŠ×É ´╝î ňŻô ňşŚšČŽńŞ▓ ňç║šÄ░ Šő╝ňćÖ ÚöÖŔ»» šÜä ŠŚÂňÇÖ ´╝î Script Script Script Script Script TypScript ň»╣ ScriptAnt ňŤóÚśč nt nt ´╝Ü ´╝Ü

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

ňů│ń║Ä ńżŁŔÁľ

Šś»ňÉŽ ŔÇâŔÖĹ šž╗ÚÖĄ ň»╣ Moment šÜä ńżŁŔÁľ´╝č

Momentň»╣ń║Äň돚ź»Úí╣šŤ«ŠŁąŠŚÂň«×ňťĘŠś»ňĄ¬ňĄžń║ć,ňŞéÚŁóńŞŐŠťëŔ«ŞňĄÜňĆ»ńżŤŠŤ┐ń╗úšÜäň║ô,ńŻćŠś»TimePickerňĺîDatePickeršÜäňĆ銼░ńżŁŔÁľń║ÄMomentň»╣Ŕ▒í,Ŕ┐Öň»╝Ŕç┤ń║抳Ĺń╗ČŠ▓íňŐ׊│ĽńŻ┐šöĘdate-fnsŠłľŔÇů ńŞÇń║Ť Š»ö Moment ŠŤ┤ ň░Ć šÜä ň║ô ŠŁą ŠŤ┐ń╗ú MomentŃÇé

ňů│ń║Ä ňŤżŠáç

ńŻ┐šöĘ Ŕ«ĄńŞ║ ňŻôňëŹ ńŻ┐šöĘ Ameise ňŤżŠáç šÜä Šľ╣ň╝Ć ńŞŹ ň║öŔ»ą Ŕóźň║čň╝âŃÇé Šľ░ šÜä ńŻ┐šöĘ Šľ╣ň╝Ć ňťĘ ŠłĹ Šľ░ňó× ŠłľŔÇů ňłáÚÖĄ ňŤżŠáç unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk unk

Ameise ńŻ┐šöĘ ňĆ»ń╗ą ŠĆÉńżŤ ňŽéńŞő ńŞĄšžŹ Šľ╣Šíł ŠŁą ńŻ┐šöĘ Ameise ´╝Ü ´╝Ü

  1. Pack ŠëÇŠťë ňŤżŠáç ňł░ s js Šľçń╗ ńŞş ´╝î ň╝ÇňĆĹ<script>Šáçšşż pack ňůĘÚâĘ ňŤżŠáç ´╝î pack pack Webpack ńŞş Ŕ«żšŻ«externals
  2. 4,0 Šľ░ ń╗őš╗Ź šÜä ňŤżŠáç ńŻ┐šöĘ ńŻ┐šöĘ

Gibt es einen Plan zur Unterst├╝tzung des virtuellen Bildlaufs f├╝r Tabellen? In einigen F├Ąllen wird eine unendliche Tabelle der Paginierung vorgezogen.
Und da 'Kommentar' in 3.11 enthalten ist, vielleicht ChatBox und ChatMessage?

Gibt es einen Plan zur Unterst├╝tzung des virtuellen Bildlaufs f├╝r Tabellen? In einigen F├Ąllen wird eine unendliche Tabelle der Paginierung vorgezogen.
Und da 'Kommentar' in 3.11 enthalten ist, vielleicht ChatBox und ChatMessage?

UserInfo vielleicht Priorit├Ąten.

ungef├Ąhr templateAreas

Ich unterst├╝tze auch die Syntax von zweidimensionalen Arrays
Ich unterst├╝tze auch die Syntax von zweidimensionalen Arrays.

In Bezug auf templateAreas finden Sie hier ein Beispiel f├╝r die statische ├ťberpr├╝fung
Dies ist ein Beispiel f├╝r eine statische Typpr├╝fung mit ts f├╝r 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);

Spielplatz

image

genial

15311

Werden wir Moment.js in Version 4 ersetzen?

Ich denke, das Hauptproblem bei der Abkehr von moment ist die Ver├Ąnderung um locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

Hoffe, die Unterst├╝tzung f├╝r Typoskript kann besser sein

Tolles Sehen 4.0 ist in Arbeit! Ich habe unten einige Vorschl├Ąge zur Pr├╝fung, ich bin nicht ganz sicher, ob sie in das Designmuster passen, aber f├╝r die Anpassbarkeit w├Ąren sie meiner Meinung nach gro├čartig.

  • In der Lage sein, die Hintergrundfarbe einer Zeile innerhalb von <Table> zu steuern. F├Ąrben Sie beispielsweise eine Zeile orange, um die Warnung f├╝r diese Zeile hervorzuheben.
  • Tastenfarben, habe keine vorherigen Diskussionen dazu gefunden. Aber es w├Ąre gro├čartig, eine ├Ąhnliche API wie <Tag color="red">RED<Tag /> f├╝r Schaltfl├Ąchen zu haben, zum Beispiel <Button color="red">Red Button<Button/> .
  • Unterst├╝tzung f├╝r Font-Awesome 5.x-Symbole in den verschiedenen Komponenten oder Sicherstellen, dass sie mit den anderen Symbolen funktionieren, die noch ausgef├╝hrt werden. Ich habe einige Probleme bei der Ausrichtung festgestellt, wenn FA anstelle der nativen <Icon> -Komponente verwendet wurde.
  • Die <Pagination> -Komponente unterst├╝tzt nicht die direkte Bereitstellung der Seitenanzahl. Der Anwendungsfall besteht darin, dass mir beispielsweise nur die Seitenanzahl und die aktuelle Seite zur Verf├╝gung stehen, nicht jedoch die Anzahl der Elemente auf jeder Seite. Ich habe noch keinen guten Weg gefunden, damit umzugehen.

@orecus

F├Ąrben Sie beispielsweise eine Zeile orange, um die Warnung f├╝r diese Zeile hervorzuheben

Ich neige dazu, rowClassName zu verwenden, um eine Klasse an diese Zeile anzuh├Ąngen und dann den Standardstil mit CSS zu ├╝berschreiben.

DasKomponente unterst├╝tzt nicht die direkte Bereitstellung der Anzahl der Seiten

Kann eine gef├Ąlschte Summe passieren. Wenn Sie beispielsweise 50 Seiten m├Âchten, k├Ânnen Sie total = pageSize * 50 .

Das sind wirklich gute Nachrichten. ­čÜÇ Der Fokus auf die Leistung ist sichtbar und das ist gro├čartig, da einige Komponenten nicht mit gro├čen Datenmengen verwendet werden k├Ânnen.

Wie m├Âchten Sie Virtual Scroll implementieren? Verwenden Sie react-window ?

Gibt es Priorit├Ąten f├╝r Hauptzielfunktionen?
Ich w├╝rde gerne Virtual Select in der Alpha-Phase ausprobieren und ich denke, ich bin in dieser Hinsicht nicht allein.

Vielen Dank.

Warum kann der Stringname nicht bei Bedarf geladen werden? L├Âst Lazy () nicht das Problem?

@faradaytrs
Ja, aber es h├Ąngt von den Eigenschaften von webpack , bestimmten Operationen

Zwei Probleme sind st├Ąrker ausgepr├Ągt

  • /* webpackChunkName: "icons/icon-" */ geschrieben von webpack Magic Comments
  • Wie im Original gesagt: "Jedes Symbol enth├Ąlt zus├Ątzlich zum Symbolinhalt zus├Ątzliche Informationen zum Webpack-Modul."

Irgendwelche Ideen zur globalen Verschmutzung? # 4331 # 9363

Irgendwelche Ideen zur globalen Verschmutzung? # 4331 # 9363

Meiner Meinung nach w├Ąre es f├╝r 4.0 gro├čartig, Benutzern zu erm├Âglichen, Antdesign-Stile unter einem globalen Namen zu erfassen (siehe meinen Kommentar https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487).

Sch├Ân, vom n├Ąchsten Meilenstein zu h├Âren!

Meine 2 Ct. in Bezug auf Dokumente und Rationalisierung:

Es werden h├Ąufig Requisiten an die zugrunde liegenden DOM-Elemente ├╝bergeben, die nicht dokumentiert sind (IIRC In einigen F├Ąllen werden alle Requisiten, die nicht von der Komponentenimplementierung ausgew├Ąhlt wurden, weitergeleitet). Es w├Ąre sehr hilfreich, sie dokumentieren zu lassen, gruppiert nach Zielelementen (es kann mehr als eines geben): "Die folgenden Requisiten werden an den Container weitergeleitet

"oder" Die folgenden Requisiten werden durch die Element ... "oder" Alle anderen Requisiten werden an ... ├╝bergeben. "F├╝r diese Requisiten ist keine ausf├╝hrliche Erl├Ąuterung erforderlich. Links zu MDN k├Ânnen ausreichend sein.

Eine solche ├änderung w├Ąre auch f├╝r uns TypeScript-Entwickler von Vorteil. Derzeit ist es eine Menge m├╝hsamer Arbeit, die TS-Definition in dieser Hinsicht auf dem neuesten Stand zu halten.

Im "Developer API Standard" sollte dies dokumentiert werden und es sollte eine Entscheidung getroffen werden, welche Requisiten immer ├╝bergeben werden sollen (className, id ,?)

Eine andere Frage:

Planen Sie, weitere Dateien (oder sogar RC-Komponenten) von JavaScript mit TypeScript-Definitionen auf natives TypeScript umzustellen?

Ersetzen Sie rc-form durch etwas Flexibleres wie Formik.

Frage an die Betreuer:

Mein Team ist daran interessiert, Ant auszuprobieren, aber https://github.com/ant-design/ant-design/issues/11097 (Antd Less erzeugt globale JavaScript-Lecks) blockiert uns. Die obige Roadmap besagt, dass Ant auf WENIGER Version 3 umsteigen wird, und ich habe gelesen, dass die betreffende unsichere, veraltete Inline-JavaScript-Funktion standardm├Ą├čig deaktiviert ist. Bedeutet dies, dass Ant Version 4 das Problem WENIGER nicht mehr hat?

Nicht nur IE9 / 10, sondern auch die IE-Unterst├╝tzung beenden,

Oh Gott, es w├Ąre so n├╝tzlich, globale Stile nicht zu verschmutzen ( html , body , *::before , ...)

Ein auf React-Slick basierendes Karussell hat viele Probleme bei der Verwendung. Es wird empfohlen, die neue Version durch eine andere Bibliothek zu ersetzen
React-Pannable ist ziemlich gut zu bedienen

Die Beschreibung der Commits von @cztflove dieser Bibliothek ist alles no message ­čśâ, und die Aufmerksamkeit der Community ist zu gering, ich sollte es nicht ber├╝cksichtigen.

@ yoyo837 Haupts├Ąchlich ist diese Komponente neu, daher ist die Aufmerksamkeit relativ gering, aber sie unterst├╝tzt virtual list und ń╗┐iosŔż╣š╝śň╝╣ŠÇž , basierend auf dieser Komponente k├Ânnen auch einige ŠőľŠőŻ -Funktionen realisiert werden ­čĄö In Zukunft gibt es mehr Raum f├╝r Expansion

Sollten wir nicht in eine universelle Sprache migrieren?

Ich stimme den regionalen Sprachen voll und ganz zu und respektiere sie, auch wenn ich kein englischer Muttersprachler bin. Es gibt Hunderte von sich wiederholenden oder besser gesagt doppelten Aufgaben mit doppelter Sprache. Der wichtigste Faktor ist vor allem die Zeit, die ├ťbersetzung der besprochenen Zeichenfolgen, das Lernen aus der Dokumentation oder den Tuts. Demos etc.

Ich muss zugeben, es gibt keinen Mangel an Mitwirkenden aufgrund von Sprachkonflikten, dennoch haben Hunderte von uns Angst, sich zu engagieren. Es gibt bereits viele Sprints, Probleme bei der ├ťbersetzung, aber ich bitte Sie, mit dieser Hauptversion vollst├Ąndig auf eine universelle Sprache zu migrieren, um die Kommunikationsl├╝cke zwischen uns allen zu

Sollten wir nicht in eine universelle Sprache migrieren?

Ich stimme den regionalen Sprachen voll und ganz zu und respektiere sie, auch wenn ich kein englischer Muttersprachler bin. Es gibt Hunderte von sich wiederholenden oder besser gesagt doppelten Aufgaben mit doppelter Sprache. Der wichtigste Faktor ist vor allem die Zeit, die ├ťbersetzung der besprochenen Zeichenfolgen, das Lernen aus der Dokumentation oder den Tuts. Demos etc.

Ich muss zugeben, es gibt keinen Mangel an Mitwirkenden aufgrund von Sprachkonflikten, dennoch haben Hunderte von uns Angst, sich zu engagieren. Es gibt bereits viele Sprints, Probleme bei der ├ťbersetzung, aber ich bitte Sie, mit dieser Hauptversion vollst├Ąndig auf eine universelle Sprache zu migrieren, um die Kommunikationsl├╝cke zwischen uns allen zu verringern.

Ŕ»┤ňżŚ ň»╣ ´╝î ńŞôň┐â Ŕ»┤ Ŕ»┤ ńŞşŠľç

Frage an die Betreuer: Gibt es Pl├Ąne, CSS-Variablen zum ├ändern von Farb- und Stilthemen w├Ąhrend des Flugs zu verwenden?

In der Praxis habe ich gelernt, dass das ├ändern von Komponentenstilen durch Variablen ein sehr komfortabler Weg ist. Ich habe versucht, weniger Variablen mit var(--css-vars) umzuschreiben, aber ich habe viele Fehler beim Kompilieren von Stilen festgestellt, da viele Stile Funktionen und Operationen mit Variablen verwenden, nicht nur Werte. Ich nehme an, dass es eine gro├če Aufgabe ist und auf diese Weise wichtige ├änderungen erstellt werden, aber Hauptversionen wurden erstellt, um ├änderungen zu ├Ąndern :) Und die Verwendung von CSS-Variablen bietet viele M├Âglichkeiten zur Anpassung von Komponentenstilen.

Was denkst Du dar├╝ber? Ich habe ohnehin geplant, ein Thema mit CSS-Vars als Pull-Anfrage zu entwickeln, da diese Funktion (├ändern des Themas w├Ąhrend des Flugs) in meinem Projekt ben├Âtigt wird.

Entschuldigung, wenn dieser Vorschlag doppelt vorhanden ist, aber ich habe in anderen Ausgaben und PRs nichts dar├╝ber gefunden.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Dies muss die gesamte IE-Unterst├╝tzung beenden. Die Beendigung der IE11-Unterst├╝tzung ist zu radikal, obwohl ich dies auch unterst├╝tze.

@ yoyo837 , ich stimme zu, dass es zu radikale Ursache f├╝r IE-Support-Probleme ist. Aber auch Ant Design hat offizielle Unterst├╝tzung (wie auf ant.design angegeben) von Electron (als separate Plattform, nicht als Web). In diesem Fall kann es m├Âglich sein, zwei Themen zu erstellen: eines mit weniger Variablen und eines mit CSS-Variablen. Aber es scheint zu schwer zu unterst├╝tzen.

Also, eine andere m├Âgliche Strategie, die ich annehme - Erstellen Sie weniger Variablen f├╝r alle anpassbaren Attribute in Less oder entfernen Sie die Verwendung von Funktionen und Operationen unter weniger Variablen, die jeder Entwickler als Eintrag f├╝r seine CSS-Variablen verwenden kann. Oder wenn Sie es einfacher sagen - verwenden Sie Less vars nur als Wertecontainer, nicht f├╝r Funktionen und Operationen.

Wenn nur gro├če Browser unterst├╝tzt werden, glaube ich, dass die Gr├Â├če des Codes kleiner und der Code einfacher zu warten ist.

Nicht nur IE9 / 10, sondern auch die IE-Unterst├╝tzung beenden,

@wanliyunyan Zu brechen. Einige Entwickler halten sich m├Âglicherweise an antd @ 3 und es ist keine gute Sache f├╝r uns.

@ Z3SA Das wird eine gro├če Arbeit.

@dancerphil Zum Gl├╝ck betrachte ich f├╝r mein Projekt nur die neueste Version von Chrome. ­čśâ Ich hoffe also, je kleiner die Gr├Â├če, desto besser.

@ yoyo837 Ich wei├č es. Und ich werde es selbst tun, wenn diese Idee nicht genug Aufmerksamkeit bekommen k├Ânnte.

Wir sind ein Unternehmen, das gerne mithilfe einzelner Komponenten schrittweise auf antd migrieren w├╝rde. Die Verwendung globaler Stile durch ant erschwert dieses Problem jedoch erheblich. Bitte h├Âren Sie auf, globale Stile zu verschmutzen.

Form ist eine der am h├Ąufigsten verwendeten Komponenten. Wir stellen fest, dass Social Media viele Kommentare zum API-Design hat. Wir m├Âchten die API in 4.0 vereinfachen:

Fom.Item enth├Ąlt Feldbindung.

K├Ânnen wir mit diesen ├änderungen Form.Item weiterhin als reine Pr├Ąsentationskomponente verwenden? Ich liebe die Komponenten von antd, aber ich bevorzuge die React-Final-Form f├╝r das State Management. Ich m├Âchte den Stil von Form.Item und keine der Zustandsverwaltungslogiken.

Zweig 4.0 wird erstellt. Wann kann ich eine Vorschau anzeigen?

Die neue Formularkomponente ist fantastisch!

Bitte ersetzen Sie momentjs durch dayjs, da momentjs sehr gro├č ist und die Bundle-Gr├Â├če ebenfalls sehr gro├č wurde.

Gibt es Fallstricke bei der ├ťbernahme des Rich-Text-Editors?

Was ist das Erscheinungsdatum?

@rafaelodassi Es gibt noch kein best├Ątigtes Datum, aber wahrscheinlich im vierten Quartal.

Ein Upgrade auf @babel/[email protected] und [email protected] w├Ąre ebenfalls unsere Priorit├Ąt.

Nicht v3? Gibt es Neuigkeiten f├╝r [email protected] ?

Alle reden davon, die IE-Unterst├╝tzung insgesamt zu entfernen, da die Statistiken zeigen, dass sie kaum verwendet wird. Wie w├Ąre es mit den Millionen von Unternehmensbenutzern hinter dem Intranet, die ├╝berhaupt nicht in die Statistiken gelangen? Sie bleiben aufgrund der Unternehmensrichtlinien bei IE10 und IE11 h├Ąngen.

Ich werde bei antd @ 3 bleiben, wenn die IE11-Unterst├╝tzung eingestellt wird. Das L├Âschen von IE10 kann von den meisten Clients akzeptiert werden, da es von MS nicht mehr unterst├╝tzt wird und Unternehmens-PCs auf IE11 aktualisiert werden.

Ich w├╝rde vorschlagen, eine API einzuf├╝hren, um die Verwendung von Objekten als <Select/> -Werte zu erm├Âglichen.
Details finden Sie unter https://github.com/ant-design/ant-design/issues/13485

cc @zombieJ

Es wird empfohlen, dass jede Komponente ├╝ber ein eigenes Aktualisierungsprotokoll verf├╝gt. Es spielt keine Rolle, ob Sie es versteckt halten, pers├Ânlicher Vorschlag ~

Wann kann Release oder RC m├Âglich sein?

Es wird empfohlen, dass jede Komponente ├╝ber ein eigenes Aktualisierungsprotokoll verf├╝gt. Es spielt keine Rolle, ob Sie es versteckt halten, pers├Ânlicher Vorschlag ~

Stimmen Sie zu, ob die Dokumentation jeder Komponente mit welcher Version hinzugef├╝gt werden kann. Andernfalls k├Ânnen Sie in der Dokumentation nachsehen, ob die aktuelle Version verwendet werden kann und ob die Abh├Ąngigkeiten aktualisiert werden sollen.

Gesendet mit GitHawk

@ fwh1990 @ jas0ncn @redclown
auf Englisch pls)

Behalte es als englischen Kanal, danke ~

4.0 Alpha wurde ver├Âffentlicht. Das ist erstaunlich. Komm schon Bruder.

Ich werde mein Projekt umgestalten, sobald Sie die Beta- Version ver├Âffentlichen

Das Standardthema von antd ist wundersch├Ân, kann aber auch besser sein.
Ber├╝cksichtigen Sie zur besseren Lesbarkeit den verbesserten Kontrast und verwenden Sie gr├Â├čeren Text.

Es gibt so viele Artikel und Werkzeuge.
https://www.google.com/search?q=web+readability

Es ist besser, ein Skript f├╝r die Migration von antd v3 nach v4 bereitzustellen.

Im biz-Projekt sind zu viele Formularkomponenten vorhanden. Die Migration von antd v3 nach v4 kostet zu oft.

Das react-relay Team hat etwas Ähnliches getan.
Wenn Sie react-relay v3 auf React-Relay v4 Realease migrieren m├Âchten , m├╝ssen Sie viele Dateien ├Ąndern.
Daher verwenden sie jscodeshift , um ein Migrationsskript zu schreiben, sodass der Benutzer von react-relay react-relay v3 leicht auf v4 migrieren kann.

Ich finde es schwierig, einige der Stile zu verdrahten. Also, wenn es einen Plan gibt, das zu verbessern?

Ich pers├Ânlich bevorzuge die Verwendung von CSS-in-JS, es ist sehr flexibel und passt unglaublich gut zu React.

Bei Verwendung einer Klassenkomponente unter 4.0 Alpha kann die Formularentit├Ąt nicht abgerufen werden. Https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn Der Beispielcode unter diesem Link kann nicht implementiert werden, und es gibt keine Entit├Ąt in formRef Methode

Es wurde gel├Âst

@ Kwei9 , k├Ânnen Sie ein Problem ├Âffnen und zur Reproduktion anh├Ąngen?Lass mich mal sehen

@ Kwei9 , k├Ânnen Sie ein Problem ├Âffnen und zur Reproduktion anh├Ąngen?Lass mich mal sehen

Das Ref-Schreiben wird auf diese L├Âsung ge├Ąndert

Ich denke, jetzt w├Ąre die Zeit gekommen, um die globale Umweltverschmutzung anzugehen! Dies macht es sehr notwendig, antd neben anderen Anwendungen zu verwenden!

Moment ist zu gro├č f├╝r ein Front-End-Projekt, es gibt viele Alternativen, aber die Requisiten von TimePicker und DatePicker basieren auf Moment. Es f├╝hrt dazu, dass wir den Moment nicht ersetzen k├Ânnen ...

@ jas0ncn Hallo, bitte erw├Ąge, momentjs durch dayjs zu ersetzen (eine 2-KB-Alternative). Dies ist bereits eine getestete Ausgabe von Replace Moment.js in Ant Design (Antd) durch Day.js https://github.com/iamkun/dayjs/issues/529 und funktioniert sehr gut.

Als Hauptbetreuer von dayjs sind wir bereit, Ihnen bei diesem Ersatz behilflich zu sein.

Vielen Dank.

J ŔÇâŔÖĹ ńŻ┐šöĘ ŔŻ╗ ÚçĆ j Dayjs ŠŁą ŠŤ┐ŠŹó moment.js ps ňťĘ Ŕ┐ÖÚçî ňĚ▓š╗Ć ňůůňłć ŠÁőŔ»Ľ Ŕ┐ç ŠŤ┐ŠŹó šÜähttps://github.com/iamkun/dayjs/issues/529 ŃÇé

Die alte Art der Verwendung von Symbolen wird * veraltet *:

import { Icon, Button } from 'antd';

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

Verwendet stattdessen ein einzelnes Importsymbol in 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>
);

Ich habe eine Idee zu der neuen Symbolreferenz. Aufgrund des neuen Wortlauts oben entspricht jedes Symbol einer separaten Komponente. Beispielsweise kann die Einf├╝hrung eines Ladesymbols folgenderma├čen aussehen:

import Loading from 'antd/icons/Loading';

<Loading />

Aber normalerweise k├Ânnen Sie eine echte Ladekomponente selbst kapseln, und in der Vergangenheit wusste <Icon /> , dass es sich auf einen Blick um ein Symbol handelt, aber jetzt nimmt es zu viele Namen an, und ich m├Âchte wissen, dass das Symbol nach oben gehen muss, um den Importort zu finden.
sowie:

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

Auf den ersten Blick scheinen die folgenden beiden nicht als Symbole zu sehen zu sein (nat├╝rlich hat dies keine Auswirkungen auf die Ausf├╝hrung des Codes ~)
Wenn Sie zum folgenden Wortlaut wechseln:

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

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

Durch die ├Ąu├čere Schicht des Musters sieht es dem vorherigen sehr ├Ąhnlich und kann auch bei Bedarf verwendet werden. Es ist nichts weiter als die Einf├╝hrung einer Icon-Komponente.
Und wenn bestimmte Konventionen erf├╝llt sind, kann ein benutzerdefiniertes Symbol ├╝ber das Attribut spec ├╝bergeben werden. Es ist gleichbedeutend mit antd, das hilft, viele Symbole im Voraus zu definieren, aber die benutzerdefinierten sind genau die gleichen ~~~

ps: Oder ist es so, dass an diese Art des Schreibens schon vor langer Zeit gedacht wurde oder nicht dar├╝ber nachgedacht wurde, weil es ein Problem mit dieser Art des Schreibens gibt? . . ­čśé
Ich habe nur dar├╝ber nachgedacht. . .

@ppbl ├Ąhnelt Ihrer Vorstellung nach wie folgt:

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

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

Das neue Symbol wird ebenfalls auf ├Ąhnliche Weise generiert (siehe https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx)

K├Ânnen wir diese Situation vermeiden, indem wir dem Namen des Symbols ein Symbolpr├Ąfix / -suffix hinzuf├╝gen?

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

<LoadingOutlineIcon  {...otherProps}/>

Bitte arbeiten Sie an der Reduzierung der Bundle-Gr├Â├če
https://github.com/ant-design/ant-design/issues/9419
Beim Importieren von Button dem Projekt 95 KB hinzugef├╝gt - das ist 2019 einfach nicht akzeptabel. ­čĹÄ

@vagusX Vielleicht denke ich nur, dass der Name ein bisschen lang ist? Ich denke immer, dass der Name pr├Ągnant ist und wie eine kleine Komponente oder eine relativ einzelne Komponente aussieht. Der Name ist zu lang und sollte eine gro├če Komponente sein (nat├╝rlich ist dies ein falsches Gef├╝hl ~ ich wei├č). . ~

Wenn ich wei├č, dass es sich um ein Symbol handelt, nur um <Icon /> , kann ich nat├╝rlich auch selbst eine <Icon /> -Komponente erstellen und dann das Antd-Symbol umschlie├čen, wenn ich es verwende. Der Effekt ist fast der gleiche. ~ Ich habe nur das Gef├╝hl, dass sie alle Symbole sind, und es sind wirklich ein paar verstreute Namen. Es f├╝hlt sich ein bisschen seltsam an. Der Unterschied ist, dass ich wusste, dass es zuerst ein Symbol war und dann wusste ich, um welchen Typ es sich handelt. Jetzt kenne ich zuerst den Typ, dann wei├č ich, oh, es ist ein Symbol ~

@ avalanche1 Sie k├Ânnen sich das Ergebnis der Bundle-Analyse unter https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838 und die Gr├Â├če der Komponente Button ansehen lehnt deutlich ab

Gut zu wissen. Aber auf Ihren Screenshots gibt es keinen Hinweis auf die tats├Ąchliche Gr├Â├če, so dass ich weder best├Ątigen noch widerlegen kann.

Ich werde Form auf neue APIs migrieren, aber ich habe festgestellt, dass die Version von field-form instabil ist. Daher m├Âchte ich wissen, ob es in Zukunft zu ├änderungen an diesen Schnittstellen kommen wird.

@orzyyyy ,
und ver├Âffentlichen Sie die 4.0-alpha.x -Version f├╝r soziale und interne Freiwillige, um sie zu testen. Wenn keine negative R├╝ckmeldung von der Alpha-Version vorliegt, ist diese API die letzte bei Ver├Âffentlichung.

@ avalanche1 @ant-design/icons v4-alpha-Version unterst├╝tzt das Sch├╝tteln von B├Ąumen. Die Gr├Â├če des Bundles h├Ąngt also davon ab, wie viele Symbole Sie in Ihrem eigenen Projekt verwendet haben, ob Sie eine antd-Komponente verwenden, die Symbole intern importiert, oder ob Sie @ant-design/icons direkt, also konnte ich Ihre Besorgnis ├╝ber diesen Punkt vielleicht nicht verstehen.

Warum sprechen wir ├╝ber Symbole, als mein erster Beitrag ├╝ber Schaltfl├Ąchen, Kalender und andere Komponenten war? https://github.com/ant-design/ant-design/issues/9419

DatePicker Wert muss Moment sein, kann Moment entfernt werden? Wenn ich das von aktualisiere, muss ich in Moment konvertieren

F├╝r die moment ist hier meine ├ťberlegung. DatePicker verwendet standardm├Ą├čig immer noch moment da Kompatibilit├Ątsanforderungen bestehen, bietet jedoch die Factory-Funktion zum Erstellen mit anderen Datumsbibliotheken:

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

Ich dachte nur, willkommene Diskussion.

Jetzt ist die Zeit gekommen, moment.js loszuwerden!

  1. Moment.js wird aufgrund seiner komplexen OOP-API niemals baumsch├╝ttelnd sein . (Sie m├╝ssten es von Grund auf neu schreiben). Es ist ein enormer Aufwand f├╝r Antd und Benutzer.

  2. Ant Design v4 ist eine Hauptversion mit bahnbrechenden Änderungen. Jetzt ist die Zeit!

  3. Ich schlage vor , es nicht mit einer anderen Bibliothek zu ersetzen. Antd verwendet m├Âglicherweise intern etwas Kleines wie dayjs oder date-fns , sollte jedoch native Date Objekte oder Zeichenfolgen f├╝r seine Komponenten akzeptieren .

Jedes Mal, wenn Sie moment() anrufen, stirbt ein

:Hund:

@zombieJ m├Âchte wissen, wie sich die Tabellenkomponente entwickelt. Gibt es eine Vorschau-Version wie Form? Insgesamt h├Ątte ich fast Blut erbrochen

Enth├Ąlt die Alpha-Version bereits die neue Tabelle? Wenn ja, sollte die Vorschau-Website ein Beispiel daf├╝r enthalten?

Die Tabelle befindet sich in der Warteschlange. Derzeit arbeite ich an der virtuellen Liste.

Was ist mit der Unterst├╝tzung f├╝r gestylte Komponenten?

Form initialValues ÔÇőÔÇősetzen nicht moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

Ich hoffe, dass Form eine unkontrollierte Version bereitstellen kann, um das Leistungsproblem gro├čer Formulare wie Excel zu l├Âsen

Gibt es eine Chance, dass die Alpha-Dokumentation auf die regul├Ąre Ant-Dokumentationsseite verschoben wird?

Mein Arbeitgeber blockiert Netlify-Domains und ich gehe davon aus, dass dies auch andere tun k├Ânnten.

Gibt es einen konkreten Plan zur Unterst├╝tzung der Tastaturbedienung ├╝ber Men├╝ und Dropdown?

Gibt es eine Chance, dass die Alpha-Dokumentation auf die regul├Ąre Ant-Dokumentationsseite verschoben wird?

Mein Arbeitgeber blockiert Netlify-Domains und ich gehe davon aus, dass dies auch andere tun k├Ânnten.

Warum? lol

Es ist zu hoffen, dass die Tabellenkomponente der Tabellenkomponente des Elements ├Ąhnelt. Jede Spalte legt automatisch zuerst eine Breite fest. Es wird empfohlen, das Kopfzeichen der Tabelle in eine minimale Breite anstatt in eine Zeilen├Ąnderung zu ├Ąndern. Es wird gehofft, dass die Faltung erfolgt und Bildlauffunktionen k├Ânnen gleichzeitig verwendet werden. Es ist zu hoffen, dass die baumf├Ârmige Tabelle TreeSelect ├Ąhnelt, wenn mehrere Auswahlm├Âglichkeiten getroffen werden.

Ich hoffe, dass die Tabellenkomponente der Tabellenkomponente von Element ├Ąhneln kann. Jede Spalte legt automatisch zuerst eine Breite fest. Es wird empfohlen, das Tabellenkopfzeichen ohne Umbruch auf Mindestbreite zu ├Ąndern. Es besteht die Hoffnung, dass die Faltfunktion und die Bildlauffunktion gleichzeitig verwendet werden k├Ânnen. Kann TreeSelect ├Ąhnlich sein

Gibt es eine Chance, dass Sie mit v4 oder vielleicht v5 etwas gegen die Anpassung unternehmen? MaterialUI ist viel einfacher anzupassen, was es immer wieder zu einer Wahl f├╝r das Projekt macht, an dem ich arbeite, auch wenn ich AntD wirklich gerne verwenden w├╝rde, da es viel vollst├Ąndiger ist usw.
Bitte, bitte lassen Sie weniger fallen, um etwas Besseres f├╝r die Anpassung zu erhalten.

Nachdem eine Agentur unsere Antd-Web-App getestet hatte, stellten sie schwerwiegende Zug├Ąnglichkeitsfehler fest und wir erhielten die schlechteste Note. Bei der Untersuchung der Hauptgr├╝nde l├Ąuft es auf die folgenden RC-Komponenten hinaus:

  • rc-select (wir mussten durch Downshift ersetzen und oben Antd-Stile anwenden)
  • rc-tabs (siehe # 18798)
  • und vielleicht andere, die wir bisher nicht verwenden

Wie gro├č ist die Governance, die Antd gegen├╝ber RC-Komponenten hat, und k├Ânnte das Team dies rechtzeitig f├╝r die Version 4.0 beheben? Die Barrierefreiheit wird immer relativ benachteiligt sein, aber in Wahrheit wird es immer schwieriger, sie zu ignorieren, da Unternehmen gesetzlich verpflichtet sind, den Mitarbeitern / Kunden barrierefreie Apps zur Verf├╝gung zu stellen.

Sie k├Ânnen mich auf einige umfangreiche Tests mit Screenreadern und das Benchmarking mit Best Practices z├Ąhlen.

MaterialUI ist viel einfacher anzupassen

@ Murbanowicz k├Ânnten Sie

@abenhamdine Kein Problem!
In MUI gibt es ein ThemeProvider das Sie Ihre App einwickeln und das gesamte Thema nur anhand des JS-Objekts konfigurieren, das in TypeScript eingegeben wurde, damit es so sch├Ân ist, damit zu arbeiten.

In AntD m├╝ssen Sie zum Anpassen mit LESS oder SASS (mit einigen Plugins) herumspielen, damit Sie andere Deps usw. verwalten m├╝ssen. Sie m├╝ssen die Komponentenquelle durchsuchen, um eine Variable zu finden, die Sie f├╝r eine bestimmte Komponente usw. ├Ąndern m├Âchten.
Es gibt auch keine gute M├Âglichkeit, das Thema in der Laufzeit zu ├Ąndern, was mit MUI so einfach ist, indem Sie einfach das JS-Objekt wechseln, das einfach vom Server usw. bezogen werden kann.

Wenn Sie nach einer Anpassung von AntD und MUI suchen, finden Sie einfache Beispiele f├╝r MUI, da es nichts zu besprechen gibt, da es einfach ist. Wenn Sie jedoch nach AntD-Cusotmization googeln, finden Sie viele hackige L├Âsungen usw.

Ich liebe AntD f├╝r Komplettierungen und so viele gro├čartige Komponenten, aber die Anpassung ist wirklich schlecht und sollte aufgrund meiner Erfahrung und der Gespr├Ąche mit anderen Entwicklern einer der wichtigsten Punkte auf der Roadmap sein

@abenhamdine Kein Problem!
In MUI gibt es ein ThemeProvider das Sie Ihre App einwickeln und das gesamte Thema nur anhand des JS-Objekts konfigurieren, das in TypeScript eingegeben wurde, damit es so sch├Ân ist, damit zu arbeiten.

In AntD m├╝ssen Sie zum Anpassen mit LESS oder SASS (mit einigen Plugins) herumspielen, damit Sie andere Deps usw. verwalten m├╝ssen. Sie m├╝ssen die Komponentenquelle durchsuchen, um eine Variable zu finden, die Sie f├╝r eine bestimmte Komponente usw. ├Ąndern m├Âchten.
Es gibt auch keine gute M├Âglichkeit, das Thema in der Laufzeit zu ├Ąndern, was mit MUI so einfach ist, indem Sie einfach das JS-Objekt wechseln, das einfach vom Server usw. bezogen werden kann.

Wenn Sie nach einer Anpassung von AntD und MUI suchen, finden Sie einfache Beispiele f├╝r MUI, da es nichts zu besprechen gibt, da es einfach ist. Wenn Sie jedoch nach AntD-Cusotmization googeln, finden Sie viele hackige L├Âsungen usw.

Ich liebe AntD f├╝r Komplettierungen und so viele gro├čartige Komponenten, aber die Anpassung ist wirklich schlecht und sollte aufgrund meiner Erfahrung und der Gespr├Ąche mit anderen Entwicklern einer der wichtigsten Punkte auf der Roadmap sein

klare und pr├Ązise Erkl├Ąrung, danke!

@abenhamdine Kein Problem!
In MUI gibt es ein ThemeProvider das Sie Ihre App einwickeln und das gesamte Thema nur anhand des JS-Objekts konfigurieren, das in TypeScript eingegeben wurde, damit es so sch├Ân ist, damit zu arbeiten.

In AntD m├╝ssen Sie zum Anpassen mit LESS oder SASS (mit einigen Plugins) herumspielen, damit Sie andere Deps usw. verwalten m├╝ssen. Sie m├╝ssen die Komponentenquelle durchsuchen, um eine Variable zu finden, die Sie f├╝r eine bestimmte Komponente usw. ├Ąndern m├Âchten.
Es gibt auch keine gute M├Âglichkeit, das Thema in der Laufzeit zu ├Ąndern, was mit MUI so einfach ist, indem Sie einfach das JS-Objekt wechseln, das einfach vom Server usw. bezogen werden kann.

Wenn Sie nach einer Anpassung von AntD und MUI suchen, finden Sie einfache Beispiele f├╝r MUI, da es nichts zu besprechen gibt, da es einfach ist. Wenn Sie jedoch nach AntD-Cusotmization googeln, finden Sie viele hackige L├Âsungen usw.

Ich liebe AntD f├╝r Komplettierungen und so viele gro├čartige Komponenten, aber die Anpassung ist wirklich schlecht und sollte aufgrund meiner Erfahrung und der Gespr├Ąche mit anderen Entwicklern einer der wichtigsten Punkte auf der Roadmap sein

Ich stimme @murbanowicz zu, dass die Anpassung mit Antd etwas chaotisch werden kann (globaler Stilleck, hackige Art der Verwendung von Sass, Priorit├Ątskonflikte zwischen Stil├╝berschreibungen, ziemlich viele externe Abh├Ąngigkeiten wie moment was zu einer riesigen Bundle-Gr├Â├če f├╝hrt ), aber nachdem ich MUI schon lange verwendet habe, finde ich Antd viel anpassbarer.

Ich bin nicht auf dem neuesten Stand der neuen Versionen von MUI, aber als ich das letzte Mal nachgesehen habe, gab es einen Teil der Komponenten, die Sie nicht anpassen konnten, da MUI styled-components , wenn die Entwickler nicht classNames hinzugef├╝gt haben.
Theming ist cool f├╝r die direkte Nutzung einer Bibliothek, aber wenn Sie das Styling an Ihr Design-System anpassen m├Âchten, ist es mit MUI sehr chaotisch, manchmal sogar unm├Âglich;)

Trotzdem ben├Âtigt antd tats├Ąchlich einige Arbeit, um die Anpassungserfahrung zu vereinfachen;)

@filipjnc ,
rc-select ver├Âffentlichte Alpha-Version, die die Zug├Ąnglichkeit verbessert. Sie k├Ânnen helfen, dies zu testen. Und v4 prepare branch hat es verwendet. Sie k├Ânnen die Vorschau oben sehen.
F├╝r rc-tabs werde ich es auch verbessern, aber sp├Ąter, da es nicht die oberste Priorit├Ąt hat.

@zombieJ in Ordnung, ich werde mir rc-select alpha ansehen.

Auch wenn rc-tabs keine Priorit├Ąt hat, k├Ânnen Sie sich bitte meine Pull-Anfrage ansehen, in der ich die kritischsten Punkte aus unseren Zug├Ąnglichkeitstestergebnissen behebe.

Ich habe hier ein Problem. Nach der aktuellen Icon-Reform-Methode, wenn es antd Komponentenform und Icon gibt
Kann nur einer der Aliase angegeben werden, wenn das Formular gleichzeitig eingef├╝hrt wird

Ich w├╝rde mir sehr w├╝nschen, dass das Problem mit dem st├Ąndigen Rendern von

Bitte beachten Sie, dass unter https://next.ant.design Komponenten in der Seitenleiste der Komponenten nicht alphabetisch sortiert sind
Schermata 2019-09-30 alle 18 01 03

Wie Sie vielleicht wissen, ist Ant-Design in Bezug auf die Zug├Ąnglichkeit nicht wirklich gut. Dies ist f├╝r die Mehrheit der Menschen an der Oberfl├Ąche nicht allzu sichtbar, aber ein gro├čes Problem, wenn Sie tiefer tauchen. Sehen Sie hier, wie schlecht Ant-Design abschneidet: https://darekkay.com/blog/accessible-ui-frameworks/

Die gute Nachricht ist, dass ich Ameisendesign sehr liebe und es f├╝r Unternehmensprojekte weiter verwenden m├Âchte. Mein Ziel ist es, es an die Spitze der Liste zu bringen.

Ich habe eine Agentur eine meiner Unternehmensanwendungen f├╝r einen Kunden in Deutschland testen lassen (wo Barrierefreiheit in gro├čen Unternehmen ein gro├čes Thema ist). Die kritischsten Dinge waren:

  1. Zug├Ąnglichkeit des Bildschirmleseger├Ąts f├╝r grundlegende, aber wichtige Komponenten wie Select, Autocomplete und Tabs
  2. Farbkontraste an vielen Stellen
  3. Tastaturnavigation an einigen Stellen

Ich habe zuerst rc-tabs , um alle Probleme mit der Barrierefreiheit zu beheben. Es sollte bald ver├Âffentlicht werden (https://github.com/react-component/tabs/pull/218). Aber was mich am meisten beunruhigt, ist rc-select , insbesondere der Combobox-Teil (Autocomplete). Comboboxen sind einer der schwierigsten Aspekte der Zug├Ąnglichkeit von Bildschirmleseprogrammen, und es ist leicht, Fehler zu machen. Um alle Probleme zu beheben, sind nicht nur einige ├änderungen an den Arieneigenschaften erforderlich, sondern auch eine umfassende ├ťberarbeitung.

Um das Problem in meiner Anwendung vor der Inbetriebnahme schnell zu beheben, habe ich Select und AutoComplete ( rc-select ) von ant-design durch meine eigenen Komponenten ersetzt, die auf https://github.com/downshift-js/downshift basieren

Die provokative Frage lautet also: W├╝rden Sie in Betracht ziehen, nicht die Doppelarbeit zu machen und rc-select zugunsten der popul├Ąreren und vollst├Ąndigeren downshift Bibliothek zu verwerfen? Sie k├Ânnten Zeit im Team sparen und sich darauf konzentrieren, die anderen Kernkomponenten zu perfektionieren, die auf dem Open-Source-Markt keine guten Alternativen bieten.

Diese Idee sieht f├╝r mich fantastisch aus @filipjnc . Beim Herunterschalten ist es 1/4 der Gr├Â├če von rc-select. Ich hoffe, das Antd-Team kann das schaffen.

Ich w├╝rde gerne mehr Farbverbesserungen in der Version 4.0 sehen. In den Dokumenten wird insbesondere eine ÔÇ×Datenvisualisierungs-Farbpalette (in K├╝rze verf├╝gbar)ÔÇť erw├Ąhnt, die in Dashboards und anderen datenintensiven Anwendungen sehr hilfreich w├Ąre. Warme und k├╝hle Graut├Âne w├╝rden auch dazu beitragen, zusammenh├Ąngendere Farbpaletten zu erstellen. Au├čerdem ist dies eine gute Gelegenheit, den Farbkontrast f├╝r die Barrierefreiheit festzulegen (wie von @filipjnc erw├Ąhnt). Mach weiter so ­čĹŹ

Wie Sie vielleicht wissen, ist Ant-Design in Bezug auf die Zug├Ąnglichkeit nicht wirklich gut. Dies ist f├╝r die Mehrheit der Menschen an der Oberfl├Ąche nicht allzu sichtbar, aber ein gro├čes Problem, wenn Sie tiefer tauchen. Sehen Sie hier, wie schlecht Ant-Design abschneidet: https://darekkay.com/blog/accessible-ui-frameworks/

Die gute Nachricht ist, dass ich Ameisendesign sehr liebe und es f├╝r Unternehmensprojekte weiter verwenden m├Âchte. Mein Ziel ist es, es an die Spitze der Liste zu bringen.

Ich habe eine Agentur eine meiner Unternehmensanwendungen f├╝r einen Kunden in Deutschland testen lassen (wo Barrierefreiheit in gro├čen Unternehmen ein gro├čes Thema ist). Die kritischsten Dinge waren:

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

Ich habe zuerst rc-tabs als schnellen Gewinn ausgew├Ąhlt, um alle Probleme mit der Barrierefreiheit zu beheben - es sollte bald herauskommen ( Reaktionskomponente / Tabs # 218 ). Aber was mich am meisten beunruhigt, ist rc-select , insbesondere der Combobox-Teil (Autocomplete). Comboboxen sind einer der schwierigsten Aspekte der Zug├Ąnglichkeit von Bildschirmleseprogrammen, und es ist leicht, Fehler zu machen. Um alle Probleme zu beheben, sind nicht nur einige ├änderungen an den Arieneigenschaften erforderlich, sondern auch eine umfassende ├ťberarbeitung.

Um das Problem in meiner Anwendung vor der Inbetriebnahme schnell zu beheben, habe ich Select und AutoComplete ( rc-select ) von ant-design durch meine eigenen Komponenten ersetzt, die auf https://github.com/downshift-js/downshift basieren

Die provokative Frage lautet also: W├╝rden Sie in Betracht ziehen, nicht die Doppelarbeit zu machen und rc-select zugunsten der popul├Ąreren und vollst├Ąndigeren downshift Bibliothek zu verwerfen? Sie k├Ânnten Zeit im Team sparen und sich darauf konzentrieren, die anderen Kernkomponenten zu perfektionieren, die auf dem Open-Source-Markt keine guten Alternativen bieten.

Ich w├╝rde mich nicht so f├╝r das Herunterschalten begeistern, siehe https://github.com/downshift-js/downshift/issues/730
Die Barrierefreiheit ist f├╝r einige Benutzer wichtig, aber die Leistung ist f├╝r noch mehr Benutzer wichtig.

Die Tabelle befindet sich in der Warteschlange. Derzeit arbeite ich an der virtuellen Liste.

Hallo, @zombieJ
Gibt es Fortschritte in der Zusammenfassungsfu├čzeile?

@ alexchen1875 ,
In Erwartung einer neuen Aktualisierung des Lebenszykluscodes. Tabelle ist die n├Ąchste nach getan :)

4.0 K├Ânnen einige Requisitenparameter in Kamelkoffer ge├Ąndert werden? Zum Beispiel wird Input.TextArea in autosize in autoSize ge├Ąndert?
Die Requisiten nativer HTML-Tags in React sind alle Kamel-Gro├č- und Kleinschreibung, wie z. B. <input autoComplete /> . Diese autosize immer nicht ├╝bereinstimmend aus. . .

Es kann in 3.x ge├Ąndert werden, kompatibel mit der urspr├╝nglichen Verwendung und diese verwerfen. @ jinliming2 Interessieren Sie sich f├╝r eine PR?

  • 4.0 Warum sollten Sie die props.children von Tree als veraltete API markieren und stattdessen die reine Datenmethode von treeData empfehlen? Ich bin der Meinung, dass props.children sehr n├╝tzlich und sehr spielbar ist
  • ComponentWillReceiveProps wurde in der letzten API von react als veraltet markiert. Derzeit wird festgestellt, dass die Tabellenkomponente und die Animate-Komponente w├Ąhrend des Versuchs noch vorhanden sind.

+1 f├╝r Barrierefreiheit. Bitte!

In Bezug auf die Gr├Â├če des L├Âschsymbols scheint das Symbol anderer Komponenten 12 Pixel und der Datumsauswahl 14 Pixel gro├č zu sein. Wird der Unterschied zwischen der Gr├Â├če anderer Komponenten und dem Suffixsymbol ber├╝cksichtigt, oder liegt es daran, dass der Datumsauswahl der Symbolschalter ist und 14 Pixel betr├Ągt?Haben Sie Pl├Ąne, die Gr├Â├če zu vereinheitlichen?

@zombieJ plant, eine mehrspaltige Sortierfunktion f├╝r Tabellen hinzuzuf├╝gen

Bitte schreiben Sie auf Englisch

Wird das Problem einer zu gro├čen Momentgr├Â├če behoben?

Wird das Problem einer zu gro├čen Momentgr├Â├če behoben?

Versuchen Sie zuerst, dayjs zu verwenden

Kann es auf Englisch sein? In Anbetracht der Gef├╝hle von Ausl├Ąndern google ich immer google translate. Es ist nicht wichtig, dass die Grammatik nicht Standard ist, die W├Ârter k├Ânnen von ihnen verstanden werden

@ afc163
Haben Sie gedacht, dass Ausl├Ąnder diesem Repo folgen? Leider ist Google Translate kein gutes Tool, um zu verstehen, was Sie sagen. Mir ist klar, dass die meisten Entwickler und Benutzer von Ant-Design Chinesen sind, aber betrachten Sie auch Nicht-Chinesen?
Deshalb fordere ich Sie dringend auf, die internationale Sprache zu verwenden, um uns alle zu respektieren.

Hallo,
Ich wollte Ant Design 4.0 mit Create-React-App und Typescript ausprobieren.
Ich habe die Anweisungen unter https://next.ant.design/docs/react/introduce befolgt, kann aber keine funktionierende App erhalten.
Die folgenden grundlegenden Anweisungen ( import Button from 'antd/es/button'; ) f├╝r die Create-React-App verursachen Fehler:

Modul antd / es / button kann nicht gefunden werden

Nach dem Hinzufügen von React-App-Rewired, Customize-Cra, Babel-Plugin-Import und Ändern des Imports in import {Button} from 'antd' eine Fehlermeldung angezeigt:

Es konnte keine Deklarationsdatei f├╝r das Modul 'antd' gefunden werden.

K├Ânnen Sie mir bitte einen Rat geben, wie Antd4 mit Crea-React-App und Typoskript funktioniert?

@gynekolog ,
Bitte ├╝berpr├╝fen Sie, ob node_modules korrekt installiert ist.

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

@lvlohammadi Leider

@gynekolog ,
Bitte ├╝berpr├╝fen Sie, ob node_modules korrekt installiert ist.

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

Du hast recht. ich renne

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

stattdessen

yarn add "[email protected]"

Schande...
Vielen Dank.

dropdownMatchSelectWidth on Komponentenbruch in Alpha-Version ausw├Ąhlen, g├╝ltig in der vorherigen Version

Wenn ich ein neues Projekt mit antd starten m├Âchte, w├╝rden Sie Version 3 oder 4 Alpha w├Ąhlen? Wie "produktionsbereit" ist die Version 4? Streben Sie immer noch eine Ver├Âffentlichung im vierten Quartal an?

Wenn ich ein neues Projekt mit antd starten m├Âchte, w├╝rden Sie Version 3 oder 4 Alpha w├Ąhlen? Wie "produktionsbereit" ist die Version 4? Streben Sie immer noch eine Ver├Âffentlichung im vierten Quartal an?

Antd 4 ist noch nicht produktionsbereit. Sie sollten mit Antd 3 beginnen, der ├ťbergang sollte einfach sein (insbesondere wenn Codemods wie erwartet bereitgestellt werden).

Ich hoffe, eine vollst├Ąndige Trennung zwischen Logik und Anzeige zu sehen, das hei├čt, abgesehen von der Manipulation von Klassennamen macht js nichts anderes mit der Ansicht. Das visuelle Erscheinungsbild sollte alle von CSS (WENIGER) behandelt werden. Verwenden Sie anstelle von React Components m├Âglicherweise auch Web Components, damit Nicht-React-Entwickler diese einfacher verwenden k├Ânnen.

Ich hoffe, eine vollst├Ąndige Trennung zwischen Logik und Anzeige zu sehen, das hei├čt, abgesehen von der Manipulation von Klassennamen macht js nichts anderes mit der Ansicht. Das visuelle Erscheinungsbild sollte alle von CSS (WENIGER) behandelt werden. Verwenden Sie anstelle von React Components m├Âglicherweise auch Web Components, damit Nicht-React-Entwickler diese einfacher verwenden k├Ânnen.

Ich denke, diese Idee, alles zu reinigen, ist sinnlos. Es ist besser, sich auf etwas Wichtigeres zu konzentrieren.

Gibt es Pl├Ąne f├╝r die Mehrfachauswahl in AutoComplete wie https://react-select.com?

Ich hoffe, eine vollst├Ąndige Trennung zwischen Logik und Anzeige zu sehen, das hei├čt, abgesehen von der Manipulation von Klassennamen macht js nichts anderes mit der Ansicht. Das visuelle Erscheinungsbild sollte alle von CSS (WENIGER) behandelt werden. Verwenden Sie anstelle von React Components m├Âglicherweise auch Web Components, damit Nicht-React-Entwickler diese einfacher verwenden k├Ânnen.

Ich denke, diese Idee, alles zu reinigen, ist sinnlos. Es ist besser, sich auf etwas Wichtigeres zu konzentrieren.

Ich glaube nicht, dass es dringlicher ist als die Trennung. In einem Team wird CSS im Allgemeinen von Designern verwaltet, w├Ąhrend JS normalerweise von Programmierern ausgef├╝hrt wird. Wenn beide den Stil manipulieren, f├╝hrt dies zu Chaos und unn├Âtig verlorener Entwicklungszeit.

Nehmen wir zum Beispiel das Men├╝. Die Standardbreite und -h├Âhe werden von JS festgelegt. Das Problem ist, dass das Men├╝ entweder hervorsteht oder L├╝cken aufweist, wenn jemand die Breite oder H├Âhe des Outter-Wrappers ├Ąndern m├Âchte. Dies w├╝rde erfordern, dass sowohl der Designer als auch der Codierer das Problem beheben, was Ausfallzeiten bedeutet.

Als Komponenten ist der Code nicht allzu komplex, die Trennung sollte nicht zu aufw├Ąndig sein, aber das Ergebnis w├╝rde den Benutzern und dem ant.design-Team selbst das Leben erheblich erleichtern.

Ein weiteres kleines Problem ist, dass Icon standardm├Ą├čig 16px und nicht 14px verwenden muss. Dies ist die globale Standardschriftgr├Â├če. Dies bedeutet, dass Icon Variablen wie @ default-icon-size, @ icon-size-lg usw. verwenden sollte, die vom Text getrennt sind. Dies ist nicht wirklich ein Fehler, sondern eine verlorene Funktion.

@ afc163
Haben Sie gedacht, dass Ausl├Ąnder diesem Repo folgen? Leider ist Google Translate kein gutes Tool, um zu verstehen, was Sie sagen. Mir ist klar, dass die meisten Entwickler und Benutzer von Ant-Design Chinesen sind, aber betrachten Sie auch Nicht-Chinesen?
Deshalb fordere ich Sie dringend auf, die internationale Sprache zu verwenden, um uns alle zu respektieren.

Die Menschen haben das Recht, ihre eigene Sprache zu verwenden, und sollten sich dabei wohl f├╝hlen. So sehr ich die Bem├╝hungen respektiere, durch die Bereitstellung von ├ťbersetzungen das gr├Â├čtm├Âgliche Publikum einzubeziehen, sollte niemandem ein Vortrag gehalten werden, nur um die Sprache zu verwenden, mit der er sich am wohlsten f├╝hlt dass der Betreuer versteht zu kommunizieren. Die Idee, dass Hauptakteure dieses Projekts ihre Muttersprache nicht verwenden sollten, um zu kommunizieren, dass eine andere Sprache ├╝berlegen ist, ist mehr als absurd. Es ist in Ordnung, nach ├ťbersetzungen zu fragen, aber mit Respekt. Antworten herabzustimmen, weil sie auf Chinesisch sind, ist sowohl kontraproduktiv als auch kindisch.

Leute, hat And Design Version 4.0 JSS anstelle von _Less_ zum Generieren von CSS?

Leute, hat And Design Version 4.0 JSS anstelle von _Less_ zum Generieren von CSS?

AFAIK, nein. Sie k├Ânnen jedoch versuchen, zus├Ątzlich zu weniger auch gestaltete Komponenten (zum Beispiel) zu verwenden.

Danke, lieber @ tomgao365 , ich erstelle das Problem, auf das Sie verwiesen haben. Ich m├Âchte eine gro├čartige PR f├╝r das vollst├Ąndige Entfernen von Less erstellen und stattdessen

Au├čerdem habe ich eine kleine Frage, lieber @abenhamdine , was ist Ihre Idee, JSS anstelle von Less zu verwenden?

Au├čerdem habe ich eine kleine Frage, lieber @abenhamdine , was ist Ihre Idee, JSS anstelle von Less zu verwenden?

Hauptvorteile meiner Meinung nach:

  • dynamisches Styling (Schmerzen mit weniger)
  • Autocompletion (nicht sicher, h├Ąngt davon ab, welches Tool / welche JSS-Bibliothek Sie verwenden)
  • Vererbung von Stilen

einen Versuch wert.
Aber es ist keine Silberkugel.

Lieber @abenhamdine , ich hinterlasse ein Problem, das das Abzeichen Discussion . Es ist # 19181.

Und ich m├Âchte mit der Implementierung von JSS beginnen und Less weglassen, aber eine neue Version kommt und ich bef├╝rchte, dass alle meine Bem├╝hungen verschwendet werden.

Ich freue mich ├╝ber eine Diskussion ├╝ber das Ersetzen von moment.js durch eine Alternative wie Day.js oder das native Date Object hier https://github.com/ant-design/ant-design/issues/19738

Wird es in Version 4 eine einfachere M├Âglichkeit geben, die Farbthemen mit der Create-React-App zu ├Ąndern?

Ich stimme @flashtheman zu, dass es sch├Ân w├Ąre, das Thema zu ├╝berschreiben, ohne mit weniger Variablen arbeiten zu m├╝ssen - also so etwas wie ThemeProvider aus Emotionen: https://emotion.sh/docs/theming

In der jQuery-Ära sind Themeneinstellungen sehr beliebt und werden von Benutzern gerne verwendet.
Ich habe mehr als 2 Jahre auf eine einfache M├Âglichkeit gewartet, das Thema in der Produktionsumgebung zu ├Ąndern.

Wenn in der neuen Version der Symbolkomponente das Symbol dynamisch bestimmt wird, wie soll es in der neuen Version behandelt werden? Derzeit kann ich nur an die Verwendung von Zeichenfolgen "require + variable" denken. Es stellt sich heraus, dass nur das type-Attribut mit Variablen gef├╝llt werden muss. Gibt es eine andere M├Âglichkeit, damit umzugehen?
google translate: Wenn in der neuen Version der Symbolkomponente das Symbol dynamisch bestimmt wird, kann in der neuen Version vorerst nur an die Zeichenfolge require + variable gedacht werden, die das Original nur ausf├╝llen muss das Typattribut mit Variablen, welche anderen Verarbeitungsmethoden?

Wenn in der neuen Version der Symbolkomponente das Symbol dynamisch bestimmt wird, wie soll es in der neuen Version behandelt werden? Derzeit kann ich nur an die Verwendung von Zeichenfolgen "require + variable" denken. Es stellt sich heraus, dass nur das type-Attribut mit Variablen gef├╝llt werden muss. Gibt es eine andere M├Âglichkeit, damit umzugehen?
google translate: Wenn in der neuen Version der Symbolkomponente das Symbol dynamisch bestimmt wird, kann in der neuen Version vorerst nur an die Zeichenfolge require + variable gedacht werden, die das Original nur ausf├╝llen muss das Typattribut mit Variablen, welche anderen Verarbeitungsmethoden?

Versuchen Sie es mit https://github.com/smooth-code/loadable-components , die in der React-Dokumentation empfohlen werden

Wann wird die offizielle Version ver├Âffentlicht?

4.0 Unterst├╝tzt Table die Pivot-Funktion?

@ afc163 - Scheint, als ob die Verschmutzung des globalen Stils das

Gibt es Arbeiten zur Reduzierung der Komponentengr├Â├če?
Ausnahmsweise: Warum muss ich die gesamte Datei antd.css importieren, wenn ich ein einfaches Button m├Âchte?

Gibt es Arbeiten zur Reduzierung der Komponentengr├Â├če?
Ausnahmsweise: Warum muss ich die gesamte Datei antd.css importieren, wenn ich ein einfaches Button m├Âchte?

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

Verwenden Sie modularisierte Antd

F├╝r mich reicht eine Upload-Komponente nicht aus, um die Unterst├╝tzung f├╝r das Rendern benutzerdefinierter Listen zu unterst├╝tzen.
Dar├╝ber hinaus betr├Ągt der Upload-Fortschritt nur einen Prozentsatz, und es ist nicht bequem, ihn zu erweitern, um die Echtzeit-Geschwindigkeitsanzeige zu unterst├╝tzen.

@ banxi1988

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

Wenn Sie eine Geschwindigkeitsanzeige w├╝nschen, hat onChange den Prozentsatz der hochgeladenen Datei zur├╝ckgegeben. Sie k├Ânnen die Upload-Geschwindigkeit berechnen.

@ Z3SA https://caniuse.com/#search = CSS% 20Variables. Dies muss die gesamte IE-Unterst├╝tzung beenden. Die Beendigung der IE11-Unterst├╝tzung ist zu radikal, obwohl ich dies auch unterst├╝tze.

Sie k├Ânnen dies immer noch mit Fallback-Unterst├╝tzung tun. Beispiel: color: var(--red, @red); Ein einfaches globales Suchen / Ersetzen f├╝r alle aktuellen Variablen w├╝rde dies l├Âsen.

Wird LESS zugunsten von SASS oder einer anderen besseren Styling-L├Âsung f├╝r v4 in Betracht gezogen oder nicht?

@murbanowicz , Hallo, danke f├╝r Ihren Kommentar. Ich hinterlasse ein Problem mit der Verwendung von JSS anstelle von Less Hier zeige ich meine Bereitschaft f├╝r diese Migration, aber niemand zeigt Aktionen.

Hallo @zombieJ , danke f├╝r deine gro├čartige Arbeit an Ant Design? Gibt es Pl├Ąne, eine sofort einsatzbereite M├Âglichkeit zum Umschalten des dunklen Themas in der Anwendung bereitzustellen?

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

@ Shengliangli glaubt, dass die Kopplung zu stark ist. . .

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

@ Shengliangli glaubt, dass die Kopplung zu stark ist. . .

Ich denke, Form.Item ist eine "zus├Ątzliche" Komponente, die von antd hinzugef├╝gt wurde, um die Datenbindungsfunktion der Form-Komponente zu realisieren. Es gibt Gr├╝nde f├╝r diese Implementierung, aber schlie├člich wird eine zus├Ątzliche Sache hinzugef├╝gt. So wie jeder das Problem von zu viel modularem Code in Redux kritisiert, m├Âgen Entwickler diese Art des Schreibens m├Âglicherweise nicht. Wenn die von form.item implementierte Datenbindungsfunktion als die Merkmale von Eingabekomponenten wie Eingabe verstanden werden kann, um die F├Ąhigkeit von Eingabekomponenten zu verbessern, f├╝hlt sie sich nat├╝rlicher an?

Ich habe auch ├╝ber das Problem der Kopplung nachgedacht. Die Wurzel des Problems k├Ânnte darin liegen, wie wir die F├Ąhigkeiten und Verhaltensmerkmale von Eingabekomponenten definieren.

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

@ Shengliangli glaubt, dass die Kopplung zu stark ist. . .

Ich denke, Form.Item ist eine "zus├Ątzliche" Komponente, die von antd hinzugef├╝gt wurde, um die Datenbindungsfunktion der Form-Komponente zu realisieren. Es gibt Gr├╝nde f├╝r diese Implementierung, aber schlie├člich wird eine zus├Ątzliche Sache hinzugef├╝gt. So wie jeder das Problem von zu viel modularem Code in Redux kritisiert, m├Âgen Entwickler diese Art des Schreibens m├Âglicherweise nicht. Wenn die von form.item implementierte Datenbindungsfunktion als die Merkmale von Eingabekomponenten wie Eingabe verstanden werden kann, um die F├Ąhigkeit von Eingabekomponenten zu verbessern, f├╝hlt sie sich nat├╝rlicher an?

Ich habe auch ├╝ber das Problem der Kopplung nachgedacht. Die Wurzel des Problems k├Ânnte darin liegen, wie wir die F├Ąhigkeiten und Verhaltensmerkmale von Eingabekomponenten definieren.

Ich stimme dem nicht besonders zu. Ich denke, Form.Item ist haupts├Ąchlich ein externes Paket einer Komponente, wie Attribute wie Beschriftung und Spalte, die wirklich nicht f├╝r die Inline-Integration in Komponenten geeignet sind.

Hallo @zombieJ
M├Âchten Sie wissen, wann Version 4 ver├Âffentlicht wird?
Ich freue mich darauf, wieder zu h├Âren

Wie trage ich auch zum Design bei?
Ich freue mich von jemandem zu h├Âren

Die Beta.0-Version ist verf├╝gbar. Bedeutet dies, dass Sie sie verwenden k├Ânnen?

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

Zuallererst muss man wissen, dass es nichts damit zu tun hat, ob es eingebaut ist oder nicht. Die Verwendung von sogenannten eingebauten Komponenten kann als Unfall bezeichnet werden
getFieldDecorator ist die Br├╝cke, die die Formularkomponente und die Eingabekomponente verbindet. Form.item wird an die beiden Attribute value und onChange , und die ├╝bergebene Komponente ├╝bergibt dann value und onChange Diese beiden Schnittstellenmethoden interagieren mit der Au├čenwelt. Mit anderen Worten, jede Komponente kann zu einem Parameter von getFieldDecorator werden, solange value und onChange implementiert sind.Dies ist die typische Idee von program to interface

PS: Ich habe den Quellcode nicht gelesen, alles oben Genannte ist meine Vermutung nach dem Lesen des Dokuments

Der Grund, warum Form.Item mit dem zugrunde liegenden Component interagieren kann, hat nichts mit einem eingebauten Mechanismus zu tun, wie jemand erwartet. Es ist nur ein g├Ąngiger Trick in der Programmierwelt, der program to interface

Grunds├Ątzlich stimmen die Form -Komponente und die zugrunde liegende Komponente ├╝ber so etwas wie value und onChange ├╝berein. Sie dienen als Schnittstelle zwischen den beiden Welten, um zu kommunizieren. Es ist ein gutes Design zum Zwecke der Entkopplung

@dancerphil Vielleicht k├Ânnen Sie die Idee in der offiziellen Dokumentation genauer

Hallo zusammen, v4 beta ist ver├Âffentlicht. Die API ist jetzt stabil, was bedeutet, dass keine ├änderungen an der API vorgenommen werden, es sei denn, es ist ein kritisches Problem aufgetreten. W├Ąhrend der Beta-Version helfen Designer bei der weiteren Anpassung des visuellen Designs der Benutzeroberfl├Ąche und wir konzentrieren uns auf die Fehlerbehebung. Sie k├Ânnen es gerne versuchen auf und helfen Sie uns f├╝r Feuerwanze oder Feedback.

Vielen Dank f├╝r alle, die am Codieren und Ausprobieren teilnehmen. Ihre Hilfe bedeutet viel :)


Hallo allerseits, die Beta-Version wurde ver├Âffentlicht. Wenn die API keine gr├Â├čeren Designprobleme aufweist, werden keine weiteren ├änderungen vorgenommen. In der Beta-Version helfen Designer bei der Anpassung des UI-Stils von Version 4, und wir konzentrieren uns auf Fehlerbehebungen. Willkommen, um uns bei der Suche nach Fehlern oder anderen R├╝ckmeldungen zu helfen.

Vielen Dank f├╝r Ihre Teilnahme an der Entwicklungs- und Testarbeit. Ihre Hilfe ist sehr sinnvoll :)


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

Wie trage ich auch zum Design bei?
Ich freue mich von jemandem zu h├Âren

@ ekeminimarkk001 finden Sie m├Âglicherweise unter: https://ant.design/docs/react/contributing

@zombieJ Wurden alle in der Ausgabe aufgeführten Änderungen in der Beta-Version implementiert?

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

Zuallererst muss man wissen, dass es nichts damit zu tun hat, ob es eingebaut ist oder nicht. Die Verwendung von sogenannten eingebauten Komponenten kann als Unfall bezeichnet werden
getFieldDecorator ist die Br├╝cke, die die Formularkomponente und die Eingabekomponente verbindet. Form.item wird an die beiden Attribute value und onChange , und die ├╝bergebene Komponente ├╝bergibt dann value und onChange Diese beiden Schnittstellenmethoden interagieren mit der Au├čenwelt. Mit anderen Worten, jede Komponente kann zu einem Parameter von getFieldDecorator werden, solange value und onChange implementiert sind.Dies ist die typische Idee von program to interface

PS: Ich habe den Quellcode nicht gelesen, alles oben Genannte ist meine Vermutung nach dem Lesen des Dokuments

Nachdem ich Ihre Antworten gelesen habe, muss ich sagen, dass mein Vorschlag f├╝r die Formularkomponente von antd nicht zu ausgereift ist, aber andererseits denkt dieser Vorschlag vollst├Ąndig ├╝ber das Problem aus der Sicht eines normalen Benutzers nach. Wie kann es f├╝r eine Komponente mit einer so hohen Nutzungsintensit├Ąt bequemer sein, zu entwickeln und zu verwenden, weniger Code zu schreiben und klarere und nat├╝rlichere Ausdr├╝cke zu verwenden?

Aus Sicht des Benutzers ist antd bereits sehr gut. Die meisten Komponenten k├Ânnen verwendet werden, sobald sie verwendet werden. Vergessen Sie sie, wenn sie aufgebraucht sind, und verwenden Sie sie, wenn Sie sie das n├Ąchste Mal verwenden m├Âchten. Der Grund, warum dieser Effekt erzielt werden kann, ist untrennbar mit dem guten API-Design und der Verpackung der Komponenten verbunden. F├╝r einige Komponenten (z. B. from, table) gibt es jedoch noch Anwendungsszenarien, und es gibt Raum f├╝r bessere Verbesserungen.

Antd ist nur eine Werkzeugkomponente im Projekt. Es ist am besten, keinen eigenen Implementierungsmechanismus bereitzustellen oder den Implementierungsmechanismus in der externen API geschickt zu verbergen und zu assimilieren. Benutzer m├Âchten diese Komponente nur verwenden, sie in der bequemsten und nat├╝rlichsten Form verwenden und kein Experte f├╝r eine Werkzeugkomponente sein.

Zur├╝ck zur Formularkomponente: Unter der aktuellen 3.x-API bin ich eher bereit, Ali-basiertes UFORM zu verwenden. Im Vergleich zu Antds Formular muss UFORM weniger Code schreiben und ist produktiver. Nat├╝rlich f├╝hlt sich uform eher wie eine deklarative Schreibweise an, die sich stark von der Form von antd unterscheidet und m├Âglicherweise nicht viel Wert als Referenz hat.

Als Antd-Party ist es ein bisschen peinlich, so viele Anforderungen zu stellen, aber aus Liebe hoffe ich, dass es besser ist, ich hoffe, das Projektteam versteht es und ich hoffe, die Entwicklung und Nutzung der Komponente unter der entsprechenden Version weiter zu optimieren .

Sehr eigenartig. Ich habe Icon ├╝berhaupt nicht verwendet, aber ich habe alle Icons-SVG darin gepackt.
webpack-bundle-analyzer.png
Versionsnummer: 4.0.0-beta.0. Babel-Plugin-Import und Tree-Shaking werden verwendet, sind aber nutzlos.

Sehr eigenartig. Ich habe Icon ├╝berhaupt nicht verwendet, aber ich habe alle Icons-SVG darin gepackt.
webpack-bundle-analyzer.png
Versionsnummer: 4.0.0-beta.0. Babel-Plugin-Import und Tree-Shaking werden verwendet, sind aber nutzlos.

Verwenden Sie diese Konfiguration

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

Sehr eigenartig. Ich habe Icon ├╝berhaupt nicht verwendet, aber ich habe alle Icons-SVG darin gepackt.
webpack-bundle-analyzer.png
Versionsnummer: 4.0.0-beta.0. Babel-Plugin-Import und Tree-Shaking werden verwendet, sind aber nutzlos.

Verwenden Sie diese Konfiguration

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

Vielen Dank f├╝r Ihre Antwort, aber ich habe nicht gem├Ą├č Ihrer Konfiguration gearbeitet.

Version: 4.0.0-beta.0
Problem: Wenn die sichtbare Modal-Komponente umgeschaltet wird, wird die Seite verschoben und die Adresse wiedergegeben:

@xiaoxintang Es ist in der Hauptniederlassung behoben und wartet auf die Zusammenf├╝hrung.

@ afc163 Wie installiere ich antd4.0 beta

@ afc163 Wie installiere ich antd4.0 beta

npm install [email protected]
ODER
yarn add [email protected]

Es scheint, dass die Vorschau-Site kaputt ist. Ich erhalte nur den Fehler Seite nicht gefunden .

Ein Vorschlag zur Formularkomponente:
Ich freue mich sehr, dass in der neuen Version 4.0 die Formularkomponente f├╝r Entwickler freundlicher ist. Ich habe ein neues Beispiel gesehen, die Form.Item-Komponente unter der Form-Komponente muss getFieldDecorator nicht mehr verwenden. Dies ist eine sehr gute Verbesserung, aber ich habe einen radikaleren Vorschlag: Entfernen Sie die Form.Item-Komponente, optimieren Sie die Code-Schreiberfahrung weiter und aktualisieren Sie die Codierung. Die urspr├╝nglichen Funktionen der Form.Item-Komponente werden direkt auf bestimmte Eingabekomponenten (wie Eingabe, DataPick usw.) ├╝bertragen.
Dies ist zu ber├╝cksichtigen, dass in den meisten F├Ąllen in den entwickelten Formularen die integrierten Eingabekomponenten von antd verwendet werden, mit denen die Funktion der Form.Item-Komponente durch Verbesserung der Funktionen der Eingabekomponenten realisiert werden kann, und f├╝r einige spezielle F├Ąlle (z. B. Benutzer) Definieren Sie Komponenten, bestimmte Eingabekomponenten m├Âchten nicht an Form gebunden sein. Sie k├Ânnen spezielle Verpackungskomponenten f├╝r Anweisungen bereitstellen.
Die Forschung zu Antd ist nicht gr├╝ndlich und schl├Ągt nur Appellvorschl├Ąge aus der Sicht gew├Âhnlicher Benutzer vor. Wenn etwas nicht stimmt, wenden Sie sich bitte an Haihan.

Sie k├Ânnen dies versuchen: https://github.com/aweiu/ant-modifier

Gibt es Optimierungen f├╝r die globale Verschmutzung?

Gibt es Optimierungen f├╝r die globale Verschmutzung?

Antd scheint Pr├Ąfixe zu haben, es ist keine Verschmutzung.Ihr eigener Projekt-CSS-Code kann versuchen, CSS-Module zu verwenden, um das Problem der globalen Verschmutzung zu l├Âsen

Gibt es Optimierungen f├╝r die globale Verschmutzung?

Antd scheint Pr├Ąfixe zu haben, es ist keine Verschmutzung.Ihr eigener Projekt-CSS-Code kann versuchen, CSS-Module zu verwenden, um das Problem der globalen Verschmutzung zu l├Âsen

Nun, ich kenne dieses Pr├Ąfix. Ich meine die Verschmutzung des globalen CSS-Reset-Teils, das das Verschmutzungsproblem ist, das durch die Einf├╝hrung von Antd- und CSS-Reset in Legacy-Projekten verursacht wird.

Gibt es Optimierungen f├╝r die globale Verschmutzung?

Antd scheint Pr├Ąfixe zu haben, es ist keine Verschmutzung.Ihr eigener Projekt-CSS-Code kann versuchen, CSS-Module zu verwenden, um das Problem der globalen Verschmutzung zu l├Âsen

Weitere Informationen finden Sie in der Problemdiskussion auf dem offiziellen Website-Link: 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

Gibt es einen Plan zur Migration des Antd Pro 4.0-Layouts von Antd Pro 4.0?
Beim Migrieren des Projekts selbst bin ich auf den Fehler SiderMenu.js Icon.createFromIconfontCN im Pro-Layout gesto├čen. Da die Abh├Ąngigkeit im Pro-Layout immer noch die Version 3 ist, wei├č ich nicht, wie ich die Abh├Ąngigkeit ├Ąndern soll. Jemand, der es wei├č, wird es mir beibringen

Gibt es einen Plan zur Migration des Antd Pro 4.0-Layouts von Antd Pro 4.0?
Beim Migrieren des Projekts selbst bin ich auf den Fehler SiderMenu.js Icon.createFromIconfontCN im Pro-Layout gesto├čen. Da die Abh├Ąngigkeit im Pro-Layout immer noch die Version 3 ist, wei├č ich nicht, wie ich die Abh├Ąngigkeit ├Ąndern soll. Jemand, der es wei├č, wird es mir beibringen

Da das Symbol in 4.0 getrennt wurde, muss der Import ge├Ąndert werden. Sie k├Ânnen next.ant.design verwenden, um das aktuelle Symbol-API-Dokument anzuzeigen

Vielen Dank f├╝r Ihren Beitrag zur v4-Version. Schlie├čen seit Ver├Âffentlichung der Version 4.0.0-rc.0 : Ref. # 20661

Ist StrictMode ein Ziel? Legacy-Kontext muss migriert werden https://github.com/ant-design/ant-design/issues/9870

K├Ânnen wir sowohl antd3 als auch antd4 im Repo behalten? Kann sich nicht ├╝berall ├Ąndern, da das Repo zu gro├č ist und fast die gesamte Codebasis neu geschrieben wird.
Wenn ja, k├Ânnen wir Antd3-CSS in globalem und Antd4-CSS nur f├╝r einige Ordner und deren untergeordnete Elemente beibehalten

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen