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

コンポーネントの定義のコメントを改善して完璧にしますか？

2-> 3、さらには1-> 3のツールはどうですか？

@yesmeck this https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803は、 Tabs.TabPane[key]とMenu.Item[key]をあきらめる必要があることを意味します...

もっと堅牢な組み込みのi18nサポート＃5554（コメント）をまだ望んでいます

@plandem私は評価しています、その問題で議論し続けましょう。

コンポーネントの定義のコメントを改善して完璧にしますか？

@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に欠けている1つのコンポーネントは、オフスクリーンサイドバーです。

react-sidebarは素晴らしいコンポーネントですが、ページのスクロールに関係するすべてのものを壊してしまうので、かなり役に立たないです。 統合されたサイドバー、できればタッチデバイスでのスワイプサポートが3.0の最大の願いです！

@JesperWe必要なのはLayout.Siderだと思います

@benjycui実際、私は数か月間Siderを調べていませんが、2.6以降、カスタムトリガーがあり、以前よりも便利になっています。 ただし、コンテンツ列が表示されたときに狭くなるように圧縮されているため、サイドバーとしては使用できません。

しかし、いくつかの新しい小道具を備えたサイドバーのように機能するように拡張することができます。

• cover: trueを押して、ページコンテンツの上部に表示するようにします。
• mask: trueは、Siderが上にあるときに、ページのカバーされていない部分にマスクを表示します。
• maskCloseable: true 、外側をクリックすると折りたたまれます。

そして最後に夢の世界で

• swipeable: true 、タッチデバイスをより適切にサポートします（ただし、おそらくantdをデスクトップのものとして考えているので、これはantdの外部でも実現できます）。

@benjycui @JesperWe Layout.Siderデモでは、Siderがモバイルで開かれると、コンテンツが圧縮されます（これは悪いことです）。

コンテンツを右にプッシュすることもできますか？ または、コンテンツの上にサイダーを置きますか？

次のメジャーバージョンでやりたい、さらに別の重大な変更についてアドバイスを提供してほしい： https ：

@JesperWeだから、必要なのはDrawerのようなものです。

また、ここで機能の詳細について説明するのではなく、新しい問題を開いて説明してください。

@benjycuiわかりました、3.0の夢を言い換えます:-)：antdに統合されたDrawerのようなもの（antd-mobile / Drawerを追加するとバンドルがはるかに大きくなり、不要な反応ネイティブのものがたくさん追加されるため）

結果を比較し、ロールアップをライブラリパッカーと見なします。

ここにいくつかの考えがあります：
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

結果を比較し、ロールアップをライブラリパッカーと見なします。

開発者は変更を感じないため、これは2.xで実行できます。

そして、あなたはこのアイデアを議論するために新しい問題を開くことができます@plandem

lessをhttps://github.com/styled-components/styled-componentsに置き換えてみて

スタイル付きコンポーネントについては、問題が多すぎます。

• autoprefixerライブラリは、postcsshttps ：//github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6と比較して信頼性が低い場合があり
• 互換性のために現在のcssクラス名全体を維持する必要がありますが、styled-componentsはスタイル用に独自のクラス名を生成しますが、冗長性があり、維持するのが難しいでしょうか？

それがtry存在した理由であり、互換性は私たちが考慮しなければならない大きな問題です。

互換性のために現在のcssクラス名全体を維持する必要がありますが、styled-componentsはスタイル用に独自のクラス名を生成しますが、冗長性があり、維持するのが難しいでしょうか？

実際、これは問題ではありません。 現在のCSSクラス名は、互換性のためだけでなく、テストで使用できるセレクター（酵素など）です。 だから、私たちはそれらを維持しなければなりません。

@paranoidjk @ afc163 @benjycui

ひや、私はstyled-componentsのコアコントリビューターの1人であり、リポジトリで開かれた問題（上記を参照）が原因でこのスレッドを見つけました。このスレッドはSCをサポートしていないことを知らせてくれました。 偶然、私はこの会話を見つけました：wink：–わかりました、コンテキストはさておき、

自動プレフィックスライブラリは、postcssと比較して信頼性が低い場合があります

stylisを慎重に選択し、それを開発している@thysultanと緊密に協力しています。 それがPostCSSの価値のある置き換えでなく、それが持っていたいくつかの問題（v3でいくつかの欠落したプレフィックス）が非常に迅速に解決された場合、私たちはそれを選択しなかったでしょう。 v2自体は数か月間作成されており、ついにリリースされました。 私たちは間違いなくその部分を保証することができます。 SC：smile：を使用する場合は、この実装の詳細を心配してください。

あなたが指しているファイルは使用されておらず、現在削除されており、inline-style-prefixerを使用した古い自動プレフィックスの一部です。 しかし、それでも（そして私たちにとっては）、@ rofrischmannによるcss-in-jsコミュニティ全体で非常に信頼できるソリューションです。

または、css-in-jsを選択すると、px-to-remなどのポストcssプラグインシステムの利便性が失われると言えますか？

タグ付きテンプレートリテラルの補間では、任意のJSを使用できるため、単純な関数ですべてを置き換えることができます。 実際には、CSS-in-JSのlodashのような「polished」と呼ばれる別のプロジェクトがあり、SASS / LESSなどに期待されるすべてのミックスイン（つまりヘルパー関数）が付属しています： https：// polished。 js.org

（実際、上記のようにPostCSSを使用することも、プラグインをサポートすることもありません）

互換性のために現在のcssクラス名全体を維持する必要がありますが、styled-componentsはスタイル用に独自のクラス名を生成しますが、冗長性があり、維持するのが難しいでしょうか？

カスタムクラス名をアタッチする必要がある場合は、 .attrsメソッドを簡単に使用できます。これにより、コンポーネントに追加の小道具をアタッチできます。 例えば：

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

その他の特典と機能：

• あなたはCSSだけを書きます（あなたがすでに知っているかもしれませんが）、そして唯一の追加はアンパサンドと入れ子です
• スタイルとコンポーネントのマッピングはありません
• すべてがコンポーネントです
• cssヘルパーを使用してミックスイン/共有スタイルを作成できます

さらに助けが必要な場合は、私がここにいます。 ただし、さらに情報が必要な場合は、新しいWebサイト：100： https ： ください。

@philpl @benjycui

現在のCSSクラス名は、互換性のためだけでなく、テストで使用できるセレクター（酵素など）です。 だから、私たちはそれらを維持しなければなりません。

テストのクラスセレクターのほとんどは、代わりに表示名セレクターに置き換えることができるように見えます。 これはすべてのテストに当てはまるわけではありませんが、ほとんどの場合、そこに到達します。 私はこれを引き受けてもかまいません。

styled-componentsが役立つ可能性のある場所の1つは、テーマのカスタマイズです。 最初のアプローチよりも柔軟性が高く、2番目のアプローチよりも最適化が優れているようです。

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

2番目の@ philpl - styled-componentsは素晴らしいです。

styled-componentリファクタリングすれば、この問題を同時に解決できると思いますhttps://github.com/ant-design/ant-design/issues/4998 。

PSこれは、 styled-componentがこの問題を解決できるという意味ではありません。これは、作業を減らすために同時に行うことができるからです。

更新しました：

これが私が現在ReactプロジェクトでAntDesignをスタイリングしている方法です。 Ant Designライブラリ全体を調べてすべてのスタイルを設定する必要があるため、これは最高ではありません。 create-react-app LESSプリプロセッサに煩わされたくないのは、それが一種の苦痛だからです。

// <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}>ラップするだけで、それに応じたスタイルになります。

styled-componentsの代わりに、 @ rofrischmannによるfelaを投入したいと思います。 そのよりモジュール式で高速です。 それは多くの機能と小さなフットプリントを持っています。 また、 cloudflareはstyled-componentsの代わりにそれを使ってUIを構築することにしました。

皆さんが何を決めるにしても、antdがcss-in-jsソリューションを少なくする代わりに使用するのを見て本当にうれしいです。

styled-componentsは、最新のモジュール式のスケーラブルなUIコンポーネントを構築するためのより良い選択です。
最も重要なのは、外部のcssファイルなしでコンポーネントを独立してレンダリングできることです。
これにより、必要最小限のスタイルでコンポーネントを部分的にインポートできます。
[email protected]がそれを使用することを願っています。

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

@benjycui @yesmeck @ ddcat1115 @RaoHai

cc @nikogu

＃4853を追加しますか？

＃4853を追加しますか？

一部のコンポーネントはAPIの一部としてkeyを使用しているため、すべてのAPIの名前を変更するまでこれを修正することはできません。 例えば

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

これは重大な変更になりますが、このようなantd-codemodによって解決できます。

＃4853で議論を続けることができます

TypeScriptでデモを書き直す

デモはTypescriptのみですか、それともJSとTypescriptの両方ですか？ 私は両方を維持したいと思っています。

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

rc-triggerがReact16で機能することを確認してください。

styled-componentsまたはメンテナ/コラボレーターの選択のcss-in-jsソリューションはまだオプションですか？
私はそれが大好きで、リファクタリングを手伝いたいと思います:)

少ないファイルをstyled-componentsに移行する作業が多すぎるため、antd 3にstyled-componentsを導入しないのではないかと思います。ただし、styled-componentsは、antdのコードに侵入することなく、antdのコンポーネントにスタイルを適用できるため、興味がある場合はantdでstyled-componentsを使用する場合、 https：//github.com/yesmeck/styled-antdの例を次に示し

@codepunkt @yesmeckは、魅力的なantdの例を見たいと思っています

@yesmeck @ afc163 CSS-in-JS用にJSSを
ここにリストされている利点により、スタイル付きコンポーネントよりも実現可能になると思い

おそらくそれはツーリングエコシステムに関連しているかもしれませんが、antd3.0がbabel7で正常に動作することを確認することは良い考えかもしれません。
特に、7.0で計画されているbabeltypescript組み込み世代の場合。
create-react-appでantd / typescriptの使用を大幅に簡素化できます

IE6-8、おそらくIE11より前のすべてのバージョンのサポートを終了することを検討してください。

これにより、cssファイルのダウンロードがよりスリムで高速になります。 Reactはバージョン9より前のIEもサポートしていないため、.clearfix、-ms-filterなどを安全に削除できます。

antはすでにIE9 +のみを公式にサポートしています

2017年10月12日木曜日午前7時58分、AndreasCederström<
[email protected]>は書いた：

IE6-8、おそらくIE11より前のすべてのバージョンのサポートを終了することを検討してください。

これにより、cssファイルのダウンロードがよりスリムで高速になります。 Reactはしません
バージョン9より前のIEもサポートしているため、.clearfix、-ms-filterなどを安全に使用できます。
削除されました。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
。

OK。 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で装飾されたフォームコンポーネントをstyled-componentsでスタイル設定されたラッパーにラップすると、フォームフィールドが機能しなくなります。 私はこの問題を本当に理解していませんが、それを機能させるためにインラインスタイルで<div>にラップする必要があります。 これは本当に迷惑です...

ウィークセレクター!!!

誤った使用法に関連している可能性のある@malekjaroslav 。 styled-componentsリポジトリで問題を開くことができますか？私がお手伝いしますか？

@benjycui antd3.0のレスポンシブヘルパーについてどう思いますか？ このようなhttps://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scssin react

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

ヘルプが必要な場合は初期のPRを作成できますが、ドキュメントの翻訳などのサポートが必要になります。

@andriijasはhttps://github.com/contra/react-responsiveを使用するだけです。 Ant設計仕様に準拠したUIコンポーネントをantdに追加するだけです。 とにかく、ありがとう😄

はい、ant-design-proリポジトリで見ました。 antdからのブレークポイントでラッパーを作成します。

このリリースを楽しみにしています！

みなさん、こんにちは。antd@ 3.0.0-rc.1をリリースしました。https： //github.com/ant-design/ant-design/issues/8233をご覧ください

antd proコンポーネントは、リリースされたときにのみ使用を開始できるため、新しいバージョンのリリースを楽しみにしています。月末にリリースする予定はありますか？

このような優れたフロントエンドコンポーネントを提供していただきありがとうございます。Googleの資料を上回りました。

新しいantdproコンポーネントの使用を開始するためのブロッカーであるため、このリリースに本当に興奮しています。リリース予定期間はまだ11月末ですか？

このような素晴らしいライブラリを提供していただきありがとうございます。皆さんはGoogleのマテリアルUIを離れています。

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

Ant Design 3.0がリリースされました！ 🎉🎉🎉

将来のリリースでのstyled-components / emotion / felaサポートの+1。