Ant-design: [email protected]

Diperbarui.

Diperbarui.

https://github.com/ant-design/ant-design/issues/5140 bisa menjadi taman bermain yang bisa diedit.

Mungkin ukuran font default lebih besar, mengikuti rencana desainer kami.

Refaktor cloneElement menjadi context ?

1. Tidak bisa
2. Tab

buka kembali # 1473?

Saya masih berharap untuk dukungan i18n bawaan yang lebih kuat https://github.com/ant-design/ant-design/issues/5554#issuecomment -290372828

Memperbaiki dan menyempurnakan komentar definisi Komponen?

Bagaimana dengan alat 2-> 3, atau bahkan 1-> 3?

@yesmeck ini https://github.com/ant-design/ant-design/issues/5570#issuecomment -290622803 berarti kita harus menyerahkan Tabs.TabPane[key] dan Menu.Item[key] ...

Saya masih berharap untuk dukungan i18n bawaan yang lebih kuat # 5554 (komentar)

@plandem Saya mengevaluasi, mari terus berdiskusi tentang masalah itu.

Memperbaiki dan menyempurnakan komentar definisi Komponen?

@infeng inilah mengapa saya ingin menulis ulang demo di TypeScript, sehingga kami dapat melihat masalah dalam definisi https://github.com/ant-design/ant-design/issues/5390

Bagaimana dengan alat 2-> 3, atau bahkan 1-> 3?

Ya, kami masih perlu menyediakan alat seperti https://github.com/ant-design/ant-design/issues/3759#issuecomment -272353773, meskipun ini bukan solusi yang tepat

@sorrycc apa pendapat Anda tentang webpack@2 ?

Ada kemajuan tentang editor teks kaya? # 1083

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

Editor mungkin tidak ada dalam rencana kami baru-baru ini untuk saat ini.

ThemeProvider harus didiskusikan di https://github.com/ant-design/ant-design/issues/5656

Tapi saya tidak yakin apakah kita punya waktu untuk memperkenalkannya ke [email protected] .

Tambahkan fitur baru untuk Bagan
Seperti Pie, hisgram dll.

Tambahkan fitur baru untuk Bagan
Saya menentangnya. Ini adalah kelas komponen yang berbeda.

Jika Anda menginginkan grafik dari tim yang sama, Anda dapat mencoba yang ini:
https://antv.alipay.com/index.html

Satu komponen yang hilang dari antd yang saya terapkan berulang kali di semua proyek adalah sidebar di luar layar.

react-sidebar adalah komponen yang bagus, tetapi merusak semua yang berkaitan dengan scrolling pada halaman, jadi itu sangat tidak berguna. Sebuah sidebar terintegrasi, lebih disukai dengan dukungan swipe pada perangkat sentuh akan menjadi keinginan terbesar saya untuk 3.0!

@JesWe Saya pikir yang Anda butuhkan adalah Layout.Sider

@benjycui Sebenarnya saya belum melihat Sider selama beberapa bulan, saya melihatnya memiliki pemicu khusus sejak 2.6, yang membuatnya lebih berguna dari sebelumnya. Namun tetap saja meremas kolom konten menjadi sempit saat muncul, sehingga tidak bisa digunakan sebagai sidebar.

Tapi itu bisa diperpanjang untuk bekerja seperti sidebar dengan beberapa props baru:

• cover: true untuk membuatnya muncul di atas konten halaman alih-alih meremasnya.
• mask: true untuk menampilkan mask di atas bagian halaman yang tidak tertutup saat Sider berada di atas.
• maskCloseable: true untuk membuatnya runtuh saat diklik di luar.

dan akhirnya di dunia mimpi

• swipeable: true untuk mendukung perangkat sentuh yang lebih baik (tetapi karena Anda mungkin berpikir antd sebagai hal desktop, ini dapat dilakukan di luar antd juga).

@benjycui @JesperWe Dalam demo Layout.Sider , konten diperas (yang buruk) saat Sider dibuka di perangkat seluler.

Apakah mungkin untuk mendorong konten ke kanan juga? Atau meletakkan Sider di atas konten?

Namun perubahan lain yang ingin saya lakukan di versi utama berikutnya, dan ingin Anda memberikan saran: https://github.com/ant-design/ant-design/issues/6139

@JesperKami begitu, yang Anda butuhkan adalah sesuatu seperti Laci .

Dan kita tidak boleh membahas detail fitur di sini, cukup buka masalah baru untuk didiskusikan.

@benjycui Ok jadi saya Laci terintegrasi ke antd (Karena menambahkan antd-mobile / Drawer membuat bundel jauh lebih besar dan menambahkan banyak barang-barang asli yang tidak diinginkan)

Bandingkan hasil dan pertimbangkan rollup sebagai pengemas perpustakaan.

Berikut beberapa pemikiran:
https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Bandingkan hasil dan pertimbangkan rollup sebagai pengemas perpustakaan.

Kita bisa melakukan ini di 2.x, karena developer tidak akan merasakan perubahan apapun.

Dan Anda dapat membuka edisi baru untuk membahas ide ini @plandem

Coba ganti lebih sedikit dengan https://github.com/styled-components/styled-components

Tentang komponen bergaya, saya juga punya masalah:

• perpustakaan autoprefixer mungkin tidak terlalu andal dibandingkan dengan postingan https://github.com/styled-components/styled-components/blob/master/src/utils/autoprefix.js#L6. Atau bisa dibilang, sekali memilih css-in-js, kita akan kehilangan kemudahan sistem plugin post-css, seperti px-to-rem?
• kita harus tetap menggunakan seluruh nama kelas css saat ini untuk kompatibilitas, sementara komponen-gaya akan menghasilkan nama kelasnya sendiri untuk gaya, itu akan menjadi redundansi dan sulit untuk dipertahankan?

Itulah mengapa try ada, kompatibilitas adalah masalah besar yang harus kita pertimbangkan.

kita harus tetap menggunakan seluruh nama kelas css saat ini untuk kompatibilitas, sementara komponen-gaya akan menghasilkan nama kelasnya sendiri untuk gaya, itu akan menjadi redundansi dan sulit untuk dipertahankan?

Sebenarnya, ini bukan masalah. Nama kelas CSS saat ini tidak hanya untuk kompatibilitas, tetapi penyeleksi yang dapat kita gunakan dalam pengujian (misalnya enzim). Jadi, kita harus menjaganya.

@paranoidjk @ afc163 @benjycui

Hai, saya salah satu kontributor inti komponen bergaya dan menemukan utas ini karena masalah terbuka di repo kami (lihat di atas), yang memberi tahu saya bahwa lib ini tidak mendukung SC. Secara kebetulan saya kemudian menemukan percakapan ini: wink: - Ok, konteksnya sekarang

perpustakaan autoprefixer mungkin tidak terlalu andal dibandingkan dengan postcs

Kami telah memilih stylis cermat dan bekerja sama erat dengan @thysultan , yang mengembangkannya. Kami tidak akan memilihnya, jika itu bukan pengganti PostCSS yang layak dan beberapa masalah yang dimilikinya (beberapa awalan yang hilang di v3), diselesaikan dengan sangat cepat. V2 itu sendiri telah dibuat selama beberapa bulan btw, dan sekarang akhirnya keluar. Kami pasti bisa menjamin di bagian itu. Biarkan detail implementasi ini menjadi kekhawatiran kami, jika Anda menggunakan SC: smile:

File yang Anda tunjuk tidak sedang digunakan dan sekarang telah dihapus btw, dan merupakan bagian dari auto-prefixing lama dengan inline-style-prefixer. Tetapi bahkan itu (dan bagi kami) adalah solusi yang sangat, sangat, sangat tepercaya melalui komunitas css-in-js oleh @rofrischmann.

Atau bisa dibilang, sekali memilih css-in-js, kita akan kehilangan kemudahan sistem plugin post-css, seperti px-to-rem?

Karena dalam interpolasi di literal template yang diberi tag, Anda dapat menggunakan JS apa saja, fungsi sederhana dapat menggantikan semua hal itu. Kami sebenarnya memiliki proyek terpisah bernama "polished" yang seperti lodash untuk CSS-in-JS dan dilengkapi dengan semua mixin (yaitu fungsi pembantu) yang Anda harapkan dari SASS / LESS dan sejenisnya: https: // polished. js.org

(Kami memang tidak menggunakan PostCSS lagi seperti yang disebutkan di atas, kami juga tidak mendukung pluginnya btw)

kita harus tetap menggunakan seluruh nama kelas css saat ini untuk kompatibilitas, sementara komponen-gaya akan menghasilkan nama kelasnya sendiri untuk gaya, itu akan menjadi redundansi dan sulit untuk dipertahankan?

Jika Anda perlu melampirkan nama kelas khusus, Anda dapat dengan mudah menggunakan metode .attrs , yang memungkinkan Anda melampirkan properti tambahan ke sebuah komponen. Sebagai contoh:

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

Beberapa barang dan fitur lainnya:

• Anda hanya menulis CSS (seperti yang mungkin sudah Anda ketahui), dan satu-satunya tambahan adalah ampersand dan nestedness
• Tidak ada gaya + pemetaan komponen
• Semuanya adalah sebuah komponen
• Anda dapat menulis mixin / gaya bersama dengan css helper kami

Saya di sini jika Anda membutuhkan bantuan lebih lanjut. Jika Anda memerlukan info lebih lanjut, lihat situs web baru kami: 100: https://styled-components.com

@philpl @benjycui

Nama kelas CSS saat ini tidak hanya untuk kompatibilitas, tetapi penyeleksi yang dapat kita gunakan dalam pengujian (misalnya enzim). Jadi, kita harus menjaganya.

Sebagian besar penyeleksi kelas dalam pengujian terlihat seperti mereka dapat diganti dengan pemilih nama tampilan . Ini tidak benar untuk semua tes, tetapi itu akan membawa kita sebagian besar ke sana. Saya tidak keberatan mengambil ini.

Satu tempat yang dapat membantu komponen bergaya adalah dalam menyesuaikan tema . Sepertinya ini akan memberi kita lebih banyak fleksibilitas daripada pendekatan pertama dan pengoptimalan yang lebih baik daripada pendekatan kedua.

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

Saya kedua @philpl - TOLONG membuat gaya jauh lebih mudah di Ant Design. Saat ini sangat menyakitkan. styled-components luar biasa.

Saya pikir kita dapat menyelesaikan masalah ini pada saat yang sama https://github.com/ant-design/ant-design/issues/4998 , jika kita refactor menjadi styled-component .

NB Ini tidak berarti bahwa styled-component dapat menyelesaikan masalah ini, hanya karena kita dapat melakukan ini pada waktu yang sama untuk mengurangi pekerjaan.

Diperbarui:

Beginilah cara saya saat ini menata Desain Semut dalam proyek React. Ini bukan yang terbaik, karena kita harus melalui pustaka _entire_ Ant Design dan mengatur gaya semuanya. Saya tidak ingin repot dengan praprosesor KURANG di create-react-app , karena ini agak merepotkan.

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

Jika Ant Design dibuat kompatibel dengan styled-components , maka kita bisa membungkus aplikasi dengan <ThemeProvider theme={primaryTheme}> dan itu akan ditata sesuai.

Aku hanya ingin membuang Fela oleh @rofrischmann sebagai alternatif untuk gaya-komponen. Lebih modular dan lebih cepat. Ini punya banyak fitur dan footprint kecil . Juga, cloudflare memutuskan untuk membangun ui mereka dengan itu alih-alih komponen bergaya.

Apa pun yang kalian putuskan, saya akan sangat senang melihat antd menggunakan solusi css-in-js alih-alih kurang.

styled-components adalah pilihan yang lebih baik untuk membuat komponen UI yang modern, modular, dan dapat diskalakan.
yang paling penting, ia dapat membuat komponen merender secara independen tanpa file css eksternal.
yang memungkinkan pengimporan sebagian komponen dengan gaya yang diperlukan minimal.
berharap [email protected] akan menggunakannya.

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

@benjycui @yeseck @ ddcat1115 @RaoHai

cc @nikogu

tambahkan # 4853?

tambahkan # 4853?

Sulit, untuk beberapa komponen menggunakan key sebagai bagian dari API, kami tidak dapat memperbaikinya hingga kami mengganti nama semua nama API. misalnya

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

Ini akan menjadi perubahan yang merusak, tetapi perubahan yang merusak semacam itu dapat diselesaikan dengan antd-codemod .

Kita bisa terus berdiskusi di # 4853

Tulis ulang demo di TypeScript

Apakah demo hanya akan menjadi Ketikan atau JS dan Ketikan? Saya berharap untuk mempertahankan keduanya.

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

Pastikan rc-trigger berfungsi dengan React 16.

Apakah styled-components atau solusi css-in-js dari pilihan pengelola / kolaborator masih menjadi pilihan?
Saya akan menyukainya dan ingin membantu refactoring :)

Terlalu banyak pekerjaan untuk memindahkan lebih sedikit file kita ke komponen-gaya, saya khawatir kita tidak akan memperkenalkan komponen-gaya di antd 3. Tapi, karena komponen-gaya dapat menerapkan gaya ke komponen antd tanpa mengganggu kode antd, jadi jika ada yang tertarik dalam menggunakan komponen-gaya dengan antd, berikut ini contohnya https://github.com/yesmeck/styled-antd

@codepunkt @yesmeck ingin sekali melihat contoh antd dengan glamor

@yesmeck @ afc163 bagaimana kalau menggunakan JSS untuk CSS-in-JS?
Menurut Anda, apakah keunggulan yang tercantum di sini dapat membuatnya lebih layak daripada komponen bergaya ?

Mungkin ini lebih terkait dengan ekosistem perkakas, tetapi bisa jadi ide yang bagus untuk memastikan bahwa antd 3.0 berfungsi dengan baik dengan babel 7.
Terutama dengan babel typescript generasi bawaan yang direncanakan pada 7.0.
Ini bisa sangat menyederhanakan penggunaan antd / typescript dengan create-react-app

Pertimbangkan untuk menghentikan dukungan untuk IE6-8, bahkan mungkin semua versi di bawah IE11.

Ini akan membuat file css lebih ramping dan lebih cepat diunduh. React bahkan tidak mendukung IE di bawah versi 9 sehingga .clearfix, -ms-filter dll dapat dihapus dengan aman.

semut hanya secara resmi mendukung IE9 +

Pada Kamis, 12 Okt 2017 jam 07.58, Andreas Cederström <
[email protected]> menulis:

Pertimbangkan untuk menghentikan dukungan untuk IE6-8, bahkan mungkin semua versi di bawah IE11.

Ini akan membuat file css lebih ramping dan lebih cepat diunduh. Bereaksi tidak
bahkan mendukung IE di bawah versi 9 sehingga .clearfix, -ms-filter dll dapat dengan aman
dihapus.

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ant-design/ant-design/issues/5570#issuecomment-336107229 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/ADUIEIQi6tXJB0336SQrtMrMCIHfvjNuks5srf7pgaJpZM4MuJYf
.

Baik. Periksa antd.css (https://cdnjs.cloudflare.com/ajax/libs/antd/2.13.6/antd.css) berisi beberapa hack IE6-8 yang harus dihapus kemudian.

Contoh:

  /* 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 Saya pikir itu telah dihapus di antd-3.0 , jika Anda masih melihat peretasan, cukup PR untuk menghapusnya, terima kasih.

Saya memiliki masalah besar dengan komponen bergaya dan bentuk antd. Ketika saya membungkus komponen formulir yang didekorasi dengan fieldDecorator ke pembungkus yang ditata dengan komponen bergaya, bidang formulir berhenti bekerja. Saya tidak begitu memahami masalah ini tetapi saya harus membungkusnya menjadi <div> dengan gaya sebaris agar berhasil. Ini benar-benar anoying ...

Pemilih Minggu !!!

@malekjaroslav yang mungkin terkait dengan penggunaan yang salah. Dapatkah Anda membuka masalah pada repo komponen bergaya, jadi saya dapat membantu Anda?

@benjycui Apa pendapat Anda tentang penolong responsif di antd3.0? Sesuatu seperti ini https://github.com/twbs/bootstrap/blob/v4-dev/scss/utilities/_display.scss bereaksi

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

Saya dapat membuat PR sebagai awal jika Anda membutuhkan bantuan tetapi perlu bantuan dengan menerjemahkan dokumentasi, dll.

@andriijas cukup gunakan https://github.com/contra/react-responsive . Kami hanya menambahkan komponen UI yang mengikuti Spesifikasi Desain Ant ke antd. Pokoknya, terima kasih 😄

Ya, saya melihatnya di repositori ant-design-pro. Saya akan membuat pembungkus dengan breakpoints dari antd.

Menantikan rilis ini!

Halo semuanya, saya baru saja merilis [email protected] , Lihat https://github.com/ant-design/ant-design/issues/8233

Saya menantikan rilis versi baru, karena saya hanya dapat mulai menggunakan komponen antd pro ketika sudah keluar. Apakah Anda masih berencana untuk merilisnya di akhir bulan?

Terima kasih telah menyediakan komponen front-end yang bagus, Anda telah melampaui materi Google

Sangat bersemangat untuk rilis ini karena ini adalah pemblokir untuk mulai menggunakan komponen antd pro baru. Apakah jangka waktu rilis yang diharapkan masih akhir November?

Terima kasih telah menyediakan perpustakaan yang luar biasa. Kalian meninggalkan UI Material Google adalah debu.

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

Ant Design 3.0 dirilis sekarang! 🎉 🎉 🎉

+1 untuk dukungan komponen bergaya / emosi / fela di rilis mendatang.