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

مصدر

zombieJ

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

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

15311

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

hk-ng في ١ يونيو ٢٠١٩

👍101 ❤13

ال 182 كومينتر

15311

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

hk-ng في ١ يونيو ٢٠١٩

👍101 ❤13

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

lcoder في ١ يونيو ٢٠١٩

تحضير ألفا 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

afc163 في ١ يونيو ٢٠١٩

👍1

فيما يلي بعض الاقتراحات حول 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:

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

这是我对 Ant4 的一些建议

关于`templateAreas`

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

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

关于依赖

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

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

关于图标

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

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

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

jas0ncn في ١ يونيو ٢٠١٩

👍47

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

ifiknew في ٢ يونيو ٢٠١٩

👍10

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

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

jas0ncn في ٢ يونيو ٢٠١٩

حول `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);

ملعب

muzea في ٢ يونيو ٢٠١٩

👍3 🚀1 😕1 🎉1 😄1

رائع

Huanglei2010 في ٣ يونيو ٢٠١٩

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

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

zachguo في ٤ يونيو ٢٠١٩

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

fwh1990 في ٥ يونيو ٢٠١٩

👎2

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

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

orecus في ٥ يونيو ٢٠١٩

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

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

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

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

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

muzea في ٥ يونيو ٢٠١٩

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

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

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

شكر.

bend-up في ٥ يونيو ٢٠١٩

👍6

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

faradaytrs في ٦ يونيو ٢٠١٩

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

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

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

muzea في ٦ يونيو ٢٠١٩

👎1

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

wangjianio في ٩ يونيو ٢٠١٩

👍30 😕3

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

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

abenhamdine في ٩ يونيو ٢٠١٩

👍6

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

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

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

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

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

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

sbusch في ١١ يونيو ٢٠١٩

سؤال آخر:

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

sbusch في ١١ يونيو ٢٠١٩

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

iamvanja في ١٢ يونيو ٢٠١٩

👎7 👍6

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

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

kaiyoma في ١٥ يونيو ٢٠١٩

👍5

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

wanliyunyan في ١٩ يونيو ٢٠١٩

👍6 🎉5 😄5 👎4

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

and-semakin في ٢٠ يونيو ٢٠١٩

👍10

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

cztflove في ٢٦ يونيو ٢٠١٩

👎1 👍1

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

yoyo837 في ٢٦ يونيو ٢٠١٩

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

cztflove في ٢٦ يونيو ٢٠١٩

👍2

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

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

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

asharamseervi في ٢٩ يونيو ٢٠١٩

👍8 😕1

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

说得对，专心说中文吧

faradaytrs في ٣٠ يونيو ٢٠١٩

👍2

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

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

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

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

Z3SA في ٢ يوليو ٢٠١٩

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

yoyo837 في ٢ يوليو ٢٠١٩

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

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

Z3SA في ٢ يوليو ٢٠١٩

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

wanliyunyan في ٣ يوليو ٢٠١٩

👍2

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

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

dancerphil في ٣ يوليو ٢٠١٩

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

yoyo837 في ٣ يوليو ٢٠١٩

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

wanliyunyan في ٣ يوليو ٢٠١٩

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

Z3SA في ٣ يوليو ٢٠١٩

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

jmackay-hippocmms في ٦ يوليو ٢٠١٩

👍6

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

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

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

jmackay-hippocmms في ٦ يوليو ٢٠١٩

👍3

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

jeessy2 في ١٠ يوليو ٢٠١٩

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

fxxjdedd في ١٦ يوليو ٢٠١٩

👍4

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

ViktorAksionov في ١٧ يوليو ٢٠١٩

👍24

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

XUANLANcognition في ١٨ يوليو ٢٠١٩

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

rafaelodassi في ١٩ يوليو ٢٠١٩

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

ztplz في ٢١ يوليو ٢٠١٩

🎉1

ستكون الترقية إلى @babel/runtime@7 و core-js@3 أولويتنا أيضًا.

afc163 في ٢٢ يوليو ٢٠١٩

🎉3

ليس v3؟ هل هناك أي أخبار عن core-js@4 ؟

yoyo837 في ٢٢ يوليو ٢٠١٩

😄1

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

سألتزم بـ

filipjnc في ٢٣ يوليو ٢٠١٩

👍10 👎4

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

cc zombieJ

SergeyVolynkin في ٢٥ يوليو ٢٠١٩

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

redclown في ٢٧ يوليو ٢٠١٩

👍1

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

fwh1990 في ٢٧ يوليو ٢٠١٩

👍1

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

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

_{مرسلة مع GitHawk}

jas0ncn في ٢٨ يوليو ٢٠١٩

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

akaguny في ٢٩ يوليو ٢٠١٩

👍7

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

ztplz في ٣٠ يوليو ٢٠١٩

👍2

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

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

fwh1990 في ٣١ يوليو ٢٠١٩

👀1

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

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

Airkro في ١ أغسطس ٢٠١٩

❤1

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

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

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

xyy94813 في ١ أغسطس ٢٠١٩

👍2

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

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

FuJuntao في ٢ أغسطس ٢٠١٩

👍5

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

حلها في

Kwei9 في ٦ أغسطس ٢٠١٩

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

zombieJ في ٦ أغسطس ٢٠١٩

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

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

Kwei9 في ٦ أغسطس ٢٠١٩

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

ChuckJonas في ٧ أغسطس ٢٠١٩

👍16 ❤4 👎1

لحظة كبيرة جدًا بالنسبة لمشروع الواجهة الأمامية ، هناك العديد من البدائل ، لكن دعائم 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 。

xxyuk في ٨ أغسطس ٢٠١٩

👍34 ❤12

سيتم * إهمال * طريقة استخدام الرمز القديم:
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 في ١٤ أغسطس ٢٠١٩

👍4

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

vagusX في ١٤ أغسطس ٢٠١٩

👍1

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

avalanche1 في ١٤ أغسطس ٢٠١٩

😕1

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

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

ppbl في ١٤ أغسطس ٢٠١٩

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

vagusX في ١٤ أغسطس ٢٠١٩

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

avalanche1 في ١٥ أغسطس ٢٠١٩

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

orzyyyy في ١٦ أغسطس ٢٠١٩

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

zombieJ في ١٦ أغسطس ٢٠١٩

👍3

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

vagusX في ١٦ أغسطس ٢٠١٩

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

avalanche1 في ١٦ أغسطس ٢٠١٩

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

jeessy2 في ١٨ أغسطس ٢٠١٩

👍2

بالنسبة لـ 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 />;

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

zombieJ في ١٩ أغسطس ٢٠١٩

👍6

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

لن يكون Moment.js قابلًا للاهتزاز المعقدة . (سيحتاجون إلى إعادة كتابتها من الصفر). انها ضخمة في سماء المنطقة لantd والمستخدمين.
يعد Ant Design v4 إصدارًا رئيسيًا به بعض التغييرات بالفعل. الان هو الوقت!
أقترح عدم استبدالها بمكتبة أخرى. قد تستخدم Antd شيئًا صغيرًا مثل dayjs أو date-fns داخليًا ولكن يجب أن تقبل كائنات أو سلاسل Date لمكوناتها.

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

:الكلب:

onury في ٢١ أغسطس ٢٠١٩

👍38 👀1 ❤1 👎1

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

Liu-Ya في ٢١ أغسطس ٢٠١٩

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

ArthurBrito في ٢١ أغسطس ٢٠١٩

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

zombieJ في ٢١ أغسطس ٢٠١٩

👍9 ❤4

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

khryshyn في ٢٤ أغسطس ٢٠١٩

👎3 👍1

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

hengkx في ٢٤ أغسطس ٢٠١٩

👍1

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

zoffyzhang في ٢٦ أغسطس ٢٠١٩

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

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

hannaofsweden في ٤ سبتمبر ٢٠١٩

👍1

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

wattlebird في ٩ سبتمبر ٢٠١٩

هل هناك فرصة لنقل وثائق ألفا إلى موقع توثيق Ant العادي؟
يقوم صاحب العمل بحظر مجالات Netlify وأفترض أن الآخرين قد يفعلون ذلك أيضًا.

لماذا ا؟ هههه

lu-zen في ١٠ سبتمبر ٢٠١٩

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

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

z5829984520 في ١١ سبتمبر ٢٠١٩

👍3

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

murbanowicz في ١٨ سبتمبر ٢٠١٩

👍5 👎1

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

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

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

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

filipjnc في ١٩ سبتمبر ٢٠١٩

👍1

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

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

abenhamdine في ١٩ سبتمبر ٢٠١٩

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

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

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

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

murbanowicz في ١٩ سبتمبر ٢٠١٩

👍6

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

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

abenhamdine في ١٩ سبتمبر ٢٠١٩

👍3

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 بالفعل إلى بعض العمل لجعل تجربة التخصيص أسهل ؛)

pybuche في ١٩ سبتمبر ٢٠١٩

👍4

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

zombieJ في ٢٠ سبتمبر ٢٠١٩

zombieJ حسنًا ، rc-select .

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

filipjnc في ٢٠ سبتمبر ٢٠١٩

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

zkwolf في ٢٥ سبتمبر ٢٠١٩

👎1

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

سي سي vagusX

afc163 في ٢٥ سبتمبر ٢٠١٩

👎1

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

avalanche1 في ٣٠ سبتمبر ٢٠١٩

👍1

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

avalanche1 في ٣٠ سبتمبر ٢٠١٩

👍1

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

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

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

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

لقد اخترت 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 في ٤ أكتوبر ٢٠١٩

👍13 ❤2 🎉1

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

ArthurBrito في ٤ أكتوبر ٢٠١٩

👍3

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

jlarmstrongiv في ٤ أكتوبر ٢٠١٩

كما تعلم ، فإن تصميم النمل لا يعمل بشكل جيد حقًا من حيث إمكانية الوصول. هذا ليس مرئيًا جدًا على السطح بالنسبة لغالبية الناس ، ولكنه يمثل مشكلة كبيرة عندما تغوص بشكل أعمق. شاهد كيف يسجل تصميم النمل نتائج سيئة للغاية هنا: 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
تعد إمكانية الوصول مهمة لبعض المستخدمين ، ولكن الأداء مهم لعدد أكبر من المستخدمين.

abenhamdine في ٥ أكتوبر ٢٠١٩

👀1

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

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

alexchen1875 في ٨ أكتوبر ٢٠١٩

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

zombieJ في ٨ أكتوبر ٢٠١٩

👍2 ❤1

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

jinliming2 في ٩ أكتوبر ٢٠١٩

👍7 👎1

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

afc163 في ١٠ أكتوبر ٢٠١٩

👎1

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

itlangzi في ١٤ أكتوبر ٢٠١٩

👎1

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

timkindberg في ١٨ أكتوبر ٢٠١٩

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

zkwolf في ١٩ أكتوبر ٢٠١٩

👎1

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

Nokecy في ٢٣ أكتوبر ٢٠١٩

👎1

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

akaguny في ٢٣ أكتوبر ٢٠١٩

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

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

swaitw في ٢٤ أكتوبر ٢٠١٩

👎1

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

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

fatelei في ٢٤ أكتوبر ٢٠١٩

👍6 👎1

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

wanliyunyan في ٢٤ أكتوبر ٢٠١٩

👎3

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

lvlohammadi في ٢٤ أكتوبر ٢٠١٩

👍19 ❤7 👎6

مرحبا،
كنت أرغب في تجربة 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 في ٢٤ أكتوبر ٢٠١٩

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

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

zombieJ في ٢٤ أكتوبر ٢٠١٩

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

yoyo837 في ٢٥ أكتوبر ٢٠١٩

❤12

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]"

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

gynekolog في ٢٥ أكتوبر ٢٠١٩

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

GuichiZhao في ٢٥ أكتوبر ٢٠١٩

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

thj-dk في ١ نوفمبر ٢٠١٩

👍1

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

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

abenhamdine في ١ نوفمبر ٢٠١٩

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

yeegr في ٤ نوفمبر ٢٠١٩

👎2

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

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

faradaytrs في ٥ نوفمبر ٢٠١٩

👍7

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

nite في ٥ نوفمبر ٢٠١٩

👍3 👀1

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

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

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

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

yeegr في ٧ نوفمبر ٢٠١٩

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

yeegr في ٧ نوفمبر ٢٠١٩

👀1 🚀1

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

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

viztor في ٩ نوفمبر ٢٠١٩

👍21 👎1

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

amerllica في ١٣ نوفمبر ٢٠١٩

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

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

abenhamdine في ١٣ نوفمبر ٢٠١٩

👍2

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

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

amerllica في ١٣ نوفمبر ٢٠١٩

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

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

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

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

abenhamdine في ١٣ نوفمبر ٢٠١٩

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

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

amerllica في ١٦ نوفمبر ٢٠١٩

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

xxyuk في ١٦ نوفمبر ٢٠١٩

😄2

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

flashtheman في ١٦ نوفمبر ٢٠١٩

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

hsz في ١٦ نوفمبر ٢٠١٩

👍2

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

tomgao365 في ١٧ نوفمبر ٢٠١٩

👍4 👎3

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

thding في ٢١ نوفمبر ٢٠١٩

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

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

jinliming2 في ٢١ نوفمبر ٢٠١٩

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

guangming21 في ٢٢ نوفمبر ٢٠١٩

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

liuhaidi1209 في ٢٨ نوفمبر ٢٠١٩

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

meebix في ٢٩ نوفمبر ٢٠١٩

👍9

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

avalanche1 في ٢٩ نوفمبر ٢٠١٩

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

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

استخدم antd نمطي

jinliming2 في ٣٠ نوفمبر ٢٠١٩

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

codetalks-new في ٣ ديسمبر ٢٠١٩

امين

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

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

muzea في ٣ ديسمبر ٢٠١٩

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

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

davidpanzarella في ٥ ديسمبر ٢٠١٩

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

murbanowicz في ٨ ديسمبر ٢٠١٩

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

amerllica في ٨ ديسمبر ٢٠١٩

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

veeral-patel في ٨ ديسمبر ٢٠١٩

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

shengliangli في ١٠ ديسمبر ٢٠١٩

👎8

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

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

jinliming2 في ١٠ ديسمبر ٢٠١٩

👎1

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

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

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

shengliangli في ١١ ديسمبر ٢٠١٩

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

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

dancerphil في ١١ ديسمبر ٢٠١٩

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

madurak في ١١ ديسمبر ٢٠١٩

👀2

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

ekeminimarkk001 في ١٢ ديسمبر ٢٠١٩

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

fwh1990 في ١٢ ديسمبر ٢٠١٩

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 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

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

GuichiZhao في ١٢ ديسمبر ٢٠١٩

👍1

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

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

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

GuichiZhao في ١٢ ديسمبر ٢٠١٩

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

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

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

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

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

zombieJ في ١٢ ديسمبر ٢٠١٩

🎉9 ❤5 🚀3

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

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

jinliming2 في ١٢ ديسمبر ٢٠١٩

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

zachguo في ١٢ ديسمبر ٢٠١٩

اقتراح حول مكون النموذج:
يسعدني جدًا أن أرى أنه في الإصدار 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 ، وقد لا يكون لها قيمة كبيرة للإشارة إليها.

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

shengliangli في ١٢ ديسمبر ٢٠١٩

👍3 👎1

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.

رقم الإصدار: 4.0.0-beta.0. يتم استخدام Babel-plugin-import و tree-shaking ، لكن لا فائدة منهما.

Xezzon في ١٤ ديسمبر ٢٠١٩

👀2 👍1

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.

رقم الإصدار: 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',
                                    ],
                                ],
                            },
                        },
                    ],
                },

RavilM في ١٥ ديسمبر ٢٠١٩

غريب جدا. لم أستخدم Icon على الإطلاق ، لكنني جمعت كل الرموز svg فيه.

رقم الإصدار: 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',
                                    ],
                                ],
                            },
                        },
                    ],
                },

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

Xezzon في ١٦ ديسمبر ٢٠١٩

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

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

xiaoxintang في ١٦ ديسمبر ٢٠١٩

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

shaodahong في ١٦ ديسمبر ٢٠١٩

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

XianZhengquan في ١٨ ديسمبر ٢٠١٩

👎2

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

githubmann في ١٨ ديسمبر ٢٠١٩

👀7

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

npm install antd@next
أو
yarn add antd@next

fwh1990 في ١٨ ديسمبر ٢٠١٩

👍1

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

shaoran في ١٨ ديسمبر ٢٠١٩

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

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

aweiu في ٢١ ديسمبر ٢٠١٩

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

k644606347 في ٢٦ ديسمبر ٢٠١٩

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

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

fwh1990 في ٢٧ ديسمبر ٢٠١٩

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

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

k644606347 في ٢٨ ديسمبر ٢٠١٩

هل هناك أي تحسينات لتلوث النمط العالمي؟
يبدو أن 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

k644606347 في ٢٨ ديسمبر ٢٠١٩

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

wushizhan في ٤ يناير ٢٠٢٠

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

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

zkwolf في ٦ يناير ٢٠٢٠

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

zombieJ في ٩ يناير ٢٠٢٠

👍2

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

ntucker في ١٠ يناير ٢٠٢٠

👍2

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

prateekrastogi في ٢٥ يناير ٢٠٢٠

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

Ekta398 في ١١ سبتمبر ٢٠٢٠

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات

القضايا ذات الصلة

لا يتم عرض checkboxgroup إذا تم تعيين القيمة بواسطة form.setFieldsValue

AhmedSayed77 · 3تعليقات

هل يمكن جدولة onChange لعنصر تحكم النموذج بعد onFieldsChange

yangbin1994 · 3تعليقات

مسح الإكمال التلقائي بعد إرسال النموذج

shivekkhurana · 3تعليقات

في index.js ، لماذا تظهر رسالة antd بأحرف صغيرة والمكونات الأخرى كلها أحرف كبيرة؟

kevyu · 3تعليقات

اختيار شجرة

longhuasishen · 3تعليقات

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

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

خلاصة

🌓 حول التوافق

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

أوقف دعم IE9 / 10

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

📦 تصغير الحجم

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

إزالة Draft.js

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

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

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

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

شكل

الطاولة

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

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

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

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

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

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

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

معالم

س 2

س 3

س 4

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

المقدمة

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

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

أوقف دعم IE9 / 10

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

📦 تقليل الحجم

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

إزالة Draft.js

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

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

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

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

مكون النموذج

مكون الجدول

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

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

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

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

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

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

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

خطة زمنية

س 2

س 3

س 4

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

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

15311

ال 182 كومينتر

15311

تحضير ألفا V4

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

متابعة الهدف

حوالي templateAreas

حول التبعية

حول أيقونة

关于templateAreas

关于 依赖

关于 图标

حول templateAreas

15311

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

:الكلب:

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

القضايا ذات الصلة

حوالي `templateAreas`

关于`templateAreas`

关于依赖

关于图标

حول `templateAreas`