Ant-design: [email protected]

محدث.

محدث.

https://github.com/ant-design/ant-design/issues/5140 يمكن أن يكون ملعبًا قابلاً للتعديل.

ربما يكون حجم الخط الافتراضي أكبر ، وفقًا لخطة المصمم لدينا.

المعامل cloneElement إلى context ؟

1. قائمة طعام
2. نوافذ التبويب

إعادة فتح # 1473؟

ما زلت آمل في الحصول على دعم i18n مدمج أكثر قوة https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

تحسين وإكمال تعريف المكون ts تعليق؟

ماذا عن أدوات 2> 3 أو حتى 1> 3؟

yesmeck هذا https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 يعني أننا بحاجة إلى التخلي عن Tabs.TabPane[key] و Menu.Item[key] ...

ما زلت آمل في الحصول على دعم i18n مدمج أكثر قوة # 5554 (تعليق)

plandem أقوم

تحسين وإكمال تعريف المكون ts تعليق؟

infeng لهذا السبب أريد إعادة كتابة العرض التوضيحي في TypeScript ، حتى نتمكن من ملاحظة المشكلات في التعريف https://github.com/ant-design/ant-design/issues/5390

ماذا عن أدوات 2> 3 أو حتى 1> 3؟

نعم ، ما زلنا بحاجة إلى توفير أدوات مثل https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773 ، على الرغم من أنه ليس حلاً مثاليًا

sorrycc ما رأيك في webpack@2 ؟

أي تقدم بشأن محرر النص الغني؟ # 1083

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

قد لا يكون المحرر في خطتنا الأخيرة في الوقت الحالي.

يجب مناقشة ThemeProvider في https://github.com/ant-design/ant-design/issues/5656

لكني لست متأكدًا مما إذا كان لدينا الوقت لتقديمه إلى [email protected] .

إضافة ميزة جديدة للرسم البياني
مثل فطيرة ، هيسجرام إلخ.

إضافة ميزة جديدة للرسم البياني
أنا ضدها. إنها فئة مختلفة من المكونات.

إذا كنت تريد مخططات من نفس الفريق ، يمكنك تجربة هذا:
https://antv.alipay.com/index.html

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

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

Jesper نحن أعتقد أن ما تحتاجه هو Layout.Sider

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

ولكن يمكن تمديده ليعمل مثل الشريط الجانبي مع بعض الدعائم الجديدة:

• cover: true لإظهاره أعلى محتوى الصفحة بدلاً من الضغط عليه.
• mask: true لإظهار قناع على الجزء غير المغطى من الصفحة عندما يكون Sider في الأعلى.
• maskCloseable: true لجعله ينهار عند النقر بالخارج.

وأخيراً في عالم الأحلام

• swipeable: true لدعم الأجهزة التي تعمل باللمس بشكل أفضل (ولكن نظرًا لأنك تفكر على الأرجح في antd كشيء سطح مكتب ، فيمكن تحقيق ذلك خارج antd أيضًا).

benjycuiJesperWe في Layout.Sider تجريبي، والحصول على تقلص المحتوى (التي هي سيئة) عندما يفتح سدر في الجوال.

هل من الممكن دفع المحتوى إلى اليمين أيضًا؟ أو وضع Sider فوق المحتوى؟

تغيير جديد آخر أريد القيام به في الإصدار الرئيسي التالي ، وأريد منك تقديم المشورة: https://github.com/ant-design/ant-design/issues/6139

JesperWe حسنًا ، ما تحتاجه هو شيء مثل Drawer .

ويجب ألا نناقش تفاصيل الميزات هنا ، فقط افتح عددًا جديدًا للمناقشة.

benjycui حسنًا ، لذا أعيد صياغة حلمي 3.0 :-): شيء مثل الدرج مدمج في antd (لأن إضافة antd-mobile / Drawer تجعل الحزمة أكبر بكثير وتضيف الكثير من العناصر الأصلية غير المرغوب فيها)

قارن النتائج واعتبر التراكمي كمكتبة.

إليك بعض الأفكار:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

قارن النتائج واعتبر التراكمي كمكتبة.

يمكننا القيام بذلك في 2.x ، لأن المطورين لن يشعروا بأي تغييرات.

ويمكنك فتح عدد جديد لمناقشة هذه الفكرة plandem

حاول استبدال أقل بـ https://github.com/styled-components/styled-components

حول المكونات المصممة ، لدي مشاكل أيضًا:

• مكتبة autoprefixer قد لا تكون موثوقة للغاية مقارنة بالملفات postcss https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. أو يمكننا القول ، بمجرد اختيار css-in-js ، سنفقد ملاءمة نظام المكون الإضافي post-css ، مثل px-to-rem؟
• علينا أن نظل اسم فئة css الحالي بالكامل من أجل التوافق ، بينما ستنشئ المكونات المصممة اسم فئة خاص بها للأسلوب ، سيكون تكرارًا ويصعب الحفاظ عليه؟

هذا هو السبب في وجود try ، التوافق مشكلة كبيرة علينا أخذها في الاعتبار.

علينا أن نظل اسم فئة css الحالي بالكامل من أجل التوافق ، بينما ستنشئ المكونات المصممة اسم فئة خاص بها للأسلوب ، سيكون تكرارًا ويصعب الحفاظ عليه؟

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

paranoidjk @ afc163benjycui

مرحبًا ، أنا أحد المساهمين الأساسيين في المكونات المصممة ووجدت هذا الموضوع بسبب مشكلة مفتوحة في الريبو الخاص بنا (انظر أعلاه) ، والتي أبلغتني أن هذا lib لا يدعم SC. بالصدفة وجدت هذه المحادثة: غمزة: - حسنًا ، ضع السياق جانباً الآن

قد لا تكون مكتبة المصفف التلقائي موثوقة جدًا مقارنةً بالرسائل اللاحقة

لقد اخترنا بعناية stylis ونعمل عن كثب مع thysultan ، الذي يطورها. لم نكن لنختاره ، إذا لم يكن بديلاً مناسبًا لـ PostCSS وتم حل المشكلات القليلة التي كانت بها (بضع بادئات مفقودة في الإصدار 3) بسرعة كبيرة. الإصدار 2 نفسه كان قيد الإعداد لبضعة أشهر بالمناسبة ، وهو الآن في النهاية. يمكننا بالتأكيد أن نشهد على هذا الجزء. اجعل تفاصيل التنفيذ مصدر قلقنا ، إذا ذهبت مع SC: ابتسم:

الملف الذي تشير إليه ليس قيد الاستخدام وتم حذفه الآن بالمناسبة ، وهو جزء من البادئة التلقائية القديمة ببادئة النمط المضمنة. ولكن حتى هذا (وكان بالنسبة لنا) حلاً موثوقًا به للغاية من خلال مجتمع css-in-js بواسطةrofrischmann.

أو يمكننا القول ، بمجرد اختيار css-in-js ، سنفقد ملاءمة نظام المكون الإضافي post-css ، مثل px-to-rem؟

نظرًا لأنه في عمليات الإقحام في القوالب الحرفية ذات العلامات ، يمكنك فقط استخدام أي JS ، يمكن للوظائف البسيطة أن تحل محل كل تلك الأشياء. لدينا في الواقع مشروع منفصل يسمى "مصقول" يشبه اللوداش لـ CSS-in-JS ويأتي مع جميع mixins (أي الوظائف المساعدة) التي تتوقعها من SASS / LESS وما شابه: https: // مصقول. js.org

(نحن في الواقع لم نعد نستخدم PostCSS كما هو مذكور أعلاه ، ولم ندعم المكونات الإضافية بالمناسبة)

علينا أن نظل اسم فئة css الحالي بالكامل من أجل التوافق ، بينما ستنشئ المكونات المصممة اسم فئة خاص بها للأسلوب ، سيكون تكرارًا ويصعب الحفاظ عليه؟

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

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

بعض الأشياء الجيدة والميزات:

• أنت تكتب CSS فقط (كما تعلم بالفعل) ، والإضافات الوحيدة هي علامات العطف والتداخل
• لا توجد أنماط + تخطيط للمكونات
• كل شيء مكون
• يمكنك كتابة مزيج / أنماط مشتركة مع مساعدنا css

أنا هنا إذا كنت بحاجة إلى مزيد من المساعدة. إذا كنت بحاجة إلى مزيد من المعلومات ، فتحقق من موقعنا الجديد: 100: https://styled-components.com

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

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

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

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

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

أنا ثاني philpl - من فضلك اجعل التصميم أسهل كثيرًا في Ant Design. إنه ألم حقيقي حاليًا. styled-components مذهل.

أعتقد أنه يمكننا حل هذه المشكلة في نفس الوقت https://github.com/ant-design/ant-design/issues/4998 ، إذا قمنا بإعادة البناء إلى styled-component .

ملاحظة: هذا لا يعني أن styled-component يمكنه حل هذه المشكلة ، فقط لأننا نستطيع القيام بذلك في نفس الوقت لتقليل العمل.

محدث:

هذه هي الطريقة التي أصمم بها تصميم النمل حاليًا في مشروع React. إنه ليس الأعظم ، لأننا يجب أن نمر بمكتبة _entire_ Ant Design ونصمم كل شيء. لا أريد أن أزعج مع معالج أقل في create-react-app ، لأنه نوع من الألم.

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

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

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

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

const defaultTheme = mainTheme;

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

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

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

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

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

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

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

export default defaultTheme;

إذا كان Ant Design متوافقًا مع styled-components ، فحينئذٍ يمكننا فقط تغليف التطبيق بـ <ThemeProvider theme={primaryTheme}> وسيتم تصميمه وفقًا لذلك.

أود فقط أن أرمي fela بواسطة rofrischmann كبديل للمكونات المصممة. أكثر نمطية وأسرع. لديها الكثير من الميزات وبصمة صغيرة . أيضًا ، قررت cloudflare بناء واجهة المستخدم الخاصة بها معها بدلاً من المكونات المصممة.

أيا كان ما تقرره يا رفاق ، سأكون سعيدًا حقًا لرؤية استخدام بعض حلول css-in-js بدلاً من أقل.

styled-components خيارًا أفضل لبناء مكونات واجهة مستخدم حديثة وقابلة للتطوير.
والأهم من ذلك ، يمكن أن يجعل المكون يعرض بشكل مستقل دون أي ملف css خارجي.
التي تجعل الاستيراد الجزئي للمكون مع الحد الأدنى من الأنماط المطلوبة ممكنًا.
نأمل أن [email protected] سوف تستخدمه.

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

MustafaHosny اللهم امين يارب

cc nikogu

أضف # 4853؟

أضف # 4853؟

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

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

سيكون تغييرًا جذريًا ، ولكن يمكن حل هذا النوع من التغيير الفاصل عن طريق

يمكننا الاستمرار في المناقشة في # 4853

أعد كتابة العرض التوضيحي في TypeScript

هل سيتم كتابة العرض التوضيحي فقط أو كلاهما JS و Typescript؟ اتمنى الاحتفاظ بكليهما

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

تأكد من أن rc-trigger يعمل مع React 16.

هل لا يزال الحل styled-components أو حل css-in-js لاختيار المشرفين / المتعاونين خيارًا؟
أحب ذلك وأرغب في المساعدة في إعادة البناء :)

عدد كبير جدًا من الأعمال لترحيل ملفاتنا الأقل إلى مكونات نمطية ، أخشى أننا لن نقدم مكونات نمطية في antd 3. ولكن نظرًا لأن المكونات المصممة يمكنها تطبيق أنماط على مكون antd دون التطفل على كود antd ، لذلك إذا كان أحدهم مهتمًا في استخدام المكونات المصممة مع antd ، إليك مثال https://github.com/yesmeck/styled-antd

codepunktyesmeck أحب أن أرى أمثلة antd مع براقة

yesmeck @ afc163 ماذا عن الانتقال إلى JSS لـ CSS-in-JS؟
هل تعتقد أن المزايا المذكورة هنا يمكن أن تجعلها أكثر جدوى من المكونات المصممة ؟

ربما يكون الأمر أكثر ارتباطًا بالنظام البيئي للأدوات ، ولكن قد يكون من الجيد التأكد من أن antd 3.0 يعمل بشكل جيد مع babel 7.
خاصة مع الجيل المدمج في برنامج Babel من النوع الذي تم التخطيط له في 7.0.
يمكن أن يبسط استخدام antd / typecript إلى حد كبير باستخدام تطبيق create-reaction-response

ضع في اعتبارك إسقاط الدعم لـ IE6-8 ، وربما حتى جميع الإصدارات أدناه IE11.

سيؤدي ذلك إلى جعل ملف css أقل حجمًا وأسرع في التنزيل. React لا يدعم IE حتى الإصدار 9 لذلك يمكن إزالة clearfix و -ms-filter وما إلى ذلك بأمان.

النمل يدعم رسميا فقط IE9 +

يوم الخميس ، 12 أكتوبر 2017 الساعة 7:58 صباحًا ، أندرياس سيدرستروم <
[email protected]> كتب:

ضع في اعتبارك إسقاط الدعم لـ IE6-8 ، وربما حتى جميع الإصدارات أدناه IE11.

سيؤدي ذلك إلى جعل ملف css أقل حجمًا وأسرع في التنزيل. رد الفعل لا
حتى دعم IE أدناه الإصدار 9 لذلك يمكن أن يكون clearfix ، -ms-filter وما إلى ذلك بأمان
إزالة.

-
أنت تتلقى هذا لأنك مشترك في هذا الموضوع.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

حسنا. تحقق من أن antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) يحتوي على بعض الاختراقات IE6-8 التي يجب إزالتها بعد ذلك.

مثال:

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

.clearfix {
  zoom: 1;
}

andriijas أعتقد أنه تمت إزالته في antd-3.0 ، إذا كنت لا تزال ترى أي اختراق ، فقط PR لإزالته ، شكرًا.

لدي مشكلة كبيرة مع المكونات المصممة وشكل antd. عندما أقوم بلف مكونات النموذج التي تم تزيينها باستخدام fieldDecorator في غلاف مصمم بمكونات على غرار ، تتوقف حقول النموذج عن العمل. لا أفهم هذه المشكلة حقًا ولكن لا بد لي من لفها بـ <div> مع الأنماط المضمنة لجعلها تعمل. هذا أمر مزعج حقًا ...

محدد الأسبوع !!!

malekjaroslav التي قد تكون مرتبطة باستخدام غير صحيح. هل يمكنك فتح مشكلة في الريبو للمكونات المصممة ، حتى أتمكن من مساعدتك؟

benjycui ما رأيك في المساعد المستجيب في antd3.0؟ شيء من هذا القبيل https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss في رد الفعل

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

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

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

يمكنني تقديم العلاقات العامة لأول مرة إذا كنت بحاجة إلى مساعدة ولكن سأحتاج إلى مساعدة في ترجمة الوثائق وما إلى ذلك.

andriijas فقط استخدم https://github.com/contra/react-responsive . نضيف فقط مكون واجهة المستخدم الذي يتبع مواصفات تصميم النمل إلى antd. على كل حال شكرا 😄

نعم ، لقد رأيته في مستودع ant-design-pro. سأصنع غلافًا بنقاط توقف من antd.

نتطلع إلى هذا الإصدار!

مرحبًا بالجميع ، لقد أصدرت للتو [email protected] ، راجع https://github.com/ant-design/ant-design/issues/8233

إنني أتطلع إلى إصدار الإصدار الجديد ، لأنني لا أستطيع البدء في استخدام مكونات antd pro إلا عندما يخرج. هل ما زلت تخطط لإطلاقه في نهاية الشهر؟

شكرًا لك على تقديم مكونات أمامية جيدة ، لقد تجاوزت مواد Google

متحمس حقًا لهذا الإصدار لأنه مانع بدء استخدام مكونات antd pro الجديدة. هل الإطار الزمني المتوقع للإصدار لا يزال حتى نهاية نوفمبر؟

نشكرك على توفير هذه المكتبة الرائعة. أنتم تغادرون واجهة المستخدم المادية لـ Google.

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

تم إصدار Ant Design 3.0 الآن! 🎉 🎉 🎉

+1 للمكونات المصممة / العاطفة / دعم fela في إصدار مستقبلي.