Ant-design: 💥 Ant Design 4.0 قيد التقدم!

تم إنشاؤها على ٣١ مايو ٢٠١٩  ·  182تعليقات  ·  مصدر: ant-design/ant-design

معاينة الموقع

التالي


خلاصة

لقد مرت 16 شهرًا منذ ديسمبر 2017 عندما تم إصدار Ant Design 3.0. أصلحنا الكثير من الأخطاء وأضفنا الكثير من الميزات الجديدة ( سجل التغيير ) ضمن 4289 التزامًا و 138 إصدارًا و 7675 مشكلة و PRs ، والتي جلبت لنا 25375 نجمًا في GitHub. أصدرنا أيضًا Ant Design Pro 4.0 . دعم TypeScript ، والكتل ، وتجريد التخطيطات. نريد أن نشكر كل المساهمين ومساهمتك تجعل Ant Design أفضل وأفضل.

في الوقت نفسه ، أصدرنا Ant Design Pro 4.0. دعم TypeScript ، بلوك ويوفر مكون التخطيط.

في هذه اللحظة ، نفكر: حسنًا ، ما التالي؟ ماذا يمكننا أن نفعل لجعل Ant Design يذهب أبعد من ذلك؟ حان الوقت للتخطيط لـ Ant Design 4.0! 🍻

فيما يلي خطة تفصيلية حول 4.0. قد نقوم بتعديل بعضها لأنها لا تزال قيد التخطيط.

🌓 حول التوافق

سنزيل العناصر التي تم إيقاف العمل بها في الإصدار 4.0 ، مما يعني أنه لن يتم دعم العناصر التي تم إيقاف العمل بها. إذا لم تحصل على أي تحذير من الإصدار 3.x الأخير ، فستكون الترقية سهلة. خلاف ذلك ، ستكون هناك مرحلة صيانة نصف سنة لـ 3.0 بعد الإصدار 4.0.

نحن نعلم أنه من الصعب إجراء ترقيات. نحن نخطط لتوفير حزمة متوافقة للتعامل مع هذا:

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

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

ستكون هذه الحزمة متاحة حتى نهاية مرحلة الصيانة 3.x.

استخدم أحدث واجهة برمجة تطبيقات React

لقد قدمنا ​​دعم React 15 لفترة طويلة. لكن يبدو أنه ليس ضروريًا من التعليقات الاجتماعية (هناك ما يقرب من 0٪ من المشكلات حول React 15) ، نظرًا لأن React لديها توافق قوي. لدعم React 15 ، نستخدم واجهة برمجة تطبيقات جديدة بعناية فائقة. لن تكون هذه مشكلة بعد 4.0 بعد الآن:

  • يوفر Hooks api للمكونات ذات الصلة
  • دعم الوضع المتزامن (لا يزال التحضير ، سيستمر الضبط في 4.0)
  • احتضان التفاعل 17 (واو! ~)

أوقف دعم IE9 / 10

يبذل Ant Design 3.0 الكثير من الجهد لدعم IE القديم . ولكن وفقًا لإحصائيات الصناعة ، يقل استخدام IE9 / 10 مع ترقية Windows. سنتوقف عن دعم IE 9/10 في الإصدار 4.0 (لكننا ما زلنا ندعم IE 11) ، مما يعني أن دعم ميزة المتصفح الأحدث سيكون ممكنًا.

تحديث متوافق آخر

  • ترقية 2.x أقل إلى 3.x أقل
  • تعديل الرمز
  • أذكر مهملة

📦 تصغير الحجم

تحسين حجم الرمز

نستخدم رمز svg ( لماذا svg؟ ) بعد [email protected] . نستخدم اسم السلسلة لتعيين الرمز ، والذي لا يمكن تحميله عند الطلب. نقوم باستيراد جميع ملفات الأيقونة إلى antd مما يجعل حجم الحزمة كبيرًا . سنتعامل مع هذا في 4.0.

سيتم * إهمال * طريقة استخدام الرمز القديم:

import { Icon, Button } from 'antd';

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

سيتم استخدام استيراد رمز واحد بدلاً من ذلك في 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>
);

لا يزال بإمكانك استخدام الطريقة المتوافقة بالطريقة القديمة.

إزالة Draft.js

نحن نستخدم Draft.js في مكون Mention لتأكيد موقع النافذة المنبثقة ، ولكن يتم استخدام وظيفة جزء صغير منها فقط. يبدو أكثر من التكلفة. نخطط لإزالة Draft.js في الإصدار 4.0 ، واستخدام حلول خفيفة أخرى بدلاً من ذلك. في نفس الوقت ، للتمييز مع أصل الإشارة في 3.0 ، سيتم تقديم مكون جديد Mentions لتجنب تعارض api. كما أنه يدعم طريقة متوافقة :

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

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

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

🧭 تحسين الأداء

نحصل على عدد قليل من مشكلات الأداء لمجموعة البيانات الكبيرة من المجتمع. سنتأكد من إجراء بعض التحسين هنا.

التمرير الافتراضي

التمرير الافتراضي هو طريقة شائعة للقيام بتحسين الأداء. نحن نخطط لدعم هذا في الأصل في المكونات. قد لا ينتهي على الفور في الإصدار 4.0. سوف تدمج خطوة بخطوة.

إعادة بناء الرسوم المتحركة

لقد قمنا ببعض الاختراق باستخدام الرسوم المتحركة في الماضي. يعمل بشكل جيد في معظم الحالات. نخطط لاستخدام طريقة React نقية بدلاً من اختراق واحد. سيكون هذا التحديث في صمت ، ولن يؤثر عليك شيء.

🧩 المكونات الأمثل

لقد أضفنا العديد من المكونات في 3.0 ، وسنستمر في 4.0. ستأتي هذه المكونات من سيناريو الأعمال و Ant Design Pro والمتطلبات الاجتماعية. ستكون عملية المكونات الجديدة مماثلة لـ Ant Design 3.0 ، وسنضع ملف التصميم ذي الصلة في العلاقات العامة ونجمعه في الموقع الرسمي. حرر في كل نسخة ثانوية.

إلى جانب ذلك ، نخطط لإعادة بناء بعض المكونات الرئيسية لتسهيل استخدامها. تشمل ولكن ليس فقط:

شكل

النموذج هو أحد أكثر مكونات الاستخدام. نلاحظ أن مواقع التواصل الاجتماعي لديها العديد من التعليقات على تصميم واجهة برمجة التطبيقات.
نرغب في تبسيط واجهة برمجة التطبيقات في 4.0:

  • سيتضمن النموذج مخزن البيانات. لا حاجة لاستخدام Form.create() بعد الآن.
  • Fom.It سيشمل ربط الحقل. لا حاجة لاستخدام getFieldDecorator بعد الآن.
  • سيحتفظ Form.Item بالقيمة ، ولكن سيتم تعطيل أداة التحقق عند إزالة الحقل.
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>
  );
}

في العالم الحقيقي ، نلتقي بالكثير من الاتصالات بين النماذج (عادةً في التكوين التفصيلي). نريد أن نجعل الأمر أسهل:

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

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

إذا كنت تريد متابعة تقدم النموذج ، يمكنك أن ترى هنا .

الطاولة

في الماضي ، تلقينا الكثير من تعليقات الجدول . نحن نعلم أن دعائم التوسيع والتمرير لا تعمل بشكل جيد معًا. هذه المرة ، سنركز على إصلاحه. إلى جانب ذلك ، سنفعل الكثير في تحسين الجدول. وطريقة سهلة للقيام بالتخطيط :

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

نخطط أيضًا لإضافة تذييل الملخص لدعم صف الملخص.

منتقي التاريخ الجديد

منتقي التاريخ الحالي يلبي معظم المتطلبات. ولكن من المناقشة المجتمعية ، يمكننا حفرها أكثر. سوف نقدم منتقي سنة الراحة ومنتقي الحارس ( مناقشة ). وأيضًا ، سنقوم بتحديث نمط تصميم DatePicker لتحسين تجربة المستخدم.

🚀 استمر في التحديث

إلى جانب المحتوى أعلاه ، نخطط أيضًا للقيام ببعض التحديث المستمر. ستستمر هذه في التحديث في 4.0 لتعزيز التطوير وتجربة المستخدم.

🧶 تحسين إمكانية الوصول

يتمتع Ant Design 3.0 بدعم محدود لإمكانية الوصول ، فنحن نخطط لضبط بنية dom وإضافة المزيد من علامات الأغنية لتحسين تجربة قارئ الشاشة. إلى جانب ذلك ، نستعد أيضًا لتحسين تفاعل لوحة المفاتيح.

🎯 معيار API المطور

نجد أن بعض أنماط تسمية API مختلفة قليلاً عن الآخرين. إنها ليست مشكلة بالنسبة لمطور الأنواع ، ولكن يصعب تذكرها بخلاف ذلك.
وبالتالي ، سننشئ مستندًا قياسيًا للتسمية يتضمن واجهات برمجة التطبيقات الحالية وقواعد التسمية ذات الصلة. في الميزة الجديدة ، ستتبع قاعدة التسمية لتجنب تعارض تسمية API. أيضًا ، نرحب بآراء المجتمع حول هذا في العلاقات العامة.

💼 رد فعل الوضع الصارم

إذا حاولت التفاف مكون antd بـ <React.StrictMode> ، فسوف تحصل على تحذير. لقد قمنا بالفعل باستبدال بعض المكونات بطريقة دورة حياة جديدة. سيستمر هذا العمل في 4.0.

💡 تحسين تجربة المطور

في الماضي ، وجدنا أن بعض المشكلات تأتي بشكل متكرر. هذه القضايا هي بطريقة ما سؤال استخدام. نعتقد أنه يمكننا فعل شيء ما بشأن هذا (نبدأ بالفعل في 3.0). في بيئة التطوير ، سنحذر من حالة غير متوقعة (مثل إبطال كائن Moment ، تعديل البادئة / اللصق يسبب تغيير بنية dom ، إلخ). نعتقد أن وحدة التحكم هي المكان الأول للتركيز عند مواجهة المشكلة. يمكن أن يساعد تقديم النصائح المناسبة في العثور على المشكلة. في الوقت نفسه ، سنلخص الأسئلة الأخرى في الأسئلة الشائعة الخاصة بكل مستند مكون. من ناحية الصيانة ، لا يمكننا المساعدة في كل سؤال استخدام ، لكنها موجودة ، خاصة مع المطورين الجدد. الأسئلة الشائعة قد تساعد في توفير الكثير من وقت البحث. إذا كان لديك اهتمام بهذا ، فنحن نرحب بك للمساعدة في تحسين تجربة المطور معنا.

🐱 تصميم الموارد

Ant Design ليست مكتبة مكونة فقط. التصميم هو قوة الدعم. سنقوم بمزامنة تحديث مورد التصميم (حزمة مكون Sketch ، أدوات المطبخ ، Design Token ، إلخ.) سنقوم أيضًا بتعديل نمط المكون الحالي لتحسين تجربة المستخدم.

معالم

هذه هي خطتنا الرئيسية. سننشئ مشكلة ذات صلة على Github. ونرحب أيضًا بالمساهم الاجتماعي:

س 2

  • ضع علامة على واجهة برمجة التطبيقات ذات الصلة باعتبارها متوقفة وأزلها من المستند.
  • مكون منخفض المستوى يحذر من التحديث.

س 3

  • قم بإنشاء فرع antd 4.0 وقم بتحديث المستند.
  • تطوير المكونات.

س 4

  • الافراج عن Ant Design 4.0.

مرحبا بكم على متن

سنبقيك على اطلاع أثناء عملية التطوير. قد لا يكون المحتوى أعلاه نهائيًا. سيكون الفكر / النصيحة من المجتمع موضع ترحيب! لنجعل Ant Design 4.0 أفضل!


المقدمة

لقد مرت 16 شهرًا منذ إصدار Ant Design 3.0 في ديسمبر 2017. خلال هذه الفترة ، أصلحنا عددًا كبيرًا من الأخطاء وأضفنا عددًا كبيرًا من الميزات الجديدة ( سجل التحديث ). تم تقديم 4289 التزامًا ، وإصدار 138 إصدارًا ، وإغلاق 7675 إصدارًا و PRs ، وإضافة 25375 نجمة. أصدرنا أيضًا Ant Design Pro 4.0 . يدعم TypeScript ، ويمنع ، ويلخص التخطيط. نود أن نشكر جميع المتطوعين في المجتمع لتفانيكم في جعل Ant Design أكثر قابلية للاستخدام.

في الوقت نفسه ، نفكر أيضًا في الخطوة التالية وكيفية جعل Ant Design تذهب إلى أبعد من ذلك ، ونتوقع إطلاق إصدار Ant Design 4.0 في الربع الرابع من هذا العام . 🍻

فيما يلي خطة مفصلة لـ 4.0 ، بالطبع لا يزال هذا قيد التخطيط. قد تكون هناك تعديلات عندما يتم إصدارها رسميًا.

تعديل التوافق

سنقوم بإزالة السمات المميزة على أنها مهملة في 4.0. في ذلك الوقت لن تكون قادرًا على استخدام الطرق المهجورة. إذا قمت بترقية مشروعك إلى الإصدار 3.x الأخير ولم تشاهد رسالة التحذير من antd في وحدة التحكم ، فستكون الترقية إلى 4.0 أيضًا سلسة. بالنسبة للإصدار 3.x ، سنستمر في تنفيذ ستة أشهر إضافية من أعمال الصيانة بعد الإصدار 4.0.

نحن نعلم أن إصدار الترقية يحتوي على قدر كبير من الطاقة للتخلي عن واجهة برمجة التطبيقات القديمة. نخطط لتوفير حزمة متوافقة للمساعدة في انتقال المشروع عند إصدار 4.0 (لا تزال واجهة برمجة التطبيقات ذات الصلة قيد التصميم ، وقد تكون مختلفة عند إصدارها رسميًا):

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

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

ستظل حزمة التوافق محدثة أيضًا حتى تتوقف أعمال الصيانة 3.0.

استخدم أحدث إصدار من React API

لقد ظللنا ندعم إصدار React 15 لفترة طويلة ، ولكن من ملاحظات المجتمع ، فإن هذا ليس مهمًا في الواقع (رقم مشكلة React 15 يقترب من 0٪). لأن React نفسها لديها توافق قوي للغاية. من أجل دعم React 15 ، نحن حريصون جدًا على استخدام واجهات برمجة التطبيقات الجديدة أثناء عملية التطوير. بعد الإصدار 4.0 ، سنستخدم أحدث إصدار من React كمعيار للتطوير:

  • توفير إصدار الخطافات للمكونات ذات الصلة
  • دعم الوضع المتزامن (بالطبع ، هناك المزيد من الأشياء للتحضير ، وسيستمر تعديلها في الإصدار 4.0.)
  • احتضان التفاعل 17 (واو! ~)

أوقف دعم IE9 / 10

بذل Ant Design 3.0 الكثير من الجهود ليكون متوافقًا مع الإصدار القديم من IE . ومع ذلك ، وفقًا لإحصائيات الصناعة ، تتقلص الحصة العالمية والمحلية لمتصفح IE9 / 10 مع تحديث نظام Windows. في الإصدار 4.0 ، سنتوقف عن دعم IE 9/10 (لكننا سنواصل دعم IE 11). هذا يعني أيضًا أنه من الممكن دعم ميزات المتصفح الجديدة.

تعديلات التوافق الأخرى

  • قم بالترقية من 2.x أقل إلى 3.x أقل
  • تغيير استخدام الرمز
  • اذكر عفا عليها الزمن

📦 تقليل الحجم

تحسين حجم الرمز

في [email protected] ، قدمنا ​​رمز svg ( لماذا تستخدم أيقونة svg؟ ). يتم استخدام واجهة برمجة التطبيقات لتعيين الرموز مع تسمية السلسلة. في ظل هذا التصميم ، لا يمكننا التحميل عند الطلب ، لذلك قدمنا ​​جميع ملفات رمز svg ، مما يزيد بشكل كبير من حجم المنتج المعبأ. في 4.0 ، سنقوم بتعديل هذا لتحسين مستوى الصوت.

سوف الإصدار القديم من استخدام أيقونة يكون عفا عليها الزمن:

import { Icon, Button } from 'antd';

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

في الإصدار 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>
);

ستظل قادرًا على الاستمرار في استخدام الطريقة المتوافقة أعلاه.

إزالة Draft.js

قدمنا ​​Draft.js في مكوِّن الإشارة لتنفيذ وظيفة تحديد المواقع الفوري المنسدلة ، لكننا استخدمنا جزءًا صغيرًا فقط من وظيفتها. بالنظر إلى أداء التكلفة ، يبدو مضيعة بعض الشيء. نحن نخطط لإزالة الاعتماد عليه في 4.0 والتحول إلى حل أخف وزنًا. في الوقت نفسه ، من أجل التمييز بين مكونات Mention في 3.0 ، سنقدم إشارات مكون جديدة لمنع تعارضات API. وبالمثل ، فإنه يدعم أيضًا الاستخدام المستمر للطرق المتوافقة المذكورة أعلاه:

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

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

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

🧭 تحسين الأداء

أثناء عملية الصيانة ، تلقينا الكثير من مناقشات الأداء حول البيانات الضخمة. ولهذه الغاية ، نخطط أيضًا لتحسين الأداء.

التمرير الافتراضي

يعد التمرير الافتراضي طريقة تحسين شائعة ، ولكن نظرًا لتأثيرات الرسوم المتحركة في Ant Design ، ليس من السهل تخصيص التمرير الافتراضي. الآن ، نخطط لدعم التمرير الافتراضي في المكونات مع التمرير. بالطبع ، لا نضمن أن جميع المكونات قد تم تحديثها عند إصدار 4.0 ، وسيستمر تحديثها.

تحسينات الرسوم المتحركة

في الماضي ، استخدمنا بعض الاختراقات لمعالجة الرسوم المتحركة. في معظم السيناريوهات ، تعمل بشكل جيد. في 4.0 ، نخطط لتعديل هذا والتخلي عن نهج الاختراق إلى مسار أكثر تفاعلًا. سيتم تحديث التعديل بصمت ، ولن تحتاج إلى إجراء أي تغييرات عليه.

🧩 حول المكونات

في 3.0 ، واصلنا إضافة العديد من المكونات. في 4.0 ، سنواصل. سيتم تنقيح هذه المكونات من سيناريوهات أعمالنا ، و Ant Design Pro ، واحتياجات المجتمع. هذه عملية مستمرة. عملية إضافة مكونات جديدة هي نفس عملية Ant Design 3.0. سنقوم بإيداع مسودات التصميم الخاصة بالمكونات ذات الصلة وعرضها في العلاقات العامة وتحديثها بالموقع الرسمي. وبعد اكتمال التطوير ، سيتم إصدارها في الإصدار الثانوي الشهري.

بالإضافة إلى ذلك ، نحن نستعد أيضًا لإعادة بناء بعض المكونات الرئيسية لتحسين سهولة التطوير والتفاعل. وهي تشمل على سبيل المثال لا الحصر:

مكون النموذج

جمهور مكونات النموذج كبير جدًا. لقد لاحظنا أيضًا شكاوى المجتمع حول نموذج API المرهق. في 4.0 ، نأمل في استكشاف نماذج API أفضل لتبسيط تكاليف التطوير:

  • سيقوم النموذج بتجميع حقول بيانات النموذج افتراضيًا ، ولم تعد بحاجة إلى إنشاء سياق عبر Form.create() .
  • Fom.Item سيجمع حقول النموذج افتراضيًا ، ولست بحاجة إلى ربط الحقل عبر getFieldDecorator .
  • سيتم الاحتفاظ دائمًا بقيمة Form.Item ، لكن وظيفة التحقق من صحتها لن تصبح سارية المفعول إلا عندما يكون عنصر النموذج مرئيًا.
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>
  );
}

في المشهد الحقيقي ، واجهنا مشهد الارتباط متعدد الأشكال (شائع في التكوين التفصيلي). نحن نعلم أن هذا ليس مناسبًا للاستخدام ، لذلك سنوفر أيضًا وظيفة الربط بين النماذج:

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

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

إذا كنت تريد متابعة تقدم النموذج ، فمرحباً بك للتحقق من التقدم .

مكون الجدول

في الإصدار السابق ، تلقينا الكثير من التعليقات حول مكون الجدول . نحن نعلم أن خصائص التوسيع والتمرير في Table لم تعمل بشكل جيد في الماضي. هذه المرة سنركز على حل النزاعات في هذا المجال. بالإضافة إلى ذلك ، سنعمل على تحسين أداء مكون الجدول. واستكشف بعض طرق تخطيط الجدول الأبسط:

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

بالإضافة إلى ذلك ، نخطط أيضًا لإضافة تذييل ملخص لدعم متطلبات الملخص.

تمت إعادة تصميم منتقي التاريخ

لقد لبى منتقي التاريخ الموجود معظم الاحتياجات ، ولكن من مناقشة المجتمع . لا يزال لدينا فرصة للتعمق أكثر ، وسنكمل محددات السنة المتبقية ومحددات النطاق المقابلة ( مناقشة ). بالإضافة إلى ذلك ، سنقوم بتعديل نمط محددات التاريخ والوقت ذات الصلة لتقليل التكلفة المعرفية للمستخدمين.

🚀 التحديث المستمر

بالإضافة إلى المحتوى أعلاه ، نخطط أيضًا لمواصلة تحديث بعض المحتوى. ستتم متابعة ذلك في 4.0 لتحسين تطوير المستخدم وتجربة المستخدم بشكل أفضل.

🧶 تحسين تجربة الوصول

يفتقر Ant Design 3.0 إلى الدعم لتجربة إمكانية الوصول ، ولهذا السبب نخطط لتعديل بنية المكون وإضافة المزيد من علامات النغمات لتحسين تجربة قراءة الشاشة. بالإضافة إلى ذلك ، نحن نستعد أيضًا لتحسين طرق تفاعل لوحة المفاتيح الحالية لضمان تجربة تفاعل كاملة مع لوحة المفاتيح.

🎯 مواصفات API المطور

في سياق التطور ، وجدنا أن بعض أنماط واجهة برمجة التطبيقات تبدو غير متوافقة مع المكونات الأخرى. بالنسبة لمستخدمي TypeScript ، هذه ليست مشكلة ، ولكن بالنسبة للمستخدمين الآخرين ، يمكن أن تسبب مشاكل في الذاكرة.

لذلك ، سنقوم بتجميع وثيقة تسمية قياسية. سيحتوي المستند على قائمة بواجهات برمجة التطبيقات الحالية واصطلاحات التسمية المناسبة. عند إضافة ميزات جديدة ، سيتم تسميتها أيضًا وفقًا لهذه المواصفات. من أجل تجنب اختلافات API المحتملة في المستقبل. بالطبع ، نرحب أيضًا بالتعليقات من طلاب المجتمع في العلاقات العامة.

💼 رد فعل الوضع الصارم

إذا حاولت التفاف <React.StrictMode> خارج مكون antd ، فستتلقى الكثير من رسائل التحذير من مكون antd. لقد قمنا بتحديث طرق دورة الحياة لبعض المكونات في 3.0. في 4.0 ، سنواصل.

💡 تحسين تجربة المطور

في عملية الصيانة السابقة ، وجدنا أن بعض المشكلات ستظهر ذهابًا وإيابًا. هذه المشكلات شائعة في بعض مواصفات الاستخدام أو سيناريوهات التطبيق. تحقيقا لهذه الغاية ، قررنا إجراء تحسينات هنا (في الواقع ، منذ 3.0 ، ونحن نعمل على تحسين). في بيئة التطوير ، سنطالب في وحدة التحكم ببعض المواقف غير المتوقعة (مثل كائنات Moment غير الصالحة ، وتغييرات بنية Dom الناتجة عن الضبط الديناميكي لـ Input preffix / affix ، وما إلى ذلك). نحن مقتنعون بأن وحدة التحكم هي أول مكان يهتم به المطورون عند مواجهة مشكلة ، ويمكن أن يساعد تقديم النصائح المناسبة هنا في تحديد موقع المشكلة بسرعة. في نفس الوقت ، لبعض الاستخدامات الخاصة أو السيناريوهات. سنقدم الأسئلة الشائعة في وثائق المكون المقابلة. من منظور صيانة المشروع ، طاقتنا غير قادرة على تقديم إجابات مفصلة لمسألة الاستخدام. لكن هذه الأسئلة حقيقية ، خاصة للمطورين الجدد ، يمكن أن تساعد الأسئلة الشائعة في توفير الكثير من وقت البحث. إذا كنت مهتمًا ، فنحن نرحب أيضًا بالمتطوعين المجتمعيين للمساعدة في تحسين تجربة المطور.

🐱 تصميم إدارة الأصول

لا يعد Ant Design مجرد مجموعة من مكتبات المكونات ، ولكنه أيضًا نظام تصميم قوي وراءه. سنقوم بتحديث أحدث الأصول المتعلقة بالتصميم (حزمة مكون Sketch ومجموعة أدوات المطبخ و Design Token وما إلى ذلك) في 4.0 لتسهيل المصممين والطلاب المهتمين بالتصميم كمرجع. سيتم أيضًا ضبط أنماط تصميم المكونات الحالية لتحسين التأثيرات المرئية وتجربة المستخدم.

خطة زمنية

فيما يلي جدولنا الزمني ، حيث تستمر بعض تحديثات المكونات. سننشئ القضايا ذات الصلة على جيثب ونرحب بالمتطوعين المجتمعيين للمشاركة:

س 2

  • ضع علامة على واجهة برمجة التطبيقات (API) التي تم إهمالها على أنها مهملة وقم بمسحها في المستند.
  • المكونات الأساسية مسخنة مسبقًا.

س 3

  • إنشاء فرع antd 4.0 وتحديث الوثائق.
  • تطوير مكون منخفض المستوى.

س 4

  • الإصدار 4.0 الإصدار.

مرحبا بكم في المشاركة

أثناء عملية التطوير 4.0 ، يمكن تعديل المحتوى أعلاه. نرحب بطلاب المجتمع لتقديم أفكار واقتراحات قيمة ، دعونا نجعل Ant Design 4.0 أكثر ملاءمة وسهولة في الاستخدام!

4.x ✨ Announcement 🕙 Plan 🗣 Discussion

التعليق الأكثر فائدة

15311

هل سنستبدل Moment.js في الإصدار 4؟

ال 182 كومينتر

15311

هل سنستبدل Moment.js في الإصدار 4؟

رائع ، لا أطيق الانتظار حتى الترقية

تحضير ألفا V4

الهدف الرئيسي

  • [x] v4 فرع
  • [x] حزمة متوافقة
  • [x] إزالة المحتوى الموقوف

    • [x] اذكر المكون

    • [x] إشارات جديدة مكون رقم 16532

    • [x] Form.create

    • [x] رمز به type # 12011

    • [x] أخرى مع دعامات تحذير مهملة

  • [x] أقل v3
  • [x] الأداء

    • [x] ترقية rc-animate

    • [x] دعم الوضع المتزامن

    • [x] دعم الرسوم المتحركة التمرير الظاهري

    • [x] التمرير الافتراضي

    • [x] مكون RC

    • [x] شجرة

    • [x] حدد

    • [x] TreeSelect

    • [x] النموذج: https://github.com/react-component/form/pull/292

    • [x] يوفر إصدار الخطافات

    • [x] الجدول

    • [] مجالات النموذج

    • [x] دعم expand & scroll العمل المشترك

  • [x] منتقي التاريخ بتصميم جديد

    • [x] منتقي السنة

    • [x] RangePicker.YearPicker

    • [x] RangePicker.MonthPicker

    • [x] RangePicker.YearMonthPicker

    • [x] RangePicker.WeekPicker

    • [x] TimePicker.RangePicker

متابعة الهدف

  • [ ] إمكانية الوصول
  • [x] معيار API
  • [] React.StrictMode

فيما يلي بعض الاقتراحات حول Ant 4

حوالي templateAreas

يوزع templateArea السلسلة في وقت التشغيل ، وسوف يتسبب ذلك في حدوث أخطاء تحليل غير متوقعة أو أخطاء بسيطة عند حدوث خطأ إملائي في السلسلة. تحليل وقت التشغيل غير ملائم أيضًا لـ TypeScript. هل فريق Ant ينظر في الاقتراح أدناه:

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

حول التبعية

هل يعتبر فريق Ant إزالة الاعتماد على moment ؟

اللحظة كبيرة جدًا بالنسبة لمشروع الواجهة الأمامية ، فهناك العديد من البدائل ، ولكن يتم ترحيل الدعائم TimePicker و DatePicker على Moment. يقودنا لا يمكن استبدال moment بـ date-fns أو مكتبة أخرى أصغر من Moment.

حول أيقونة

أعتقد أن الطريقة التي استخدمتها Ant Icons الآن لا ينبغي إهمالها ، فالطريقة الجديدة التي قد تتسبب بها أيقونة الاستيراد في تغيير جزء الحزمة المشترك عند إضافة أو إزالة رمز واحد.

يمكن لفريق Ant توفير طريقتين لاستخدام أيقونات Ant:

  1. قم بتجميع جميع الرموز في ملف jsfile واحد ، ويمكن للمطورين استيراد ملف كامل باستخدام علامة <script> ، وتعيين externals في حزمة الويب.
  2. الطريقة الجديدة التي تقدم أعلاه.

这 是 我 对 Ant4 的 一些 建议

关于templateAreas

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

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

关于 依赖

是否 考虑 移除 对 لحظة 的 依赖?

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

关于 图标

我 认为 当前 使用 النملة 图标 的 方式 不 应该 被废弃。 新 的

النملة 团队 可以 提供 如下 两种 方案 来 使用 النملة 图标 :

  1. 打包 所有 图标 到 一个 js 文件 中 , 开发 者<script>标签 引用 全部 图标 , 并且 pack حزمة الويب 中 设置 为externals
  2. 4.0 新 介绍 的 图标 使用 方式

أي خطة لدعم التمرير الافتراضي للجدول؟ يُفضل الجدول اللانهائي في بعض الحالات بدلاً من ترقيم الصفحات.
وبما أن "التعليق" مضمن في 3.11 ، ربما ChatBox و ChatMessage؟

أي خطة لدعم التمرير الافتراضي للجدول؟ يُفضل الجدول اللانهائي في بعض الحالات بدلاً من ترقيم الصفحات.
وبما أن "التعليق" مضمن في 3.11 ، ربما ChatBox و ChatMessage؟

ربما أولويات UserInfo .

حول templateAreas

كما أنني أؤيد بناء جملة المصفوفات ثنائية الأبعاد
كما أنني أؤيد بناء جملة المصفوفات ثنائية الأبعاد.

فيما يتعلق بـ templateAreas ، إليك مثال على الفحص الثابت
هذا مثال لفحص ثابت للنوع باستخدام ts لـ 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);

ملعب

image

رائع

15311

هل سنستبدل Moment.js في الإصدار 4؟

أعتقد أن المشكلة الرئيسية للابتعاد عن moment هي كسر التغيير حول locale s. https://github.com/ant-design/ant-design/issues/15311#issuecomment -471383811

آمل أن يكون دعم الكتابة المطبوعة أفضل

رؤية رائعة 4.0 قيد التقدم! لدي بعض الاقتراحات أدناه للنظر فيها ، ولست متأكدًا تمامًا مما إذا كانت تتناسب مع نمط التصميم ، ولكن من أجل التخصيص ، ستكون رائعة في رأيي.

  • القدرة على التحكم في لون الخلفية لصف ما داخل <Table> . على سبيل المثال ، تلوين صف باللون البرتقالي لتمييز التحذير لهذا الصف.
  • ألوان الأزرار ، لم تجد أي مناقشات سابقة حول هذا الموضوع. ولكن سيكون من الرائع أن يكون لديك واجهة برمجة تطبيقات مشابهة مثل <Tag color="red">RED<Tag /> للأزرار ، على سبيل المثال <Button color="red">Red Button<Button/> .
  • دعم أيقونات Font-Awesome 5.x داخل المكونات المختلفة ، أو تأكد من أنها ستعمل مع استمرار عمل Icon الآخر. لقد لاحظت بعض المشكلات في المحاذاة عند استخدام FA بدلاً من المكون الأصلي <Icon> .
  • لا يدعم المكوِّن <Pagination> توفير عدد الصفحات مباشرةً ، وحالة الاستخدام هي أنني أمتلك فقط عدد الصفحات والصفحة الحالية المتاحة لي على سبيل المثال ، ولكن ليس عدد العناصر داخل كل صفحة. لم أجد طريقة جيدة للتعامل مع هذا بعد.

تضمين التغريدة

على سبيل المثال ، تلوين صف باللون البرتقالي لتمييز التحذير لهذا الصف

أميل إلى استخدام rowClassName لإرفاق فئة بهذا الصف ثم تجاوز النمط الافتراضي باستخدام css.

الالمكون لا يدعم توفير كمية الصفحات مباشرة

يمكن أن تتجاوز مجموع وهمية. على سبيل المثال ، إذا كنت تريد 50 صفحة ، فيمكنك تمرير total = pageSize * 50 .

إنها حقًا أخبار جيدة 🚀 التركيز على الأداء مرئي وهذا رائع ، لأن بعض المكونات غير قابلة للاستخدام مع كميات كبيرة من البيانات.

كيف تريد تنفيذ التمرير الافتراضي؟ باستخدام react-window ؟

هل هناك أولويات للميزات المستهدفة بشكل رئيسي؟
أرغب في تجربة التحديد الافتراضي في مرحلة ألفا وأعتقد أنني لست وحدي فيما يتعلق بهذا.

شكر.

لماذا لا يمكن تحميل اسم السلسلة عند الطلب؟ لا يتفاعل رد فعل كسول () يحل المشكلة؟

faradaytrs
نعم ، لكن ذلك يعتمد على خصائص webpack ، عمليات محددة

هناك مشكلتان أكثر بروزًا

  • /* webpackChunkName: "icons/icon-" */ كتبه webpack Magic Comments
  • كما ذكر النص الأصلي ، "يحتوي كل رمز على معلومات وحدة Webpack إضافية بالإضافة إلى محتوى الرمز"

أي أفكار حول تلوث النمط العالمي؟ # 4331 # 9363

أي أفكار حول تلوث النمط العالمي؟ # 4331 # 9363

IMHO سيكون رائعًا بالنسبة لـ 4.0 للسماح للمستخدمين بتحديد نطاق أنماط تصميم مضاد تحت اسم عالمي (انظر تعليقي https://github.com/ant-design/ant-design/issues/4331#issuecomment-396047487)

من الرائع أن نسمع عن المرحلة التالية!

بلدي 2 قيراط. بخصوص المستندات والتبسيط:

غالبًا ما يتم تمرير الخاصيات إلى عناصر DOM الأساسية ، والتي لم يتم توثيقها (في بعض الحالات ، يتم تمرير جميع الخاصيات التي لم يتم انتقاؤها بواسطة تنفيذ المكون). سيكون من المفيد جدًا أن يتم توثيقهم ، وتجميعهم حسب العنصر المستهدف (قد يكون هناك أكثر من عنصر واحد): "يتم تمرير العناصر التالية من خلال الحاوية

"أو" يتم تمرير الدعائم التالية عبر ملف عنصر ... "أو" يتم تمرير جميع الخاصيات الأخرى إلى ... ". بالنسبة إلى هذه الخاصيات لا تحتاج إلى شرح مفصل ، يمكن أن تكون الروابط إلى MDN كافية.

سيكون مثل هذا التغيير أيضًا رائعًا بالنسبة لنا لمطوري TypeScript ، حاليًا هناك الكثير من العمل الشاق للحفاظ على تعريف TS محدثًا في هذا الصدد.

في "معيار واجهة برمجة تطبيقات المطور" ، يجب توثيق ذلك ، ويجب أن يكون هناك قرار بشأن الدعائم التي يجب تمريرها دائمًا (className ، id ،؟)

سؤال آخر:

هل تخطط لتحويل المزيد من الملفات (أو حتى مكونات RC) من JavaScript مع تعريفات TypeScript إلى TypeScript الأصلي؟

ضع في اعتبارك استبدال نموذج rc بشيء أكثر مرونة ، مثل Formik.

سؤال للمشرفين:

يهتم فريقي بتجربة Ant ، لكن https://github.com/ant-design/ant-design/issues/11097 (Antd Less ينشئ تسريبات JavaScript عالمية) يحظرنا. تشير خارطة الطريق أعلاه إلى أن Ant سينتقل إلى الإصدار 3 LESS ، وقد قرأت أن ميزة JavaScript المضمنة غير الآمنة والمتوقفة عن العمل معطلة بشكل افتراضي. هل هذا يعني أن الإصدار 4 من Ant لن يكون لديه مشكلة أقل بعد الآن؟

ليس فقط IE9 / 10 ، ولكن أوقف دعم IE ،

يا إلهي ، سيكون من المفيد جدًا عدم تلويث الأنماط العالمية ( html ، body ، *::before ، ...)

توجد العديد من المشكلات عند استخدامها في المكتبة المستندة إلى رد فعل البقعة. يوصى باستبدال الإصدار الجديد بمكتبة أخرى
رد الفعل-pannable جيد جدا للاستخدام

وصف التزاماتcztflove هذه المكتبة كلها no message 😃 ، واهتمام المجتمع منخفض جدًا ، لا يجب أن أعتبره.

@ yoyo837 المكون الرئيسي لـ virtual list و 仿ios边缘弹性 ، بناءً على هذا المكون ، يمكن تحقيق بعض وظائف 拖拽 🤔 هناك مجال أكبر للتوسع في المستقبل

ألا يجب أن نهاجر إلى لغة عالمية واحدة؟

أتفق تمامًا وأحترم اللغات الإقليمية ، حتى أنا لست متحدثًا أصليًا للغة الإنجليزية. هناك مئات من المهام المتكررة ، أو الأفضل أن نقول المهام المكررة بلغة مزدوجة ، وقبل كل شيء العامل الأكثر أهمية هو الوقت ، وترجمة السلاسل التي تمت مناقشتها ، والتعلم من التوثيق أو الدروس المستفادة. عروض توضيحية وما إلى ذلك.

يجب أن أعترف ، ليس هناك نقص في المساهمين بسبب النزاعات اللغوية ، ولا يزال المئات منا يخشون المشاركة. يوجد بالفعل العديد من سباقات السرعة ، والمشكلات الجارية للترجمة ، ولكن ما أطلبه هو الانتقال تمامًا إلى لغة عالمية واحدة مع هذا الإصدار الرئيسي لتقليل فجوة الاتصال بيننا جميعًا.

ألا يجب أن نهاجر إلى لغة عالمية واحدة؟

أتفق تمامًا وأحترم اللغات الإقليمية ، حتى أنا لست متحدثًا أصليًا للغة الإنجليزية. هناك مئات من المهام المتكررة ، أو الأفضل أن نقول المهام المكررة بلغة مزدوجة ، وقبل كل شيء العامل الأكثر أهمية هو الوقت ، وترجمة السلاسل التي تمت مناقشتها ، والتعلم من التوثيق أو الدروس المستفادة. عروض توضيحية وما إلى ذلك.

يجب أن أعترف ، ليس هناك نقص في المساهمين بسبب النزاعات اللغوية ، ولا يزال المئات منا يخشون المشاركة. يوجد بالفعل العديد من سباقات السرعة ، والمشكلات الجارية للترجمة ، ولكن ما أطلبه هو الانتقال تمامًا إلى لغة عالمية واحدة مع هذا الإصدار الرئيسي لتقليل فجوة الاتصال بيننا جميعًا.

说得 对 , 专心 说 中文 吧

سؤال للمشرفين على الصيانة: هل هناك خطة لاستخدام متغيرات CSS لتغيير سمات الألوان والأسلوب أثناء الطيران؟

لقد تعلمت من الناحية العملية أن تغيير أنماط المكونات من خلال المتغيرات طريقة مريحة للغاية. حاولت إعادة كتابة متغيرات أقل باستخدام var(--css-vars) ، لكنني اكتشفت الكثير من الأخطاء في تجميعات الأنماط ، سببًا في وجود الكثير من الأنماط التي تستخدم الوظائف والعمليات باستخدام المتغيرات ، وليس القيم فقط. أفترض أنها مهمة كبيرة وبهذه الطريقة يتم إنشاء تغييرات متقطعة ، ولكن تم إنشاء إصدارات رئيسية لتعطيل التغييرات :) ويمكن أن يوفر استخدام متغيرات CSS الكثير من الفرص لتخصيص أنماط المكونات.

ما رأيك في ذلك؟ لقد خططت لتطوير سمة باستخدام CSS vars كطلب سحب على أي حال ، لأن هذه الميزة (تغيير المظهر أثناء الطيران) مطلوبة في مشروعي.

عذرًا ، إذا كان هذا الاقتراح مكررًا ، لكنني لم أجد أي شيء بخصوص ذلك في القضايا الأخرى والعلاقات العامة.

@ Z3SA https://caniuse.com/#search = CSS٪ 20Variables. هذا يحتاج إلى إيقاف كل دعم IE ، وإيقاف دعم IE11 جذري للغاية ، على الرغم من أنني أؤيد أيضًا القيام بذلك.

@ yoyo837 ، أوافق على أنه سبب جذري للغاية لمشاكل دعم IE. ولكن لدى Ant Design أيضًا دعمًا رسميًا (كما قيل في تصميم ant) ​​للإلكترون (كمنصة منفصلة ، وليس على شبكة الإنترنت). قد تكون هناك طريقة في هذه الحالة لإنشاء نسختين: أحدهما به متغيرات أقل والآخر باستخدام متغيرات CSS. لكن يبدو أنه من الصعب جدًا دعمه.

لذلك ، هناك إستراتيجية أخرى محتملة أفترضها - إنشاء متغيرات أقل لجميع السمات القابلة للتخصيص في أقل ، أو إزالة استخدام أي وظائف وعمليات ضمن أقل متغيرات يمكن لأي مطور استخدامها كمدخل لمتغيرات CSS الخاصة به. أو إذا قلتها بطريقة أكثر بساطة - استخدم متغيرات أقل فقط كحاوية للقيمة ، وليس للوظائف والعمليات.

إذا كنت تدعم المتصفحات الرئيسية فقط ، فأنا أعتقد أن حجم الكود سيكون أصغر وسيكون الحفاظ على الكود أسهل.

ليس فقط IE9 / 10 ، ولكن أوقف دعم IE ،

تضمين التغريدة قد يلتزم بعض المطورين بـ antd @ 3 وهذا ليس بالأمر الجيد بالنسبة لنا.

@ Z3SA سيكون هذا عملاً ضخمًا.

dancerphil لحسن الحظ ، لا أفكر إلا في أحدث إصدار من الكروم

@ yoyo837 أعرف ذلك. وسأفعل ذلك بنفسي إذا لم تحظ هذه الفكرة بالاهتمام الكافي.

نحن شركة نود الانتقال تدريجيًا إلى antd باستخدام مكونات فردية ؛ ومع ذلك ، فإن استخدام النمل للأنماط العالمية يعقد هذه المشكلة حقًا. من فضلك توقف عن تلويث الأنماط العالمية.

النموذج هو أحد أكثر مكونات الاستخدام. نلاحظ أن مواقع التواصل الاجتماعي لديها العديد من التعليقات على تصميم واجهة برمجة التطبيقات. نرغب في تبسيط واجهة برمجة التطبيقات في 4.0:

Fom.It سيشمل ربط الحقل.

هل ستظل هذه التغييرات تسمح لنا باستخدام Form.em كعنصر عرضي صارم؟ أنا أحب مكونات antd ، لكني أفضل رد الفعل النهائي لإدارة الحالة. أريد أسلوب Form.Item وليس أي منطق إدارة الدولة.

تم إنشاء الفرع 4.0. متى يمكنني المعاينة

مكون النموذج الجديد رائع!

يرجى استبدال Momjs بـ dayjs لأن Momentjs ضخمة وأصبح حجم الحزمة ضخمًا أيضًا.

هل هناك أي مطبات تفكر في تولي محرر النص المنسق؟

ما هو تاريخ الاصدار؟

rafaelodassi لا يوجد تاريخ مؤكد حتى الآن ، ولكن ربما في Q4.

ستكون الترقية إلى @babel/[email protected] و [email protected] أولويتنا أيضًا.

ليس v3؟ هل هناك أي أخبار عن [email protected] ؟

يتحدث الجميع عن إزالة دعم IE تمامًا لأن الإحصائيات تظهر أنه بالكاد يستخدم. ماذا عن الملايين من مستخدمي الشركات خلف الإنترانت الذين لا يدخلون في الإحصائيات على الإطلاق؟ إنهم عالقون في IE10 و IE11 بسبب سياسات الشركة.

سألتزم بـ

أود أن أقترح تقديم واجهة برمجة تطبيقات للسماح باستخدام الكائنات كقيم <Select/> .
لمزيد من التفاصيل ، يرجى الاطلاع على https://github.com/ant-design/ant-design/issues/13485

cc zombieJ

من المستحسن أن يكون لكل مكون سجل تحديث خاص به. ولا يهم إذا أبقيته مخفيًا ، أو اقتراح شخصي ~

متى يمكن أن يكون الإصدار أو RC ممكنًا؟

من المستحسن أن يكون لكل مكون سجل تحديث خاص به. ولا يهم إذا أبقيته مخفيًا ، أو اقتراح شخصي ~

توافق على ما إذا كان يمكن إضافة وثائق كل مكون من خلال الإصدار. خلاف ذلك ، يمكنك الاطلاع على الوثائق ومعرفة ما إذا كان يمكن استخدام الإصدار الحالي وما إذا كنت تريد تحديث التبعيات.

مرسلة مع GitHawk

@ fwh1990 @ jas0ncnredclown
على الإنجليزية الثابتة والمتنقلة)

احتفظ بها كقناة إنجليزية ، شكرًا ~

تم نشر 4.0 ألفا. هذا مذهل. تعال يا أخي.

سأقوم بإعادة صياغة مشروعي بمجرد نشر الإصدار التجريبي

السمة الافتراضية antd جميلة ، لكنها أيضًا يمكن أن تكون أفضل.
لسهولة القراءة ، ضع في اعتبارك التباين المحسن واستخدم نصًا أكبر.

هناك الكثير من المقالات والأدوات.
https://www.google.com/search؟q=web+readability

من الأفضل تقديم برنامج نصي لترحيل antd v3 إلى الإصدار 4.

في مشروع بيز ، يوجد عدد كبير جدًا من مكونات النموذج. ترحيل antd v3 إلى v4 سيكلف الكثير من المرات.

فعل فريق react-relay شيئًا مشابهًا.
إذا كنت تريد ترحيل react-relay v3 إلى رد فعل-ريلاي v4 Realease ، فأنت بحاجة إلى تعديل العديد من الملفات.
لذلك ، يستخدمون jscodeshift لكتابة نص ترحيل ، بحيث يمكن لمستخدم react-relay بسهولة ترحيل react-relay v3 إلى الإصدار 4.

أشعر أنه من الصعب تجاوز بعض الأنماط. إذن إذا كانت هناك خطة لتحسين ذلك؟

أنا شخصياً أفضل استخدام CSS-in-JS ، فهو مرن للغاية ويتناسب بشكل جيد مع React.

عند استخدام مكون فئة تحت 4.0 alpha ، لا يمكن الحصول على كيان النموذج ، https://5d403395cd145c0008eea971--ant-design.netlify.com/components/form/v3-cn لا يمكن تنفيذ نموذج التعليمات البرمجية ضمن هذا الارتباط ، ولا يوجد كيان في النموذج طريقة

حلها في

@ Kwei9 ، هل يمكنك فتح مشكلة وإرفاقها لإعادة إنتاجها؟دعني ألقي نظرة

@ Kwei9 ، هل يمكنك فتح مشكلة وإرفاقها لإعادة إنتاجها؟دعني ألقي نظرة

تم تغيير كتابة المرجع إلى هذا الحل

أعتقد أن الوقت قد حان لمعالجة تلوث النمط العالمي! هذا يجعل من الضروري جدًا استخدام antd جنبًا إلى جنب مع التطبيقات الأخرى!

لحظة كبيرة جدًا بالنسبة لمشروع الواجهة الأمامية ، هناك العديد من البدائل ، لكن دعائم TimePicker و DatePicker تعتمد على Moment. يقودنا لا يمكن استبدال اللحظة ...

@ jas0ncn مرحبًا ، يُرجى مراعاة استبدال Momjs بـ dayjs (بديل 2 كيلوبايت). هذه بالفعل مشكلة تم اختبارها من Replace Moment.js في Ant Design (Antd) بـ Day.js https://github.com/iamkun/dayjs/issues/529 وهي تعمل بشكل جيد حقًا.

بصفتنا مشرفًا أساسيًا على dayjs ، نحن على استعداد لتقديم أي مساعدة في هذا الاستبدال.

شكر.

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

سيتم * إهمال * طريقة استخدام الرمز القديم:

import { Icon, Button } from 'antd';

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

سيتم استخدام استيراد رمز واحد بدلاً من ذلك في 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>
);

لدي فكرة عن مرجع الرمز الجديد. نظرًا للصياغة الجديدة أعلاه ، فإن كل رمز مكافئ لمكون منفصل. على سبيل المثال ، قد يبدو إدخال رمز التحميل على النحو التالي:

import Loading from 'antd/icons/Loading';

<Loading />

لكن عادة يمكنك تغليف مكون تحميل حقيقي بنفسك ، وكان <Icon /> لمعرفة أن هذا رمز في لمحة. الآن يستغرق الكثير من الأسماء وأريد أن أعرف أن الرمز يجب أن يرتفع ويجد مكان الاستيراد.
مثل:

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

للوهلة الأولى ، يبدو أن الاثنين التاليين لا يمكن اعتبارهما أيقونات (بالطبع ، ليس لهما تأثير على تشغيل الكود ~)
إذا قمت بالتغيير إلى الصياغة التالية:

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

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

من خلال الطبقة الخارجية للخبز ، تبدو مشابهة جدًا للطبقة السابقة ، ويمكن أيضًا استخدامها عند الطلب ، فهي ليست أكثر من إدخال مكون Icon.
وإذا تم استيفاء اصطلاحات معينة ، فيمكن تمرير الرمز المحدد من قبل المستخدم من خلال سمة المواصفات؟ إنه مكافئ لـ antd المساعدة في تحديد الكثير من الرموز مقدمًا ، لكن الرموز المحددة من قبل المستخدم هي نفسها تمامًا ~~~

ملاحظة: أم أن هذا النوع من الكتابة قد تم التفكير فيه بالفعل منذ زمن طويل أم أنه لم يفكر فيه لأن هناك مشكلة في هذا النوع من الكتابة؟ . . 😂
لقد فكرت في ذلك للتو. . .

ppbl مشابه لما يلي وفقًا لفكرتك:

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

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

يتم أيضًا إنشاء الأيقونة الجديدة بالمثل ، راجع https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/icons/AccountBook.tsx

هل يمكننا تجنب هذا الموقف من خلال إضافة بادئة / لاحقة رمز إلى اسم الرمز؟

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

<LoadingOutlineIcon  {...otherProps}/>

الرجاء العمل على تقليل حجم الحزمة
https://github.com/ant-design/ant-design/issues/9419
عند استيراد Button يضيف 95 كيلو بايت إلى المشروع - فهذا ببساطة غير مقبول في عام 2019.

vagusX ربما أعتقد أن الاسم طويل بعض الشيء؟ أعتقد دائمًا أن الاسم موجز ويبدو وكأنه مكون صغير أو مكون واحد نسبيًا. إذا كان الاسم طويلًا جدًا ، فيجب أن يكون مكونًا كبيرًا (بالطبع هذا شعور خاطئ ~ أعلم). . ~

بالطبع ، إذا علمت أنه رمز فقط لمشاهدة <Icon /> ، يمكنني أيضًا إنشاء مكون <Icon /> بنفسي ، ثم لف أيقونة antd عند استخدامه ، ويكون التأثير هو نفسه تقريبًا. ~ أشعر فقط أنهم جميعًا رموز ، وهي حقًا مجموعة من الأسماء المتناثرة. إنه شعور غريب بعض الشيء. الفرق هو أنني كنت أعرف أنها كانت رمزًا أولاً ، ثم عرفت نوعها. الآن أعرف النوع أولاً ، ثم أعرف ، أوه ، إنه رمز ~

@ avalanche1 يمكنك إلقاء نظرة على نتيجة تحليل الحزمة من هذا الرابط https://github.com/ant-design/ant-design/pull/18217#issuecomment -520683838 ، وحجم المكون Button يرفض بشكل واضح

جيد ان تعلم. لكن في لقطات الشاشة الخاصة بك ، لا يوجد مؤشر على الحجم الفعلي ، لذلك لا يمكنني تأكيد أو دحض.

سأقوم بترحيل النموذج إلى واجهات برمجة التطبيقات الجديدة ، لكنني وجدت أن إصدار نموذج الحقل غير مستقر ، لذلك أريد أن أعرف ما إذا كان سيحصل على تغييرات متقطعة مع هذه الواجهات الآن في المستقبل.

@ orzyyyy ،
أنتد إصدار 4.0-alpha.x لمتطوع اجتماعي وداخلي لاختباره. إذا لم تكن هناك ردود فعل سلبية من إصدار ألفا ، فسيكون هذا API هو الأخير عند الإصدار.

@ avalanche1 @ant-design/icons v4-alpha يدعم إصدار v4-alpha اهتزاز الشجرة ، لذلك يعتمد حجم الحزمة على مقدار الرموز التي استخدمتها في مشروعك ، سواء كنت تستخدم مكون antd الذي يستورد الرموز داخليًا أو تستخدم @ant-design/icons مباشرة ، لذلك ربما لم أستطع فهم قلقك بشأن هذه النقطة.

لماذا نتحدث عن الرموز عندما كانت رسالتي الأولية تدور حول الزر والتقويم والمكونات الأخرى؟ https://github.com/ant-design/ant-design/issues/9419

يجب أن تكون قيمة منتقي التاريخ لحظة ، هل يمكن إزالة اللحظة؟ إذا قمت بتحديث من ، يجب أن أتحول إلى لحظة

بالنسبة لـ moment ، هذا هو رأيي. لا يزال منتقي التاريخ يستخدم moment افتراضيًا نظرًا لمتطلبات التوافق ، ولكنه يوفر وظيفة المصنع لإنشاء مكتبة التاريخ الأخرى:

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

فكرت فقط ، أرحب بالمناقشة.

حان الوقت الآن للتخلص من moment.js !

  1. لن يكون Moment.js قابلًا للاهتزاز المعقدة . (سيحتاجون إلى إعادة كتابتها من الصفر). انها ضخمة في سماء المنطقة لantd والمستخدمين.

  2. يعد Ant Design v4 إصدارًا رئيسيًا به بعض التغييرات بالفعل. الان هو الوقت!

  3. أقترح عدم استبدالها بمكتبة أخرى. قد تستخدم Antd شيئًا صغيرًا مثل dayjs أو date-fns داخليًا ولكن يجب أن تقبل كائنات أو سلاسل Date لمكوناتها.

في كل مرة تتصل فيها بـ moment() ، يموت جرو ..

:الكلب:

يود zombieJ معرفة كيفية تقدم مكون الجدول. هل يتوفر إصدار معاينة مثل النموذج؟ كدت أن أتقيأ من الدم بشكل إجمالي

هل يتضمن الإصدار ألفا الجدول الجديد بالفعل؟ إذا كان الأمر كذلك ، يجب أن يحتوي موقع المعاينة على مثال لذلك؟

الجدول موجود في قائمة الانتظار ، وأعمل حاليًا على القائمة الافتراضية.

ماذا عن دعم المكونات المصممة؟

لم يتم تعيين القيم الأولية للنموذج moment . https://github.com/react-component/field-form/blob/master/src/interface.ts#L7

نأمل أن يوفر النموذج إصدارًا غير متحكم فيه لحل مشاكل أداء النماذج الكبيرة مثل Excel

هل هناك فرصة لنقل وثائق ألفا إلى موقع توثيق Ant العادي؟

يقوم صاحب العمل بحظر مجالات Netlify وأفترض أن الآخرين قد يفعلون ذلك أيضًا.

أي خطة ملموسة لدعم تشغيل لوحة المفاتيح عبر القائمة والمنسدلة؟

هل هناك فرصة لنقل وثائق ألفا إلى موقع توثيق Ant العادي؟

يقوم صاحب العمل بحظر مجالات Netlify وأفترض أن الآخرين قد يفعلون ذلك أيضًا.

لماذا ا؟ هههه

من المأمول أن يكون مكون الجدول مشابهًا لمكون جدول العناصر. سيحدد كل عمود عرضًا تلقائيًا أولاً. يُقترح تغيير حرف رأس الجدول إلى min-width بدلاً من تغيير الخط. ومن المأمول أن ويمكن استخدام وظائف التمرير في وقت واحد. ومن المأمول أن يشبه الجدول الشجري الشكل TreeSelect عند إجراء خيارات متعددة.

آمل أن يكون مكون الجدول مثل مكون الجدول للعنصر. سيتم تعيين عرض كل عمود تلقائيًا أولاً. يوصى بتغيير حرف رأس الجدول إلى min-width دون التفاف. آمل أن يتم استخدام وظيفة الطي ووظيفة التمرير في نفس الوقت. آمل أن يتم استخدام جدول الشجرة عند تحديدات متعددة ، يمكن أن يكون مشابهًا لـ TreeSelect

هل من المحتمل أن تفعل شيئًا حيال التخصيص باستخدام الإصدار 4 أو 5؟ يعد تخصيص MaterialUI أسهل بكثير مما يجعله خيارًا للمشروع الذي أعمل عليه ، حتى لو كنت أرغب حقًا في استخدام AntD لأنه أكثر اكتمالًا وما إلى ذلك.
من فضلك ، من فضلك قل أقل لشيء أفضل للتخصيص.

بعد السماح للوكالة باختبار تطبيق الويب antd الخاص بنا ، حددوا عيوبًا خطيرة في إمكانية الوصول وحصلنا على أسوأ درجة ممكنة. عند التحقيق في الأسباب الرئيسية ، فإنه يتلخص في مكونات RC التالية:

  • rc-select (كان علينا استبدال Downshift وتطبيق أنماط antd في الأعلى)
  • RC-tabs (انظر # 18798)
  • وربما أخرى لم نستخدمها حتى الآن

ما حجم الحوكمة التي تحتوي عليها antd أكثر من مكونات RC وهل سيكون الفريق قادرًا على إصلاح ذلك في الوقت المناسب للإصدار 4.0؟ ستكون إمكانية الوصول دائمًا غير مرتبة نسبيًا ، ولكن الحقيقة هي أنه من الصعب بشكل متزايد تجاهلها حيث تصبح المؤسسات ملزمة قانونًا بتوفير تطبيقات يمكن الوصول إليها للموظفين / العملاء.

يمكنك الاعتماد علي في بعض الاختبارات الصعبة باستخدام برامج قراءة الشاشة والمقارنة مع أفضل الممارسات.

MaterialUI أسهل بكثير في التخصيص

murbanowicz هل يمكنك التفصيل؟ أنا أشعر بالفضول لماذا تعتقد ذلك.

abenhamdine لا مشكلة!
يوجد في MUI ThemeProvider الذي تقوم بلف تطبيقك به وتقوم بتكوين المظهر بالكامل فقط بواسطة كائن JS المكتوب في TypeScript لذا من الجيد جدًا العمل معه.

في AntD للتخصيص ، عليك العبث بـ LESS أو SASS (مع بعض المكونات الإضافية) لذلك عليك الحفاظ على الأقسام الأخرى وما إلى ذلك ، عليك أن تذهب من خلال مصدر المكونات للعثور على المتغير الذي تريد تغييره لمكون معين وما إلى ذلك.
أيضًا ، لا توجد طريقة جيدة لتغيير السمة في وقت التشغيل وهي سهلة للغاية مع MUI ، فقط عن طريق تبديل كائن JS الذي يمكن الحصول عليه بسهولة من الخادم وما إلى ذلك.

بشكل أساسي عندما تبحث عن تخصيص AntD و MUI ، ستجد أمثلة سهلة على MUI لأنه لا يوجد شيء يمكن الحديث عنه لأنه مباشر ، ولكن عندما تبحث عن تخصيص AntD ، ستجد الكثير من الحلول المبتكرة وما إلى ذلك.

أنا أحب AntD للمكونات الكاملة والعديد من المكونات الرائعة ، لكن التخصيص سيء حقًا ويستند إلى تجربتي والتحدث إلى مطورين آخرين ، يجب أن يكون أحد النقاط الرئيسية في خريطة الطريق

abenhamdine لا مشكلة!
يوجد في MUI ThemeProvider الذي تقوم بلف تطبيقك به وتقوم بتكوين المظهر بالكامل فقط بواسطة كائن JS المكتوب في TypeScript لذا من الجيد جدًا العمل معه.

في AntD للتخصيص ، عليك العبث بـ LESS أو SASS (مع بعض المكونات الإضافية) لذلك عليك الحفاظ على الأقسام الأخرى وما إلى ذلك ، عليك أن تذهب من خلال مصدر المكونات للعثور على المتغير الذي تريد تغييره لمكون معين وما إلى ذلك.
أيضًا ، لا توجد طريقة جيدة لتغيير السمة في وقت التشغيل وهي سهلة للغاية مع MUI ، فقط عن طريق تبديل كائن JS الذي يمكن الحصول عليه بسهولة من الخادم وما إلى ذلك.

بشكل أساسي عندما تبحث عن تخصيص AntD و MUI ، ستجد أمثلة سهلة على MUI لأنه لا يوجد شيء يمكن الحديث عنه لأنه مباشر ، ولكن عندما تبحث عن تخصيص AntD ، ستجد الكثير من الحلول المبتكرة وما إلى ذلك.

أنا أحب AntD للمكونات الكاملة والعديد من المكونات الرائعة ، لكن التخصيص سيء حقًا ويستند إلى تجربتي والتحدث إلى مطورين آخرين ، يجب أن يكون أحد النقاط الرئيسية في خريطة الطريق

شرح واضح ودقيق ، تشك!

abenhamdine لا مشكلة!
يوجد في MUI ThemeProvider الذي تقوم بلف تطبيقك به وتقوم بتكوين المظهر بالكامل فقط بواسطة كائن JS المكتوب في TypeScript لذا من الجيد جدًا العمل معه.

في AntD للتخصيص ، عليك العبث بـ LESS أو SASS (مع بعض المكونات الإضافية) لذلك عليك الحفاظ على الأقسام الأخرى وما إلى ذلك ، عليك أن تذهب من خلال مصدر المكونات للعثور على المتغير الذي تريد تغييره لمكون معين وما إلى ذلك.
أيضًا ، لا توجد طريقة جيدة لتغيير السمة في وقت التشغيل وهي سهلة للغاية مع MUI ، فقط عن طريق تبديل كائن JS الذي يمكن الحصول عليه بسهولة من الخادم وما إلى ذلك.

بشكل أساسي عندما تبحث عن تخصيص AntD و MUI ، ستجد أمثلة سهلة على MUI لأنه لا يوجد شيء يمكن الحديث عنه لأنه مباشر ، ولكن عندما تبحث عن تخصيص AntD ، ستجد الكثير من الحلول المبتكرة وما إلى ذلك.

أنا أحب AntD للمكونات الكاملة والعديد من المكونات الرائعة ، لكن التخصيص سيء حقًا ويستند إلى تجربتي والتحدث إلى مطورين آخرين ، يجب أن يكون أحد النقاط الرئيسية في خريطة الطريق

أتفق مع murbanowicz على أن التخصيص مع Antd يمكن أن يكون فوضويًا بعض الشيء (تسريب النمط العالمي ، طريقة اختراق استخدام Sass ، تضارب الأولويات بين تجاوزات النمط ، الكثير من التبعيات الخارجية مثل moment مما يؤدي إلى حجم حزمة ضخم ) ، ولكن بعد استخدام MUI لفترة طويلة ، أجد Antd أكثر قابلية للتخصيص.

لست محدثًا بإصدارات MUI الجديدة ، ولكن في المرة الأخيرة التي تحققت فيها ، كان هناك جزء من المكونات التي لم تتمكن من تخصيصها ، نظرًا لأن MUI تستخدم styled-components ، إذا لم يضيف المطورون classNames كل مكان ، لا يمكنك تحديد className الدقيق للمكون وتجاوزه بأسلوبك الخاص.
يعد التصميم أمرًا رائعًا للاستخدام المباشر للمكتبة ، ولكن إذا كنت ترغب في تكييف التصميم مع نظام التصميم الخاص بك ، فسيكون ذلك فوضويًا للغاية مع MUI ، وأحيانًا يكون مستحيلًا ؛)

ولكن مع ذلك ، يحتاج antd بالفعل إلى بعض العمل لجعل تجربة التخصيص أسهل ؛)

filipjnc ،
أصدر rc-select إصدار ألفا الذي يعزز إمكانية الوصول. يمكنك المساعدة في اختبار ذلك. وقد استخدمه فرع إعداد v4 يمكنك رؤية المعاينة في الأعلى.
بالنسبة إلى rc-tabs ، نظرًا لأنه ليس على رأس الأولويات ، سأقوم بتحسينه أيضًا ولكن لاحقًا.

zombieJ حسنًا ، rc-select .

على الرغم من أن rc-tabs ليس أولوية ، هل يمكنك إلقاء نظرة على طلب السحب الخاص بي ، حيث أقوم بإصلاح النقاط الأكثر أهمية من نتائج اختبار إمكانية الوصول؟

لدي مشكلة هنا ، وفقًا لطريقة إصلاح الأيقونة الحالية ، إذا كان هناك شكل وأيقونة مكون antd
لا يمكن إعطاء سوى اسم مستعار واحد عند تقديم النموذج في نفس الوقت

zkwolf نعم ، نقوم بإعادة تسمية الأيقونة: https://github.com/ant-design/ant-design-icons/pull/118

سي سي vagusX

أرغب بشدة في معالجة مشكلة إعادة عرض

يرجى ملاحظة أنه في https://next.ant.design ، لا يتم فرز المكونات أبجديًا في الشريط الجانبي للمكون
Schermata 2019-09-30 alle 18 01 03

كما تعلم ، فإن تصميم النمل لا يعمل بشكل جيد حقًا من حيث إمكانية الوصول. هذا ليس مرئيًا جدًا على السطح بالنسبة لغالبية الناس ، ولكنه يمثل مشكلة كبيرة عندما تغوص بشكل أعمق. شاهد كيف يسجل تصميم النمل نتائج سيئة للغاية هنا: https://darekkay.com/blog/accessible-ui-frameworks/

والخبر السار هو ، بما أنني أحب تصميم النمل كثيرًا وأعتزم استخدامه بشكل أكبر لمشاريع المؤسسة ، فإن هدفي هو جعله في أعلى القائمة.

لقد سمحت لوكالة باختبار أحد تطبيقات مؤسستي لعميل في ألمانيا (حيث تعد إمكانية الوصول موضوعًا ضخمًا في الشركات الكبيرة). كانت أهم الأشياء:

  1. إمكانية الوصول إلى قارئ الشاشة للمكونات الأساسية والحاسمة مثل التحديد والإكمال التلقائي وعلامات التبويب
  2. يتباين اللون في كثير من الأماكن
  3. التنقل باستخدام لوحة المفاتيح في بعض الأماكن

لقد اخترت rc-tabs أولاً كفوز سريع لإصلاح جميع مشكلات إمكانية الوصول - يجب أن يتم طرحه قريبًا (https://github.com/react-component/tabs/pull/218). ولكن أكثر ما يقلقني هو rc-select ، خاصةً جزء التحرير والسرد (الإكمال التلقائي) منه. تعد الصناديق المركبة من أكثر الجوانب صعوبة في إمكانية الوصول إلى قارئ الشاشة ومن السهل فهمها بشكل خاطئ. لإصلاح جميع المشكلات ، لا يتطلب الأمر بعض التعديلات على خصائص الأغنية فحسب ، بل يتطلب أيضًا إصلاحًا كبيرًا.

لإصلاحه بسرعة في تطبيقي قبل بدء البث المباشر ، استبدلت التحديد والإكمال التلقائي لـ ant-design ( rc-select ) بمكوناتي الخاصة بناءً على https://github.com/downshift-js/downshift. لقد قمت للتو بتكرار أفضل ممارسات ARIA وطبقت أنماط antd في الأعلى - تبدو متشابهة تمامًا ويمكن الوصول إليها تمامًا.

لذا فإن السؤال المثير هو: هل تفكر في عدم القيام بالعمل المزدوج وإيقاف rc-select لصالح مكتبة downshift الأكثر شهرة وكاملة؟ يمكنك توفير بعض الوقت في الفريق والتركيز على إتقان المكونات الأساسية الأخرى ، التي ليس لها بدائل جيدة في سوق المصادر المفتوحة.

هذه الفكرة تبدو رائعة بالنسبة لي filipjnc . أيضًا ، يكون التبديل إلى سرعة أقل 1/4 من حجم تحديد rc. آمل أن يتمكن فريق antd من القيام بذلك.

أرغب في رؤية المزيد من التحسينات في الألوان في الإصدار 4.0. على وجه التحديد ، تذكر المستندات "لوحة ألوان تصور البيانات (قريبًا)" والتي ستكون مفيدة جدًا في لوحات المعلومات والتطبيقات الأخرى ذات البيانات الثقيلة. يساعد اللون الرمادي الدافئ والبارد في بناء لوحات ألوان أكثر تماسكًا أيضًا. بالإضافة إلى ذلك ، إنها فرصة جيدة لإصلاح تباين الألوان لإمكانية الوصول (كما ذكرfilipjnc). استمروا في العمل الجيد 👍

كما تعلم ، فإن تصميم النمل لا يعمل بشكل جيد حقًا من حيث إمكانية الوصول. هذا ليس مرئيًا جدًا على السطح بالنسبة لغالبية الناس ، ولكنه يمثل مشكلة كبيرة عندما تغوص بشكل أعمق. شاهد كيف يسجل تصميم النمل نتائج سيئة للغاية هنا: https://darekkay.com/blog/accessible-ui-frameworks/

والخبر السار هو ، بما أنني أحب تصميم النمل كثيرًا وأعتزم استخدامه بشكل أكبر لمشاريع المؤسسة ، فإن هدفي هو جعله في أعلى القائمة.

لقد سمحت لوكالة باختبار أحد تطبيقات مؤسستي لعميل في ألمانيا (حيث تعد إمكانية الوصول موضوعًا ضخمًا في الشركات الكبيرة). كانت أهم الأشياء:

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

لقد اخترت rc-tabs أولاً كفوز سريع لإصلاح جميع مشكلات إمكانية الوصول - يجب أن يتم طرحه قريبًا ( مكون رد الفعل / علامات التبويب # 218 ). ولكن أكثر ما يقلقني هو rc-select ، خاصةً جزء التحرير والسرد (الإكمال التلقائي) منه. تعد الصناديق المركبة من أكثر الجوانب صعوبة في إمكانية الوصول إلى قارئ الشاشة ومن السهل فهمها بشكل خاطئ. لإصلاح جميع المشكلات ، لا يتطلب الأمر بعض التعديلات على خصائص الأغنية فحسب ، بل يتطلب أيضًا إصلاحًا كبيرًا.

لإصلاحه بسرعة في تطبيقي قبل بدء البث المباشر ، استبدلت التحديد والإكمال التلقائي لـ ant-design ( rc-select ) بمكوناتي الخاصة بناءً على https://github.com/downshift-js/downshift. لقد قمت للتو بتكرار أفضل ممارسات ARIA وطبقت أنماط antd في الأعلى - تبدو متشابهة تمامًا ويمكن الوصول إليها تمامًا.

لذا فإن السؤال المثير هو: هل تفكر في عدم القيام بالعمل المزدوج وإيقاف rc-select لصالح مكتبة downshift الأكثر شهرة وكاملة؟ يمكنك توفير بعض الوقت في الفريق والتركيز على إتقان المكونات الأساسية الأخرى ، التي ليس لها بدائل جيدة في سوق المصادر المفتوحة.

لن أكون متحمسًا للغاية بشأن نظام downshift ، راجع https://github.com/downshift-js/downshift/issues/730
تعد إمكانية الوصول مهمة لبعض المستخدمين ، ولكن الأداء مهم لعدد أكبر من المستخدمين.

الجدول موجود في قائمة الانتظار ، وأعمل حاليًا على القائمة الافتراضية.

مرحبًا ، zombieJ
هل يوجد أي تقدم في "تذييل الملخص"؟

@ alexchen1875 ،
في انتظار تحديث رمز دورة الحياة الجديد. الجدول هو التالي بعد الانتهاء:)

4.0 هل يمكن تغيير بعض معاملات الدعائم إلى علبة الجمل؟ على سبيل المثال ، تم تغيير Input.TextArea في autosize إلى autoSize ؟
جميع عناصر علامات HTML الأصلية في React عبارة عن حالة جمل ، مثل <input autoComplete /> ، يبدو هذا autosize دائمًا متعارضًا. . .

يمكن تغييره في 3.x ، متوافق مع الاستخدام الأصلي وتجاهله. @ jinliming2 هل أنت مهتم

  • 4.0 لماذا يتم وضع علامة على props.children of Tree على أنها واجهة برمجة تطبيقات قديمة ، والتوصية بطريقة البيانات الخالصة لـ treeData بدلاً من ذلك. أشعر أن props.children مفيد جدًا ويمكن تشغيله بشكل كبير
  • تم وضع علامة على ComponentWillReceiveProps على أنها قديمة في أحدث واجهة برمجة تطبيقات للتفاعل. في الوقت الحالي ، وجد أن مكون الجدول ومكون الرسوم المتحركة لا يزالان موجودين أثناء التجربة.

+1 لإمكانية الوصول. رجاء!

عند الحديث عن مشكلة حجم الأيقونة الواضحة ، يبدو أن رمز المكونات الأخرى هو 12 بكسل ، ومنتقي البيانات 14 بكسل. هل هناك اعتبار للاختلاف بين حجم المكونات الأخرى واضحًا وأيقونة اللاحقة أم أن منتقي البيانات هو رمز التبديل وهو 14 بكسل؟هل لديكم أي خطط لتوحيد الحجم

تخطط zombieJ لإضافة فرز متعدد الأعمدة في الجدول

الرجاء الكتابة باللغة الإنجليزية

هل سيتم إصلاح مشكلة الحجم الكبير جدًا للحظة؟

هل سيتم إصلاح مشكلة الحجم الكبير جدًا للحظة؟

جرب استخدام dayjs أولاً

هل يمكن أن يكون باللغة الإنجليزية؟ ضع في اعتبارك مشاعر الأجانب. أنا دائما أترجم جوجل. ليس من المهم أن يكون معيار القواعد غير قياسي. يمكن فهم الكلمات من قبلهم

@ afc163
هل اعتبرت أن الأجانب يتبعون هذا الريبو؟ لسوء الحظ ، فإن ترجمة Google ليست أداة جيدة لفهم ما تقوله. أدرك أن معظم مطوري ومستخدمي Ant-Design صينيون ، لكن هل تعتبرون غير الصينيين أيضًا؟
لذلك أحثكم على استخدام اللغة الدولية لاحترامنا جميعًا.

مرحبا،
كنت أرغب في تجربة Ant Design 4.0 باستخدام تطبيق create-react-app و Typescript.
لقد اتبعت التعليمات الموجودة على https://next.ant.design/docs/react/introduce ولكن لا يمكنني الحصول على تطبيق يعمل.
تم اتباع التعليمات الأساسية ( import Button from 'antd/es/button'; ) لإنشاء تطبيق يُسبب الخطأ:

لا يمكن العثور على زر وحدة antd / es /

بعد إضافة رد فعل التطبيق ، إعادة توصيل ، تخصيص ، cra ، استيراد المكون الإضافي babel وتغيير الاستيراد إلى import {Button} from 'antd' لي رسالة خطأ:

تعذر العثور على ملف تصريح للوحدة النمطية "antd"

هل يمكنك أن تعطيني نصيحة حول كيفية جعل antd4 يعمل مع تطبيق crea-React-print ونافذة الكتابة ، من فضلك؟

gynekolog ،
يرجى التحقق مما إذا كان node_modules مثبتًا بشكل صحيح.

المرجع https://codesandbox.io/s/cool-paper-4y1u7

lvlohammadi لسوء الحظ ، بعض الصينيين مثلي ليسوا جيدين بما فيه الكفاية في اللغة الإنجليزية ، لكنني سأبذل قصارى جهدي لاستخدام اللغة الدولية للمشاركة في التواصل المجتمعي.

gynekolog ،
يرجى التحقق مما إذا كان node_modules مثبتًا بشكل صحيح.

المرجع https://codesandbox.io/s/cool-paper-4y1u7

أنت على حق. انا اجري

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

في حين أن

yarn add "[email protected]"

عار...
شكرا لك.

dropdownMatchSelectWidth عند تحديد فاصل مكون في إصدار ألفا ، ساري المفعول في الإصدار السابق

إذا كنت سأبدأ مشروعًا جديدًا باستخدام antd ، فهل ستختار الإصدار 3 أو 4 alpha؟ كيف "الإنتاج جاهز" هو الإصدار 4؟ هل ما زلت تهدف إلى إصدار q4؟

إذا كنت سأبدأ مشروعًا جديدًا باستخدام antd ، فهل ستختار الإصدار 3 أو 4 alpha؟ كيف "الإنتاج جاهز" هو الإصدار 4؟ هل ما زلت تهدف إلى إصدار q4؟

Antd 4 غير جاهز للإنتاج بعد. يجب أن تبدأ بـ antd 3 ، يجب أن يكون الانتقال سهلاً (خاصةً إذا تم توفير codemods كما هو متوقع).

آمل أن أرى فصلًا كاملاً بين المنطق والعرض ، أي بخلاف التلاعب بأسماء الفئات ، فإن js لا تفعل شيئًا آخر للعرض. يجب أن يتم التعامل مع المظهر المرئي بواسطة CSS (LESS). أيضًا ، بدلاً من مكونات React ، ربما تستخدم مكونات الويب بحيث يمكن للمطورين الذين لا يستخدمون React استخدامها بسهولة أكبر.

آمل أن أرى فصلًا كاملاً بين المنطق والعرض ، أي بخلاف التلاعب بأسماء الفئات ، فإن js لا تفعل شيئًا آخر للعرض. يجب أن يتم التعامل مع المظهر المرئي بواسطة CSS (LESS). أيضًا ، بدلاً من مكونات React ، ربما تستخدم مكونات الويب بحيث يمكن للمطورين الذين لا يستخدمون React استخدامها بسهولة أكبر.

أعتقد أن فكرة تنقية كل شيء لا معنى لها. من الأفضل التركيز على شيء أكثر أهمية.

أي خطط للتحديد المتعدد في الإكمال التلقائي ، مثل https://react-select.com؟

آمل أن أرى فصلًا كاملاً بين المنطق والعرض ، أي بخلاف التلاعب بأسماء الفئات ، فإن js لا تفعل شيئًا آخر للعرض. يجب أن يتم التعامل مع المظهر المرئي بواسطة CSS (LESS). أيضًا ، بدلاً من مكونات React ، ربما تستخدم مكونات الويب بحيث يمكن للمطورين الذين لا يستخدمون React استخدامها بسهولة أكبر.

أعتقد أن فكرة تنقية كل شيء لا معنى لها. من الأفضل التركيز على شيء أكثر أهمية.

لا أعتقد أن هناك مسألة أكثر إلحاحًا من الانفصال. في الفريق ، يتم التعامل مع CSS بشكل عام من قبل المصممين ، في حين أن JS عادة ما يتم بواسطة المبرمجين. سيؤدي السماح لكلا من التلاعب بالأسلوب إلى الفوضى وضياع وقت التطوير بلا داعٍ.

خذ Menu على سبيل المثال ، يتم تعيين العرض والارتفاع الافتراضيين بواسطة JS ، المشكلة هي أنه عندما يريد شخص ما تغيير عرض أو ارتفاع غلاف الغلاف الخارجي ، فإن القائمة إما ستظهر أو بها فجوات. سيتطلب ذلك إصلاح كل من المصمم والمبرمج ، مما يعني التوقف.

أيضًا ، كمكونات ، فإن الكود ليس معقدًا بشكل مفرط ، ولا ينبغي أن يتطلب الفصل الكثير من الجهد ، ولكن النتيجة ستجعل الحياة أسهل للمستخدمين ، وفريق التصميم نفسه.

مشكلة صغيرة أخرى ، تحتاج Icon إلى 16 بكسل ، وليس 14 بكسل ، وهو حجم الخط الافتراضي العام. هذا يعني أن الأيقونة يجب أن تستخدم متغيرات مثل @ default-icon-size و @ icon-size-lg وما إلى ذلك ، منفصلة عن النص. هذا ليس خطأ حقًا ، ولكنه ميزة مفقودة.

@ afc163
هل اعتبرت أن الأجانب يتبعون هذا الريبو؟ لسوء الحظ ، فإن ترجمة Google ليست أداة جيدة لفهم ما تقوله. أدرك أن معظم مطوري ومستخدمي Ant-Design صينيون ، لكن هل تعتبرون غير الصينيين أيضًا؟
لذلك أحثكم على استخدام اللغة الدولية لاحترامنا جميعًا.

يحق للأشخاص استخدام لغتهم الخاصة ويجب أن يشعروا بالراحة عند القيام بذلك ، وبقدر ما أحترم الجهود المبذولة لإشراك أكبر عدد ممكن من الجمهور من خلال توفير الترجمات ، لا ينبغي إعطاء أي شخص محاضرة لمجرد استخدام اللغة التي يرتاح لها أكثر و أن المشرف يفهم للتواصل. فكرة أن المساهمين الرئيسيين في هذا المشروع يجب ألا يستخدموا لغتهم الأم للتواصل لأن لغة أخرى متفوقة هي فكرة سخيفة. لا بأس في طلب الترجمات ، لكن باحترام. إن التصويت على الردود لأنها مكتوبة بالصينية يؤدي إلى نتائج عكسية وطفولية.

الرجال ، هل الإصدار 4.0 And Design يحتوي على JSS بدلاً من _Less_ لتوليد CSS؟

الرجال ، هل الإصدار 4.0 And Design يحتوي على JSS بدلاً من _Less_ لتوليد CSS؟

AFAIK ، لا. ولكن يمكنك محاولة استخدام المكونات المصممة (على سبيل المثال) بالإضافة إلى أقل.

شكرًا ، عزيزي @ tomgao365 ، لقد قمت بإنشاء المشكلة التي أشرت إليها. أريد عمل علاقات عامة رائعة لإزالة أقل تمامًا واستخدام JSS بدلاً من ذلك. العمل على الإصدار 3 ليس فكرة جيدة ، لأن العديد من المشاريع تم إنشاؤها باستخدام الإصدار 3 ، لذلك قررت العمل على تنفيذ JSS في الإصدار 4.

أيضًا ، لدي سؤال صغير ، عزيزي abenhamdine ، ما هي فكرتك حول استخدام JSS بدلاً من استخدام Less؟

أيضًا ، لدي سؤال صغير ، عزيزي abenhamdine ، ما هي فكرتك حول استخدام JSS بدلاً من استخدام Less؟

الفوائد الرئيسية بالنسبة لي:

  • تصفيف ديناميكي (ألم بأقل)
  • الإكمال التلقائي (لست متأكدًا من ذلك ، يعتمد على مكتبة الأدوات / JSS التي تستخدمها)
  • وراثة الأنماط

يستحق المحاولة.
لكنها ليست رصاصة فضية.

عزيزي abenhamdine ، لقد تركت مشكلة حصلت على شارة Discussion . إنها # 19181.

وأريد أن أبدأ في تنفيذ JSS وحذف Less ولكن هناك إصدار جديد قادم وأخشى أن تضيع كل جهودي.

يسعدني رؤية مناقشة حول استبدال moment.js ببعض البدائل مثل Day.js أو كائن التاريخ الأصلي هنا https://github.com/ant-design/ant-design/issues/19738

هل ستكون هناك طريقة أسهل لتغيير سمات الألوان باستخدام تطبيق create-react-app في الإصدار 4؟

أتفق مع flashtheman على أن تجاوز الموضوع دون الحاجة إلى العمل بمتغيرات أقل سيكون أمرًا رائعًا - أي شيء مثل ThemeProvider من العاطفة: https://emotion.sh/docs/theming

في عصر jQuery ، تحظى إعدادات السمة بشعبية كبيرة ويحب المستخدمون استخدامها.
لقد انتظرت طريقة سهلة لتعديل السمة في بيئة الإنتاج لأكثر من عامين.

في الإصدار الجديد من مكون الرمز ، إذا تم تحديد الرمز ديناميكيًا ، فكيف يجب التعامل معه في الإصدار الجديد؟ في الوقت الحالي ، لا يمكنني التفكير إلا في استخدام سلسلة متغيرة تتطلب +. اتضح أن سمة النوع فقط هي التي يجب ملؤها بالمتغيرات. هل هناك أي طريقة أخرى للتعامل معها؟
ترجمة google: في الإصدار الجديد من مكون الرمز ، إذا تم تحديد الرمز ديناميكيًا ، فعندئذٍ كيفية التعامل معه في الإصدار الجديد ، في الوقت الحالي لا يمكن إلا التفكير في سلسلة متغيرة تتطلب + ، يحتاج الأصل فقط لملء نوع السمة مع المتغيرات ، ما هي طرق المعالجة الأخرى؟

في الإصدار الجديد من مكون الرمز ، إذا تم تحديد الرمز ديناميكيًا ، فكيف يجب التعامل معه في الإصدار الجديد؟ في الوقت الحالي ، لا يمكنني التفكير إلا في استخدام سلسلة متغيرة تتطلب +. اتضح أن سمة النوع فقط هي التي يجب ملؤها بالمتغيرات. هل هناك أي طريقة أخرى للتعامل معها؟
ترجمة google: في الإصدار الجديد من مكون الرمز ، إذا تم تحديد الرمز ديناميكيًا ، فعندئذٍ كيفية التعامل معه في الإصدار الجديد ، في الوقت الحالي لا يمكن إلا التفكير في سلسلة متغيرة تتطلب + ، يحتاج الأصل فقط لملء نوع السمة مع المتغيرات ، ما هي طرق المعالجة الأخرى؟

حاول استخدام https://github.com/smooth-code/loadable-components الموصى به في وثائق React

متى ستصدر النسخة الرسمية؟

4.0 هل يدعم الجدول وظيفة Pivot؟

@ afc163 - يبدو أن تلوث النمط العالمي هو المشكلة رقم 1 التي يريدها الناس مع إصدار جديد. هل لديك شخص ما للعمل على هذا؟ سأكون سعيدًا للقيام بهذا العمل والمساعدة. لا ينبغي أن يكون الأمر صعبًا ، فقط سيستغرق بعض الجهد. أعاني أيضًا من هذه المشكلة مع Ant Design. أود حلها.

هل هناك أي عمل يتم القيام به لتقليل حجم المكون؟
لمرة واحدة: لماذا إذا أردت Button بسيطًا - لا بد لي من استيراد ملف antd.css بالكامل ؟؟

هل هناك أي عمل يتم القيام به لتقليل حجم المكون؟
لمرة واحدة: لماذا إذا أردت Button بسيطًا - لا بد لي من استيراد ملف antd.css بالكامل ؟؟

@ avalanche1 راجع https://ant.design/docs/react/introduce#Usage

استخدم antd نمطي

بالنسبة لي ، لا يكفي مكون التحميل لدعم عرض القائمة المخصصة في الوقت الحالي.
بالإضافة إلى ذلك ، فإن تقدم التحميل هو نسبة مئوية فقط ، وليس من الملائم التوسع لدعم عرض السرعة في الوقت الفعلي.

امين

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

إذا كنت تريد عرضًا سريعًا ، فقد أعاد onChange النسبة المئوية للملف الذي تم تحميله. يمكنك حساب سرعة التحميل.

@ Z3SA https://caniuse.com/#search = CSS٪ 20Variables. هذا يحتاج إلى إيقاف كل دعم IE ، وإيقاف دعم IE11 جذري للغاية ، على الرغم من أنني أؤيد أيضًا القيام بذلك.

لا يزال بإمكانك القيام بذلك مع الدعم الاحتياطي. على سبيل المثال: color: var(--red, @red); بحث / استبدال عام بسيط لجميع المتغيرات الحالية من شأنه أن يحل هذا.

هل يتم التفكير في إسقاط LESS لصالح SASS أو حل تصفيف أفضل آخر لـ v4 أم لا؟

murbanowicz ، مرحبًا ، شكرًا لتعليقك ، أترك مشكلة حول استخدام JSS بدلاً من Less وهنا ، أظهر استعدادي لهذه الهجرة ولكن لا أحد يظهر أي إجراءات.

مرحبًا zombieJ ، شكرًا لك على عملك الرائع في Ant Design؟ هل هناك أي خطط لتوفير طريقة خارج الصندوق لتبديل المظهر الداكن في التطبيق؟

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

shengliangli يشعر أن الاقتران قوي جدًا. . .

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

shengliangli يشعر أن الاقتران قوي جدًا. . .

أعتقد أن Form.Item هو مكون "إضافي" أضافه antd لتحقيق وظيفة ربط البيانات لمكون النموذج. هناك أسباب لهذا التطبيق ، ولكن بعد كل شيء ، تمت إضافة شيء إضافي. مثلما ينتقد الجميع مشكلة وجود الكثير من التعليمات البرمجية المعيارية في إعادة التشغيل ، قد لا يحب المطورون طريقة الكتابة هذه. إذا كان من الممكن فهم وظيفة ربط البيانات التي يتم تنفيذها بواسطة form.item على أنها خصائص مكونات الإدخال مثل الإدخال ، وذلك لتعزيز قدرة مكونات الإدخال ، فهل تشعر أنها طبيعية أكثر؟

فكرت أيضًا في مشكلة الاقتران ، وقد يكمن جذر المشكلة في كيفية تعريفنا لقدرات وخصائص سلوك مكونات المدخلات.

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

shengliangli يشعر أن الاقتران قوي جدًا. . .

أعتقد أن Form.Item هو مكون "إضافي" أضافه antd لتحقيق وظيفة ربط البيانات لمكون النموذج. هناك أسباب لهذا التطبيق ، ولكن بعد كل شيء ، تمت إضافة شيء إضافي. مثلما ينتقد الجميع مشكلة وجود الكثير من التعليمات البرمجية المعيارية في إعادة التشغيل ، قد لا يحب المطورون طريقة الكتابة هذه. إذا كان من الممكن فهم وظيفة ربط البيانات التي يتم تنفيذها بواسطة form.item على أنها خصائص مكونات الإدخال مثل الإدخال ، وذلك لتعزيز قدرة مكونات الإدخال ، فهل تشعر أنها طبيعية أكثر؟

فكرت أيضًا في مشكلة الاقتران ، وقد يكمن جذر المشكلة في كيفية تعريفنا لقدرات وخصائص سلوك مكونات المدخلات.

لا أوافق بشكل خاص. أعتقد أن Form.Item هو بشكل أساسي حزمة خارجية لمكون ، مثل سمات التسمية والعمود ، والتي لا تناسب حقًا المكونات المضمنة.

مرحبًاzombieJ
هل أنت مهتم بمعرفة موعد إصدار الإصدار 4؟
نتطلع الى الاستماع الى الوراء

كيف أساهم في التصميم أيضًا.
أتطلع لسماع شخص ما

الإصدار التجريبي متاح ، هل يعني أنه يمكنك البدء في استخدامه؟

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

بادئ ذي بدء ، عليك أن تعرف أنه لا علاقة له بما إذا كان مدمجًا أم لا. يمكن القول إن استخدام ما يسمى بالمكونات المدمجة قد يكون حادثًا
getFieldDecorator هو الجسر الذي يربط مكون النموذج ومكون الإدخال. يتم تمرير Form.item إلى السمتين value و onChange ، ثم يمر المكون المغلف value و onChange تتفاعل هاتان الطريقتان للواجهة مع العالم الخارجي. بمعنى آخر ، أي مكون طالما تم تطبيق value و onChange يمكن أن يصبح معلمات لـ getFieldDecorator .هذه هي الفكرة النموذجية لـ program to interface

ملاحظة: لم أقرأ الكود المصدري ، كل ما سبق هو تخميني بعد قراءة المستند

السبب الذي يجعل Form.Item يمكن أن يتفاعل مع Component لا علاقة له ببعض آليات "البناء" كما يتوقع شخص ما. إنها مجرد خدعة شائعة في عالم البرمجة تسمى program to interface

بشكل أساسي ، يتفق المكون Form والمكون الأساسي على شيء مثل value و onChange . هم بمثابة واجهة بين العالمين من أجل التواصل. إنه تصميم جيد لغرض الفصل

dancerphil ربما يمكنك توضيح الفكرة بشكل أكثر وضوحًا في الوثائق الرسمية

مرحبًا ، تم إصدار الإصدار 4 التجريبي من الإصدار التجريبي. واجهة برمجة التطبيقات مستقرة الآن مما يعني عدم حدوث تغيير جذري في واجهة برمجة التطبيقات ما لم تحدث مشكلة خطيرة. أثناء الإصدار التجريبي ، سيساعد المصممون في متابعة تعديل التصميم المرئي لواجهة المستخدم وسنركز على إصلاح الأخطاء. لا تتردد في المحاولة على ومساعدتنا في حريق حريق أو تغذية مرتدة.

شكرًا للجميع على المشاركة في البرمجة والمحاولة. مساعدتك تعني الكثير :)


مرحبًا بالجميع ، تم إطلاق الإصدار التجريبي. إذا لم يكن لواجهة برمجة التطبيقات مشاكل كبيرة في التصميم ، فلن يتم إجراء المزيد من التغييرات. في الإصدار التجريبي ، سيساعد المصممون في تعديل نمط واجهة المستخدم للإصدار 4 ، وسنركز على إصلاحات الأخطاء. مرحبًا بك لمساعدتنا في العثور على الأخطاء أو لديك أي ملاحظات أخرى.

شكرا لك على المشاركة في التطوير والعمل التجريبي. مساعدتك مفيدة جدا :)


المرجع: http://new-issue.ant.design/

كيف أساهم في التصميم أيضًا.
أتطلع لسماع شخص ما

ربما يشير @ ekeminimarkk001 إلى : https://ant.design/docs/react/contributing

zombieJ هل تم تنفيذ جميع التغييرات المذكورة في الإصدار في الإصدار التجريبي؟

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

بادئ ذي بدء ، عليك أن تعرف أنه لا علاقة له بما إذا كان مدمجًا أم لا. يمكن القول إن استخدام ما يسمى بالمكونات المدمجة قد يكون حادثًا
getFieldDecorator هو الجسر الذي يربط مكون النموذج ومكون الإدخال. يتم تمرير Form.item إلى السمتين value و onChange ، ثم يمر المكون المغلف value و onChange تتفاعل هاتان الطريقتان للواجهة مع العالم الخارجي. بمعنى آخر ، أي مكون طالما تم تطبيق value و onChange يمكن أن يصبح معلمات لـ getFieldDecorator .هذه هي الفكرة النموذجية لـ program to interface

ملاحظة: لم أقرأ الكود المصدري ، كل ما سبق هو تخميني بعد قراءة المستند

بعد قراءة ردودك ، يجب أن أقول إن اقتراحي لمكون شكل antd ليس ناضجًا جدًا ، ولكن من ناحية أخرى ، فإن تقديم هذا الاقتراح يفكر تمامًا في المشكلة من منظور المستخدم العادي. بالنسبة للمكون الذي يتمتع بكثافة استخدام عالية ، كيف يمكن أن يكون أكثر ملاءمة للتطوير والاستخدام ، وكتابة رمز أقل ، واستخدام تعبير أكثر وضوحًا وطبيعية ، هو توقعي المتحمس لـ antd.

من وجهة نظر المستخدم ، فإن antd جيد جدًا بالفعل ، ويمكن استخدام معظم المكونات بمجرد استخدامها ، ونسيانها عند استخدامها ، واستخدامها في المرة القادمة التي يريدون استخدامها. لا ينفصل سبب هذا التأثير عن التصميم الجيد لواجهة برمجة التطبيقات وتغليف المكونات ، ولكن لا تزال هناك بعض سيناريوهات الاستخدام للمكونات (مثل من ، الجدول) ، وهناك مجال لتحسين أفضل.

Antd هو مجرد مكون أداة في المشروع ، فمن الأفضل عدم الكشف عن آلية التنفيذ الخاصة به ، أو إخفاء واستيعاب آلية التنفيذ بذكاء في واجهة برمجة التطبيقات الخارجية. يريد المستخدمون فقط استخدام هذا المكون ، ويريدون استخدامه بالشكل الأكثر ملاءمة وطبيعية ، ولا يريدون أن يكونوا خبراء في مكون الأداة.

بالعودة إلى مكون النموذج ، تحت 3.x api الحالي ، أنا في الواقع أكثر استعدادًا لاستخدام uform الخاص بـ Ali. مقارنةً بالصيغة antd ، تحتاج uform إلى كتابة كود أقل وتكون أكثر إنتاجية. بطبيعة الحال ، تبدو uform أشبه بطريقة تصريحية للكتابة ، والتي تختلف تمامًا عن صيغة antd ، وقد لا يكون لها قيمة كبيرة للإشارة إليها.

بصفتك طرفًا جديدًا ، من المحرج بعض الشيء طرح الكثير من المتطلبات ، ولكن بسبب الحب ، أتمنى أن يكون ذلك أفضل ، وآمل أن يتفهم فريق المشروع ، وآمل في تحسين تطوير واستخدام تجربة المكون ضمن الإصدار المناسب. .

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.
webpack-bundle-analyzer.png
رقم الإصدار: 4.0.0-beta.0. يتم استخدام Babel-plugin-import و tree-shaking ، لكن لا فائدة منهما.

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.
webpack-bundle-analyzer.png
رقم الإصدار: 4.0.0-beta.0. يتم استخدام Babel-plugin-import و tree-shaking ، لكن لا فائدة منهما.

استخدم هذا التكوين

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

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.
webpack-bundle-analyzer.png
رقم الإصدار: 4.0.0-beta.0. يتم استخدام Babel-plugin-import و tree-shaking ، لكن لا فائدة منهما.

استخدم هذا التكوين

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

أشكركم على ردكم ، لكنني لم أعمل حسب التكوين الخاص بكم.

الإصدار: 4.0.0-beta.0
المشكلة: عندما يتم تبديل المكون الشرطي المرئي ، سيتم تمرير الصفحة وإعادة إنتاج العنوان:

xiaoxintang تم إصلاحه في الفرع الرئيسي ، في انتظار الدمج.

@ afc163 كيف أقوم بتثبيت antd4.0 beta

https://next.ant.design/ أغلق الخط

@ afc163 كيف أقوم بتثبيت antd4.0 beta

npm install [email protected]
أو
yarn add [email protected]

يبدو أن موقع المعاينة معطل. أحصل على خطأ " لم يتم العثور على

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 4.0 الجديد ، سيكون مكون النموذج أكثر ملاءمة للمطورين. رأيت مثالًا جديدًا ، لن يحتاج مكون Form.em الموجود أسفل مكون النموذج إلى استخدام getFieldDecorator بعد الآن. يعد هذا تحسينًا جيدًا للغاية ، ولكن لدي اقتراح أكثر جذرية: إزالة مكون Form.Item ، وزيادة تحسين تجربة كتابة التعليمات البرمجية ، وجعل الترميز أكثر تحديثًا. يتم نقل الوظائف الأصلية لمكون Form.em مباشرة إلى مكونات إدخال محددة (مثل Input ، DataPick ، ​​إلخ).
هذا لأخذ في الاعتبار أنه في معظم الحالات ، تستخدم النماذج المطورة مكونات الإدخال المضمنة لـ antd ، والتي تكون مؤهلة لتحقيق وظيفة مكون Form.Item من خلال تعزيز قدرات مكونات الإدخال ؛ ولحالات خاصة قليلة (مثل المستخدم الذاتي تحديد المكونات ، بعض مكونات الإدخال لا تريد أن تكون ملزمة بالنموذج) ، يمكنك توفير مكونات تغليف خاصة للتعليمات.
إن البحث عن antd ليس متعمقًا ، ويقترح فقط اقتراحات الاستئناف من منظور المستخدمين العاديين ، إذا كان هناك أي خطأ ، من فضلك Haihan.

يمكنك تجربة هذا: https://github.com/aweiu/ant-modifier

هل هناك أي تحسينات لتلوث النمط العالمي؟

هل هناك أي تحسينات لتلوث النمط العالمي؟

يبدو أن Antd لها بادئات ، إنها ليست تلوث.يمكن أن يحاول كود css الخاص بمشروعك استخدام وحدات css لحل مشكلة التلوث العالمي

هل هناك أي تحسينات لتلوث النمط العالمي؟

يبدو أن Antd لها بادئات ، إنها ليست تلوث.يمكن أن يحاول كود css الخاص بمشروعك استخدام وحدات css لحل مشكلة التلوث العالمي

حسنًا ، أنا أعرف هذه البادئة ، أعني تلوث جزء إعادة تعيين css العالمي ، وهو مشكلة التلوث الناجمة عن إدخال antd و css إلى إعادة الضبط في المشاريع القديمة.

هل هناك أي تحسينات لتلوث النمط العالمي؟

يبدو أن Antd لها بادئات ، إنها ليست تلوث.يمكن أن يحاول كود css الخاص بمشروعك استخدام وحدات css لحل مشكلة التلوث العالمي

لمزيد من التفاصيل ، يرجى الرجوع إلى مناقشة القضية في رابط الموقع الرسمي: 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

هل هناك خطة لترحيل تخطيط Antd Pro 4.0 من Antd Pro 4.0؟
لقد واجهت خطأ SiderMenu.js Icon.createFromIconfontCN في التخطيط الاحترافي عند ترحيل المشروع بنفسي. نظرًا لأن التبعية في التخطيط الاحترافي لا تزال الإصدار 3 ، لا أعرف كيفية تغيير التبعية. شخص ما يفهم ذلك سيعلمني

هل هناك خطة لترحيل تخطيط Antd Pro 4.0 من Antd Pro 4.0؟
لقد واجهت خطأ SiderMenu.js Icon.createFromIconfontCN في التخطيط الاحترافي عند ترحيل المشروع بنفسي. نظرًا لأن التبعية في التخطيط الاحترافي لا تزال الإصدار 3 ، لا أعرف كيفية تغيير التبعية. شخص ما يفهم ذلك سيعلمني

نظرًا لأن الأيقونة تم فصلها في 4.0 ، فإن الاستيراد يحتاج إلى تعديل ، يمكنك أن تأخذ next.ant.design لترى وثيقة API الأيقونية الحالية

شكرا لجميع مساهماتكم في الإصدار 4. إغلاق منذ إصدار 4.0.0-rc.0 : المرجع # 20661

هل StrictMode هدف؟ يحتاج السياق القديم إلى الترحيل https://github.com/ant-design/ant-design/issues/9870

هل يمكننا الاحتفاظ بكل من antd3 و antd4 في الريبو؟ لا يمكن التغيير في كل مكان حيث أن الريبو كبير جدًا وستتم إعادة كتابة قاعدة بيانات كاملة تقريبًا.
أيضًا إذا كانت الإجابة بنعم ، فهل يمكننا الاحتفاظ بـ antd3 CSS في global و antd4 CSS لبعض المجلدات فقط وأطفالها

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات