Scroller di dalam <ion-select> di RTL tidak ditempatkan dengan benar.
Demo - https://gyazo.com/d1602f045193380be6d02432a7e61878

Ya memang,tapi Saya mengalami kesulitan men-debugnya untuk memahami apa yang terjadi di sana ... Saya akan menambahkannya ke daftar saja

@ Newbie012 Saya perhatikan itu hanya terjadi dengan antarmuka AlertController, dan di MD. Bisakah Anda memverifikasi?

@abennouna Benar

Thanks @ Newbie012 , ditambahkan ke daftar di bawah komponen alert

Saya memperbarui masalah asli untuk menyertakan tautan ke beberapa masalah RTL terbuka. Kami dapat membiarkannya tetap terbuka untuk dilacak atau menutupnya untuk dilacak di sini.

@abennouna Saya melihat bahwa opsi dir dihapus bentuk ion-slide di v4 yang seharusnya RTL saat menggunakan komponen slide. Bolehkah saya tahu apakah itu akan ditambahkan kembali atau adakah cara alternatif untuk mencapainya?

@twinssbc slide bekerja dalam mode RTL di luar kotak selama dokumen dalam RTL. Apakah Anda mengacu pada hal lain? PS: Namun ada masalah jika Anda ingin beralih arah secara dinamis: Anda harus memuat ulang dokumen agar peristiwa swiper berfungsi dengan benar

@abennouna Saya ingin mengucapkan terima kasih atas upaya Anda untuk memastikan bahwa semua masalah RTL telah diperbaiki.
Jazakallahu Khairan

Saya hanya ingin menyebutkan bahwa item di dalam ion-item-divider di RTL memiliki margin yang berbeda dengan slot = "start" dan slot = "end" daripada di LTR

@abuassar 🤝 jangan sebutkan!

Panggilan yang bagus! Saya melihat margin 2px yang menghilang dalam mode RTL, hanya di MD. Bisakah Anda mengkonfirmasi?

@abuassar 🤝 jangan sebutkan!

Panggilan yang bagus! Saya melihat margin 2px yang menghilang dalam mode RTL, hanya di MD. Bisakah Anda mengkonfirmasi?

Ini bukan hanya kesalahan 2px, silakan periksa tangkapan layar berikut:

START menggunakan slot = "start"
END menggunakan slot = "end"
MIDDLE tanpa slot

RTL

LTR

dan berikut adalah cara membuat ulang masalahnya
app.component.html:

https://gist.github.com/abuassar/bdee78a37e36cf1c5e7ddc506eed141d

sayangnya saya menemukan masalah yang sama dengan ion-item:

START menggunakan slot = "start"
END menggunakan slot = "end"
MIDDLE tanpa slot

demo:
app.component.html
https://gist.github.com/abuassar/d957e7b6d5079cd7f30550c91b7c4617

@abuassar apakah saya berhak menganggap Anda tidak menggunakan master terbaru dengan PR # 16987? Saya memperbarui deskripsi masalah untuk menjelaskan konteks pengujian. Berikut adalah hasil render masalah saat ini di item-divider : https://i.imgur.com/4W5TFs2.png

@abennouna Anda benar, saya menggunakan rc1 karena saya pikir ada perbaikannya.

Maukah Anda membimbing saya bagaimana menggunakan master terbaru dengan PR tersebut?

@abuassar Saya memperbarui deskripsi masalah dengan yang berikut di bagian "Berkontribusi":

Jika Anda tidak terbiasa dengan rangkaian pengujian yang disertakan:

1. Garpu repo ionik;
2. Gunakan cabang rtl (atau gunakan cabang master dan gabungkan PR # 16987);
3. Siapkan salinan lokal Anda ;
4. Jalankan rangkaian pengujian secara lokal ;
5. Saat Anda menavigasi ke komponen yang ingin Anda uji, Anda dapat menambahkan ?rtl=true ke url untuk memeriksa versi RTL;
6. Kirimkan komentar terkait masalah tersebut.

Tolong beri tahu saya jika tidak jelas.

@twinssbc slide bekerja dalam mode RTL di luar kotak selama dokumen dalam RTL. Apakah Anda mengacu pada hal lain? PS: Namun ada masalah jika Anda ingin beralih arah secara dinamis: Anda harus memuat ulang dokumen agar peristiwa swiper berfungsi dengan benar

@abennouna Saya dapat mengonfirmasi bahwa slide berfungsi dalam mode RTL default, tidak diperlukan opsi tambahan.

Hanya menambahkan komentar sehingga tidak ada yang bekerja dengan waspada juga. Saya mulai bekerja dengan waspada di sini: https://github.com/ionic-team/ionic/pull/17129

Ini juga akan menambahkan beberapa perubahan pada mixin rtl untuk memperhitungkan pemilih cakupan.

Digabung dalam perubahan untuk memperbaiki RTL dalam peringatan dan merilis build dev baru: 4.0.0-dev.201901162054.ceae5d2 .

Ini mungkin telah memperbaiki beberapa hal lain di RTL. Tolong beri tahu saya jika Anda melihat ada yang rusak setelah ini. Terima kasih!

Saya mencoba build dev terbaru: @ ionic / angular: 4.0.0-dev.201901162054.ceae5d2

dan saya melihat scrollbar aneh ini di menu:
https://gyazo.com/1d3033c073c854d9e09c89d934ecf50d

inti untuk mereproduksi:
https://gist.github.com/abuassar/2ff18008fa3fcf07d4547d766dd24079

scrollbar hanya muncul dalam mode rtl

@abuassar Terima kasih! Saya rasa ini mirip dengan masalah peringatan. 🤔 Kita harus memeriksanya.

menggunakan dev build terbaru juga, saya melihat bug ion-toggle ini saat ditempatkan di menu:
https://gyazo.com/b93302e08a9c43f312899736ab26717b

inti untuk mereproduksi:
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

terima kasih atas kerja kerasnya!

masalah lain dengan ion-segment kali ini:
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

inti untuk mereproduksi:
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

masalah ini hanya muncul dalam mode RTL dan iOS karena 'md' tidak memiliki batas di sekitar tombol segmen.

masalah lain dengan ion-segment kali ini:
https://gyazo.com/db945c95b20677a6aca96fde0b1cc458

inti untuk mereproduksi:
https://gist.github.com/abuassar/a31a8f823bb7fabd4dcd8cdf581af6a9

masalah ini hanya muncul dalam mode RTL dan iOS karena 'md' tidak memiliki batas di sekitar tombol segmen.

@abuassar ini sudah ada di list makasih!

menggunakan dev build terbaru juga, saya melihat bug ion-toggle ini saat ditempatkan di menu:
https://gyazo.com/b93302e08a9c43f312899736ab26717b

inti untuk mereproduksi:
https://gist.github.com/abuassar/86d90fecdd56e686beef19e2e23c8715

terima kasih atas kerja kerasnya!

@abuassar terima kasih, ini sepertinya jadi kemunduran, karena pengaruhnya sekarang juga ion-toggle.

@brandyscarney Saya belum menemukan sumber regresi, tetapi di sisi CSS,aturan right posisi diterapkan ke pemilih :host-context([dir=rtl]) .toggle-inner , dan aturan itu tidak diperlukan: menonaktifkannya akan memperbaiki masalah .

@abennouna Terima kasih! Sepertinya perubahan saya ke mixin. Sebelum penyeleksi [dir=rtl] tidak bekerja untuk komponen yang tercakup, jadi di tempat-tempat yang sudah memiliki aturan untuk itu mereka sekarang menerapkan.

Ini harus menjadi kode yang perlu diubah: https://github.com/ionic-team/ionic/blob/master/core/src/components/toggle/toggle.md.scss#L56

Inilah cara kerja mixin itu:

• padding() : https://github.com/ionic-team/ionic/blob/master/core/src/themes/ionic.mixins.scss#L257
• property() : https://github.com/ionic-team/ionic/blob/master/core/src/themes/ionic.mixins.scss#L237

Berikut adalah contoh di mana kami menerapkan posisi terlepas dari dir :

.item-options-start {
  <strong i="20">@include</strong> multi-dir() {
    /* stylelint-disable property-blacklist */
    right: auto;
    left: 0;
    /* stylelint-enable property-blacklist */
  }
}

Jika ada yang ingin melakukan PR untuk ini, beri tahu saya! Saya akan membantu sebanyak yang saya bisa. Saya pikir itu seharusnya hanya memodifikasi baris di atas (toggle.md - 56), memastikannya berfungsi di LTR dan RTL, dan menambahkan RTL ke tes e2e di sini: https://github.com/ionic-team/ionic/ blob / master / core / src / components / toggle / test / basic / e2e.ts

Contoh tes rtl e2e: https://github.com/ionic-team/ionic/blob/master/core/src/components/item/test/basic/e2e.ts#L12

Saat ini saya sedang mengerjakan ionicons , untuk menyelesaikan ini:

❓ arrow icons in iOS: should they be inverted?
❓ arrow icons in MD: should they be inverted?

Ini melibatkan pemindahan gaya untuk ikon panah, [flip-rtl] dan [unflip-rtl] dari sini ke ionicons:
https://github.com/ionic-team/ionic/blob/master/core/src/components/app/fonts/ionicons.scss#L25 -L34

Selain itu, kami memiliki beberapa dokumen tentang berkontribusi dan membuat permintaan tarik di sini: https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#creating -a-pull-request. Saya akan menambahkan ini ke edisi asli juga.

Beri tahu saya jika ada yang memiliki pertanyaan tentang kontribusi, karena saya ingin terus memperbarui dokumen ini! Terima kasih semuanya atas pengujian dan bantuannya !!

@tokopedia

Saya belum menemukan sumber regresi, tetapi di sisi CSS,aturan right posisi diterapkan ke pemilih :host-context([dir=rtl]) .toggle-inner , dan aturan itu tidak diperlukan: menonaktifkannya akan memperbaiki masalah.

Edit: diagnostik saya salah, maaf. Ini Transformasi Terjemahan 3D yang tidak dibalik. Dalam CSS yang dihasilkan berikut, pemilih RTL tidak menargetkan elemen .toggle-inner , apakah mereka seharusnya yang benar?

toggle.md.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

seharusnya:

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 16px),  0,  0);
}

toggle.ios.css

:host([dir=rtl].toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

seharusnya:

:host-context([dir=rtl]):host(.toggle-checked) .toggle-inner {
  transform: translate3d(calc(-1 * 19px),  0,  0);
}

dan untuk iOS, logika yang sama menyelesaikan masalah akhir gesek:

:host([dir=rtl].toggle-activated.toggle-checked) .toggle-inner {
  right: -4px; }

menjadi

:host-context([dir=rtl]):host(.toggle-activated.toggle-checked) .toggle-inner {
  right: -4px;
}

@abennouna Saya setuju, kami pasti harus melihat lebih dekat pada mixinnya. Saya pikir kita harus membahasnya dengan detail yang lebih baik untuk menangkap semua kasus penggunaan yang berbeda.

Inilah ikon PR: https://github.com/ionic-team/ionicons/pull/656. Setelah ini disetujui dan digabungkan, saya akan melakukan pelepasan ionikon, lalu rilis dev baru.

masalah RTL lain tetapi kali ini bukan dalam komponen, tetapi dalam utilitas CSS:
float-start dan float-end

inti untuk mereproduksi:
https://gist.github.com/abuassar/b85eddb53eaf8a213e855abdea3716f0

tangkapan layar:

@abuassar tidak dapat mereproduksi dengan template Anda di aplikasi rc.2 sampel saya. Silakan unggah repo lengkap jika masalah terus berlanjut 🙏

rtl_bug.zip

@abuassar tidak dapat mereproduksi dengan template Anda di aplikasi rc.2 sampel saya. Silakan unggah repo lengkap jika masalah terus berlanjut 🙏

masalah ini tidak ada di RC2, tetapi ada di build dev terbaru "4.0.0-dev.201901162054.ceae5d2"
contoh aplikasi demo terlampir

Saya memperbarui masalah yang telah diselesaikan oleh PR # 17157 dengan tanda centang abu-abu: ballot_box_with_check: tetapi saya belum menandainya sebagai selesai.

Saya juga menghapus centang pada komponen yang diuji sebelumnya yang mengalami regresi baru-baru ini.

@abuassar : gelombang: bisakah kamu menguji apa yang kamu bisa setelah menarik PR # 17157? Terima kasih sebelumnya!

@abennouna yakin, saya akan mengujinya dan melaporkan kembali ketika saya pulang ISA
terima kasih atas usaha Anda, sangat kami hargai.

@abuassar 👋 bisakah kamu menguji apa yang kamu bisa setelah menarik PR # 17157? Terima kasih sebelumnya!

maaf karena terlambat karena saya akhirnya punya waktu luang untuk tugas ini.
Saya menerapkan PR terhadap RC3, dan sejauh ini saya menemukan 2 masalah dengan komponen menu dalam gaya md:

1- bug scrollbar belum diperbaiki

2- Bayangan luar tercampur antara menu mulai dan menu akhir,
yaitu. menu mulai memiliki bayangan menu akhir, dan menu akhir memiliki bayangan menu awal

@abuassar makasih tapi PR nya belum digabung

@abennouna Saya tahu, saya menggabungkan PR dengan garpu berbasis RC3 saya sendiri
PS Saya ingin menggunakan PR ini di aplikasi pengujian saya, tetapi saya tidak tahu cara menggunakan ionik dari sumber daripada paket npm. ada petunjuk diterima :)

@abuassar maaf saya salah baca bahwa anda hanya menggunakan rc.3

Tangkapan bagus untuk kedua masalah!

1- Suka untuk bug scrollbar rtl AlertController, saya tidak dapat menemukan penjelasan untuk yang satu ini. @brandyscarney mungkin harus melihatnya

2- diperbaiki

Untuk memasukkan build lokal, saya tidak yakin saya memiliki solusi yang tepat, tetapi inilah yang saya lakukan:

1 - tarik apa yang saya inginkan secara lokal
2- instal ( npm install && cd core && npm install && cd ../angular && npm install && cd .. )
3- bangun ( npm run build )
4- di aplikasi saya, saya mengganti folder aplikasi dengan folder baru (mungkin npm link dapat membantu di sini):

• local-build/core/css -> my-app/node_modules/@ionic/core/css
• local-build/core/dist -> my-app/node_modules/@ionic/core/dist
• local-build/core/loader -> my-app/node_modules/@ionic/core/loader
• local-build/angular/css -> my-app/node_modules/@ionic/angular/css
• local-build/angular/dist -> my-app/node_modules/@ionic/angular/dist

Ikon Fab di RTL tidak berada di tengah secara horizontal

LTR:

RTL:

@ 3adeling terima kasih! Ini aneh. Versi / build mana yang Anda gunakan?

@ 3adeling terima kasih! Ini aneh. Versi / build mana yang Anda gunakan?

4.0.0-rc.3

Begitu, bug diperbaiki oleh PR # 17157

kapan tanggal yang diharapkan untuk bergabung dalam PR # 17157?
Saya terkejut bahwa v4 final dirilis tanpa memperbaiki masalah RTL yang tersisa

ion-toggle tidak berfungsi dengan benar pada versi 4.0.0 (demo - https://gyazo.com/a54a336ff3916b42e897713efa3993fb)

Solusinya adalah membalik translate3d dari 16 ke -16. Tapi itu akan ditimpa dengan :host(.toggle-checked) .toggle-inner

Edit - Baru saja melihat ada PR yang memperbaiki masalah ini.

Memang @ Newbie012

Juga bisakah Anda menarik PR dan memeriksa semua yang Anda bisa? Memiliki masukan sebanyak mungkin akan membantu menemukan masalah atau regresi yang tertinggal.

@abennouna masalah lain yang terkait dengan RTL, adalah bahwa seperti yang Anda ketahui huruf arab terhubung bersama, dan _letter-spacing_ memiliki efek buruk pada kata-kata arab.

sayangnya tombol ion dalam gaya md memiliki default $button-md-letter-spacing: 0.06em; yang membuat takik kecil di dalam kata-kata arab.

Jika ada cara untuk menonaktifkan spasi huruf ini, itu bagus.

@abuassar ya saya sudah membesarkannya di https://github.com/ionic-team/ionic/issues/16633

Namun saya memahami bahwa statusnya adalah "tidak akan diperbaiki".

Solusi saya saat ini adalah menambahkan ini ke global.scss :

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

Dengan Ionic v4.0.0 saya tidak dapat mengubah arah dari LTR ke RTL dengan menggunakan platform.sitDir('rtl') seperti sebelumnya di ionic 3 !!

Saya telah banyak mencari dan tidak menemukan pengganti untuk platform.sitDir('rtl') dari dokumen ionik !! atau bahkan instruksi untuk dukungan RTL!

Saya sebenarnya telah melakukan sesuatu dengan kode berikut document.documentElement.setAttribute('dir', 'rtl') sebagai percobaan, tetapi dengan banyak masalah juga seperti posisi sidemenu masih di sisi kiri bukan di kanan! seperti seharusnya.

Saya sedang membangun aplikasi multi-bahasa (Inggris, Arab) jadi ini sangat menyakitkan bagi saya!

Apakah ini BUG? Apakah ada dokumentasi yang dapat saya temukan?

Saya bermigrasi ke ionic 4 dan saya memiliki masalah RTL, saya menggunakan aplikasi multi bahasa.
Saya dapat mengetahui cara mengubah gaya berdasarkan RTL dan LTR. Perubahan dinamis dalam variabel.

Saya berharap akan ada dokumentasi bagaimana mengaturnya di SCSS global.

@abuassar ya saya sudah membesarkannya di # 16633

Namun saya memahami bahwa statusnya adalah "tidak akan diperbaiki".

Solusi saya saat ini adalah menambahkan ini ke global.scss :

[dir="rtl"] {
  ion-button {
    letter-spacing: 0;
  }
}

### INI HARUS BUG !!

Global.SCSS BERBASIS RTL ATAU LTR TIDAK BEKERJA !!
Dalam kasus saya, sangat sederhana jika saya menggunakan RTL, saya ingin menggunakan gaya RTL yang terletak di global.scss.
Seperti Ionic 3. Tapi ini tidak berhasil untuk saya. Saya bermigrasi ke ionic 4 dan terjebak dengan masalah ini.

[dir="ltr"] {
  ion-button {
    //My style for LTR
  }
}
[dir="rtl"] {
  ion-button {
   //My style for RTL
  }
}

Saya mencoba mengubah arah berdasarkan pilihan saya dalam kumpulan variabel layanan bahasa saya. (RTL atau LTR) di header ion atau
Telah mencoba kode di atas di global.scss. Tetapi hanya berfungsi jika Anda memiliki arahan di index.html.

Gaya global tidak peduli hanya melihat arah index.html tidak peduli tentang home.page.html saya jika saya telah menempatkan arah dinamis

Itu selalu melihat index.html . dan ambil arah dari sana dan gunakan gaya yang diatur di sana.
([dir = "rtl"]);

Apakah belum ada perbaikan untuk ini? Saya ingin mendapatkan pengarahan berdasarkan bahasa apa yang saya pilih,
Dalam kasus saya, saya memiliki 2 gaya berbeda, satu untuk LTR dan satu lagi untuk RTL .

Apakah ada solusi untuk ini?

@bayu_joo

Saya sebenarnya telah melakukan sesuatu dengan kode berikut document.documentElement.setAttribute('dir', 'rtl') sebagai percobaan itu berhasil tetapi dengan banyak masalah juga seperti posisi sidemenu masih di sisi kiri bukan di kanan! seperti seharusnya.

RTL diberlakukan dengan memiliki atribut dir dengan nilai rtl : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

document.documentElement.setAttribute('dir', 'rtl') juga dapat ditulis document.dir = 'rtl' jika Anda mau

Adapun masalah yang Anda sebutkan, beberapa perbaikan telah digabungkan, tetapi masalah ini mencantumkan masalah yang tersisa, dan mengusulkan perbaikan untuk itu.

Silakan lihat ringkasan, dan:

• tolong bantu kami menguji PR # 17157,
• tambahkan komentar dengan masalah yang tersisa (setelah PR)

@CreativeArtDesign Saya tidak yakin untuk memahami masalah apa yang sebenarnya Anda coba jelaskan. Selain itu, jika tidak terkait dengan masalah ini, buka masalah lain untuk itu.

RTL diberlakukan dengan memiliki atribut dir dengan nilai rtl : https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

document.documentElement.setAttribute('dir', 'rtl') juga dapat ditulis document.dir = 'rtl' jika Anda mau

Adapun masalah yang Anda sebutkan, beberapa perbaikan telah digabungkan, tetapi masalah ini mencantumkan masalah yang tersisa, dan mengusulkan perbaikan untuk itu.

Silakan lihat ringkasan, dan:

• tolong bantu kami menguji PR # 17157,
• tambahkan komentar dengan masalah yang tersisa (setelah PR)

Ini sebenarnya bukan solusi yang efisien untuk rilis resmi! Saya telah mencoba kode berikut document.dir = "rtl" atau document.documentElement.dir = "rtl"; atau yang di atas dan semuanya sama! hanya sintaks yang berbeda !!!

Yang datang dengan banyak masalah besar menggunakan pendekatan itu seperti:

1. Menu samping posisi bukaan masih di kiri (hanya teks yang berubah arah)
2. Semua penggeser di aplikasi tidak berfungsi dengan benar!
3. segmen ion pada versi ios terlihat tidak bagus membutuhkan beberapa perbaikan CSS

Saya tidak tahu apa yang harus saya lakukan sekarang dengan aplikasi saya saat ini? Apakah menggunakan ionic 4 adalah kesalahan atau apa? dan jika demikian mengapa mereka secara resmi merilis sebuah versi?

@heshaShawky Saya dapat melihat 3 cara untuk menghadapi situasi saat ini:

1. Anda menunggu sampai PR # 17157 digabungkan menjadi master dan rilis Ionic menyertakannya
2. Anda menarik PR di dev env lokal Anda, Anda menguji apakah semuanya sudah terpecahkan, dan Anda membantu kami memiliki dukungan RTL yang baik di Ionic
3. Anda mengganti aturan yang diperlukan sesuai kebutuhan Anda. Jika Anda tidak tahu bagaimana melakukannya, silakan minta bantuan di saluran yang sesuai (Forum / Slack ...)

Saya baik-baik saja dengan opsi 2

1. Anda menarik PR di dev env lokal Anda, Anda menguji apakah semuanya sudah terpecahkan, dan Anda membantu kami memiliki dukungan RTL yang baik di Ionic

Tapi saya tidak begitu paham dengan GIT! Jadi dapatkah Anda memberi tahu saya apa baris perintah untuk menarik PR # 17157 dan mengujinya?

Juga saya perhatikan bahwa ketika mengubah atribut dir manully pada index.html menjadi RTL tidak ada masalah sama sekali! dengan aplikasi saya!

Tetapi ketika mengganti dir menggunakan Javasctipt seperti document.dir='rtl' semuanya berjalan dengan cara yang salah !! Saya kira itu terjadi karena JS tidak memperbarui gaya statis yang dilakukan pada awal aplikasi!

Jadi pertanyaan lain adalah # 17157 akan memperbaiki masalah (swithching dinamis) karena ini yang saya bicarakan ?!

@CreativeArtDesign Saya tidak yakin untuk memahami masalah apa yang sebenarnya Anda coba jelaskan. Selain itu, jika tidak terkait dengan masalah ini, buka masalah lain untuk itu.

Saya ingin memiliki kasus if di global.scss saya yang dapat merasakan jika saya memiliki variabel rtl atau ltr di home.page.html saya ada di header atau konten dir = "{{variabel saya}}"; dan tergantung dari apa yang telah saya tetapkan di sini global.css baca jika rtl atau ltr dipilih. dan ambil style sheet itu.

variabel saya disetel ke RTL atau LTR

Di home.page.html saya, saya memiliki set variabel ini tergantung apa variabel saya disetel menggunakan css yang ditetapkan di global.scss saya .. Harap Anda mengerti maksudnya sekarang. Ini bekerja di Ionic 3 tetapi tidak di Ionic 4

<ion-header dir="{{my variable}}">

</ion-header>

CSS Global saya

[dir="ltr"] {
  ion-button {
    // If my tags is LTR use LTR STYLE 
  }
}
[dir="rtl"] {
  ion-button {
    // If my tags is RTL use RTL STYLE 
  }
}

@CreativeArtDesign Banyak yang telah diubah di ionic 4. Atau lebih tepatnya - semuanya telah berubah. Ionic 4 sekarang menggunakan Komponen Web dengan Shadow DOM, yang membuat hal ini jauh lebih rumit, karena setiap komponen web sepenuhnya terpisah dari yang lain. Oleh karena itu, tidak sesederhana mendeklarasikan variabel global.

PS - Mungkin hanya saya, tapi rasanya Anda lebih menuntut daripada meminta perbaikan. Harap dicatat bahwa @abennouna membantu dengan keinginan bebas.

@CreativeArtDesign Banyak yang telah diubah di ionic 4. Atau lebih tepatnya - semuanya telah berubah. Ionic 4 sekarang menggunakan Komponen Web dengan Shadow DOM, yang membuat hal ini jauh lebih rumit, karena setiap komponen web sepenuhnya terpisah dari yang lain. Oleh karena itu, tidak sesederhana mendeklarasikan variabel global.

PS - Mungkin hanya saya, tapi rasanya Anda lebih menuntut daripada meminta perbaikan. Harap dicatat bahwa @abennouna membantu dengan keinginan bebas.

Saya tidak menuntut apa pun, saya menggunakan fungsi ini di ionic 3 dan bermigrasi ke ionic 4, jika ionic 4 tidak mendukung RTL seperti yang dilakukan ionic 3. Jadi mengapa bermigrasi ke sesuatu yang kurang baik?

PS: Saya siap mengujinya RTL jika saya mendapat kesempatan bagaimana saya bisa menguji, saya telah bekerja dengan perangkat lunak pengujian selama sekitar 10 tahun. Jadi hanya kirimkan saya paket kode siap baru Dan saya akan siap melayani Anda dan lainnya yang memiliki masalah yang sama.

salam Hormat

KA

Ini semua tentang * DINAMIC SWITCHING dengan STYLE SHEET terpisah satu untuk LTR dan satu untuk RTL *
Masalah saya hanya untuk membuatnya mudah dimengerti. Jika saya beralih ke RTL dinamis, saya ingin menggunakan Stylesheet lain yang berbeda dari LTR . Ini untuk mencegah masalah desain. Karena RTL adalah ukuran dan tinggi lainnya. Jadi perlu ditata agar terlihat bagus.

Jika ada cara yang lebih baik untuk melakukannya, Anda dapat menasihati saya.

Terima kasih.

Ini semua tentang * DINAMIC SWITCHING dengan STYLE SHEET terpisah satu untuk LTR dan satu untuk RTL *
Masalah saya hanya untuk membuatnya mudah dimengerti. Jika saya beralih ke RTL dinamis, saya ingin menggunakan Stylesheet lain yang berbeda dari LTR . Ini untuk mencegah masalah desain. Karena RTL adalah ukuran dan tinggi lainnya. Jadi perlu ditata agar terlihat bagus.

Jika ada cara yang lebih baik untuk melakukannya, Anda dapat menasihati saya.

Terima kasih.

@CreativeArtDesign Saya kira Anda dapat menyelesaikan ini dengan menggunakan platform.isRtl pada if condition di app.component.ts ketika benar require() file CSS stylesheet Anda

Konsep yang sama seperti ini di sini (baca komentar)
https://github.com/angular/angular-cli/issues/4685

Ini sepertinya menjadi masalah yang perlu diperbaiki. Tidak hanya saya yang punya masalah.

⁣Dapatkan BlueMail untuk Android

Pada 31 Jan 2019, 22:42, pada 22:42, Hesham Shawky [email protected] menulis:

Ini semua tentang * DINAMIC SWITCHING dengan STYLE SHEET terpisah
satu untuk LTR dan satu untuk RTL *
Masalah saya hanya untuk membuatnya mudah dimengerti. Jika saya beralih ke
Dinamis RTL Saya ingin menggunakan Stylesheet lain yang berbeda
dari LTR . Ini untuk mencegah masalah desain. Karena RTL itu
ukuran dan tinggi lainnya. Jadi perlu ditata agar terlihat bagus.

Jika ada cara yang lebih baik untuk melakukannya, Anda dapat menasihati saya.

Terima kasih.

@CreativeArtDesign Saya rasa Anda dapat menyelesaikan ini dengan menggunakan
platform.isRtl pada if condition di app.component.ts jika benar
require() file lembar gaya CSS Anda

Konsep yang sama seperti ini di sini (baca komentar)
https://github.com/angular/angular-cli/issues/4685

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung atau lihat di GitHub:
https://github.com/ionic-team/ionic/issues/17012#issuecomment -459498477

PS: Namun ada masalah jika Anda ingin beralih arah secara dinamis: Anda harus memuat ulang dokumen agar peristiwa swiper berfungsi dengan benar

@abennouna Terima kasih banyak untuk trik ini, itu memperbaiki hampir semuanya untuk saya!

Hanya bug RTL Saya telah memperhatikan ion-item-sliding dengan ion-item-option tidak berfungsi dengan benar, ion-item-option tetap berada di sisi kiri!

@bayu_joo

Hanya bug RTL Saya telah memperhatikan ion-item-sliding dengan ion-item-option tidak berfungsi dengan benar, ion-item-option tetap berada di sisi kiri!

bug ion-item-sliding sudah disebutkan dalam daftar di atas

Letakkan dir = dan variabel Anda di tag ion konten juga perbaiki RTL lainnya dan juga untuk footer.

⁣Dapatkan BlueMail untuk Android

Pada 1 Feb, 2019, 01:05, pada 01:05, Hesham Shawky [email protected] menulis:

PS: Ada masalah jika Anda ingin beralih arah
secara dinamis: Anda harus memuat ulang dokumen untuk menyimpan peristiwa swiper
bekerja dengan benar

@abennouna Terima kasih banyak untuk trik ini, itu telah memperbaiki hampir semuanya
saya!

Hanya bug RTL yang saya perhatikan dengan ion-item-sliding
ion-item-option tidak berfungsi dengan benar, ion-item-option tetap ada
di sisi kiri!

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung atau lihat di GitHub:
https://github.com/ionic-team/ionic/issues/17012#issuecomment -459540772

PS: Namun ada masalah jika Anda ingin beralih arah secara dinamis: Anda harus memuat ulang dokumen agar peristiwa swiper berfungsi dengan benar

@abennouna Terima kasih banyak untuk trik ini, itu memperbaiki hampir semuanya untuk saya!

Harap dicatat bahwa ini terkait dengan plugin Swiper, dan bukan Ionic itu sendiri ->
https://github.com/nolimits4web/swiper/issues/2527#issuecomment -373674893

Dalam kasus penggunaan tertentu saya memilih untuk menghancurkan swiper dan membuatnya kembali seperti yang disarankan penulis lib (daripada memuat ulang halaman)

Dalam kasus penggunaan tertentu saya memilih untuk menghancurkan swiper dan membuatnya kembali seperti yang disarankan penulis lib (daripada memuat ulang halaman)

@abennouna dapatkah Anda memberi tahu saya bagaimana Anda melakukan ini? Saya perlu melakukan ini dengan sidemenu dan ion-slide jika memungkinkan

Alih-alih memuat ulang seluruh halaman karena itu semacam pendekatan pengalaman pengguna yang buruk!

@heshaShawky tidak yakin ini yang terbaik, gunakan dengan risiko Anda sendiri :-)

komponen

import { ChangeDetectorRef } from '@angular/core';
// ..

export class MyPage {
  public swiperEnabled = true;

  constructor(
    // ...
    private changeDetectorRef: ChangeDetectorRef,
  ) {
    // ..
  }

  someDetectionMethod() {
    // detect direction changed, rebuild the ion-slides
    this.swiperEnabled = false;
    this.changeDetectorRef.detectChanges();
    this.swiperEnabled = true;
    this.changeDetectorRef.detectChanges();
  }
}

template

<ion-slides *ngIf="swiperEnabled">
  <ion-slide *ngFor="let item of items">
    <!-- slide content -->
  </ion-slide>
</ion-slides>

NB Saya tidak yakin apa solusinya untuk menu samping, saya cenderung tidak menggunakan yang umumnya :-)

* HI, TIM IONIC, @abennouna *

Saya meminta Anda semua akan menghormati dan memahami
Apakah ini akan menjadi solusi untuk lembar Gaya RTL? Dengan variabel set dinamis untuk DIR = 'RTL' atau 'LTR',

Ini cara kerjanya di IONIC 3 dan bekerja sangat baik untuk saya.

Di variable.scss
$app-direction: multi;

Di index.html
<html lang="en" dir="ltr">

Dalam app.scss

.my-headertext{
  <strong i="24">@include</strong> ltr() { // ENGLISH
    font-family: normal-font;
  }
  <strong i="25">@include</strong> rtl() { // ARABIC
    font-family: arabiclabel-font;
  }
}

Bergantung pada pilihan apa dalam preferensi aplikasi saya, pembaruan variabel saya {{MyRTLVarable}} MyRTLVarable diatur ke RTL atau LTR tergantung apa yang saya pilih.

Dalam kode HTML saya
Saya meletakkan variabel ini di header dan footer konten sebagai berikut:
<HEADER Dir="{{MyRTLVarable}}">

Saya tidak suka solusi, saya ingin kode yang bersih dan mudah dipahami. Dan mengamankan kompatibilitas pembaruan baru.
Jika ini tidak mungkin saya perlu kembali ke IONIC v3 di mana itu berfungsi.
TIM IONIC Tolong beri saya jawaban sehingga saya dapat memutuskan apa yang harus dilakukan.

Dynamic RTL AND LTR Merupakan masalah yang menurut saya perlu diperbaiki, jika IONIC 4 akan mendukung RTL dengan cara yang benar.

Jika ada yang bisa saya bantu tolong beritahu saya, saya siap untuk menguji, hanya untuk mendapatkan RTL di jalur yang benar.
Anda meminta ini: "tolong bantu kami menguji PR # 17157 ... dan di atasnya?"

Salam Hormat

Desain Seni Kreatif
Kamal S.

@heshaShawky @CreativeArtDesign

Untuk menyertakan perbaikan yang belum digabungkan di aplikasi lokal Anda, dan mengujinya:

1. Kloning repo Ionic dengan PR dari garpu saya
2. Beralih ke cabang fix-rtl-host-context
3. Siapkan salinan lokal Anda
4. Bangun Ionic npm run build

Atau, sebagai baris perintah:

• git clone https://github.com/abennouna/ionic/ ionic-rtl-fixes-fork
• cd ionic-rtl-fixes-fork/
• git checkout fix-rtl-host-context
• npm install && cd core && npm install && cd ../angular && npm install && cd .. && npm run build

Kemudian Anda menghapus, lalu mengganti folder berikut di aplikasi Anda dengan folder dari build:

• local-build/core/css -> your-app/node_modules/@ionic/core/css
• local-build/core/dist -> your-app/node_modules/@ionic/core/dist
• local-build/core/loader -> your-app/node_modules/@ionic/core/loader
• local-build/angular/css -> your-app/node_modules/@ionic/angular/css
• local-build/angular/dist -> your-app/node_modules/@ionic/angular/dist

<ion-list>
<ion-item-sliding>
<ion-item>
<ion-label>Item</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option (click)="unread(item)">Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
ion-item-options tidak terlihat pada dokumen <htmldir="rtl"> .
Jika saya menyetel dir = "ltr" pada daftar ion-item-options sebagian terlihat

Menemukannya.

Seharusnya:

.item-options-start {
kanan: 0;
kiri: otomatis;
-ms-flex-pack: mulai;
justify-content: flex-start;
}

.item-options-end {
kiri: 0;
kanan: otomatis;
-ms-flex-pack: mulai;
justify-content: flex-start;
}

@abennouna Sepertinya repo Anda telah menyelesaikan sebagian besar masalah RTL saya (belum menemukan bug).

Apakah ada cara untuk menyetel RTL secara dinamis?

Saya memiliki aplikasi RTL, tetapi saya ingin popover tertentu dianimasikan dari kiri (karena tombolnya ada di sebelah kiri), bagaimana cara melakukannya?

@abenuna

Halo,
Saya mencoba memasukkan cabang Anda sesuai dengan instruksi Anda di npm run build , saya mendapatkan banyak kesalahan:

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:0
           Definitions of the following identifiers conflict with those in
           another file: describe, fdescribe, xdescribe, it, fit, xit,
           beforeEach, afterEach, beforeAll, afterAll, expect, clock,
           CustomEqualityTester, CustomMatcherFactory, DEFAULT_TIMEOUT_INTERVAL

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:24:12
           Duplicate identifier 'beforeAll'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:25:12
           Duplicate identifier 'beforeEach'.

     L24:  declare var beforeAll: jest.Lifecycle;
     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:26:12
           Duplicate identifier 'afterAll'.

     L25:  declare var beforeEach: jest.Lifecycle;
     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:27:12
           Duplicate identifier 'afterEach'.

     L26:  declare var afterAll: jest.Lifecycle;
     L27:  declare var afterEach: jest.Lifecycle;
     L28:  declare var describe: jest.Describe;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:31:12
           Duplicate identifier 'it'.

     L30:  declare var xdescribe: jest.Describe;
     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:32:12
           Duplicate identifier 'fit'.

     L31:  declare var it: jest.It;
     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:33:12
           Duplicate identifier 'xit'.

     L32:  declare var fit: jest.It;
     L33:  declare var xit: jest.It;
     L34:  declare var test: jest.It;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1009:45
           Generic type 'ArrayContaining<T>' requires 1 type argument(s).

   L1008:  function anything(): Any;
   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1010:44
           Generic type 'ObjectContaining<T>' requires 1 type argument(s).

   L1009:  function arrayContaining(sample: any[]): ArrayContaining;
   L1010:  function objectContaining(sample: any): ObjectContaining;
   L1011:  function createSpy(name?: string, originalFn?: (...args: any[]) => any): Spy;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1036:14
           All declarations of 'ArrayContaining' must have identical type
           parameters.

   L1036:      interface ArrayContaining {
   L1037:          new (sample: any[]): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1042:14
           All declarations of 'ObjectContaining' must have identical type
           parameters.

   L1042:      interface ObjectContaining {
   L1043:          new (sample: any): any;

[ ERROR ]  TypeScript: node_modules/@types/jest/index.d.ts:1170:8
           All declarations of 'message' must have identical modifiers.

   L1169:      pass: boolean;
   L1170:      message: string | (() => string);
   L1171:  }

[ ERROR ]  TypeScript: src/utils/focus-visible.ts:18:42
           Property 'key' does not exist on type 'Event'.

     L17:  doc.addEventListener('keydown', ev => {
     L18:    keyboardMode = FOCUS_KEYS.includes(ev.key);
     L19:    if (!keyboardMode) {

[ ERROR ]  TypeScript: src/utils/overlays.ts:51:13
           Property 'key' does not exist on type 'Event'.

     L50:  doc.addEventListener('keyup', ev => {
     L51:    if (ev.key === 'Escape') {
     L52:      const lastOverlay = getOverlay(doc);

[39:32.9]  build failed in 18.50 s

Saya berasumsi saya melakukan sesuatu yang salah di sini. Bisakah seseorang mengarahkan saya ke arah yang benar? Terima kasih!

@sndwav tidak yakin apa yang terjadi di sana - dapatkah Anda mencoba lagi untuk memastikan setiap langkah berhasil?

@abennouna Saya akan mencoba lagi pada proyek baru untuk menghilangkan masalah lain, tetapi hanya untuk memastikan: Saya mengkloning repo ke dalam folder di dalam proyek yang ada. Apakah itu cara yang benar untuk melakukannya, atau haruskah saya mengkloningnya ke folder yang benar-benar terpisah? Terima kasih.

(Saya mengkloningnya ke folder terpisah kali ini)

@sndwav Saya tidak yakin dengan hasilnya jika Anda mengkloning di dalam proyek yang sudah ada. Harap kloning sebagai folder terpisah.

@abennouna Berhasil , terima kasih! Saya mengkloningnya sebagai folder terpisah dan build berhasil. Kemudian saya menyalin folder, dan sekarang panah detail menghadap ke arah yang benar saat di RTL. Saya akan melakukan beberapa tes lagi nanti, tapi sejauh ini terlihat bagus!
Terima kasih atas semua usaha Anda.

@sndwav harap dicatat bahwa panah detail diperbaiki dalam master: Anda tidak perlu perbaikan konteks host untuk aspek itu.

batas pan-split dari menu disaper dalam mode rtl
.split-pane-side{ border-right: 0 !important; border-left: var(--border) !important; }
panel ion-menu tidak muncul di kanan dari tombol menu-toggle
label ion mengambang tidak diatur di kanan
-webkit-transform-origin: right top !important; transform-origin: right top !important;

Halo

Dalam ionik 3 kami memiliki: platform.setDir
Di sana kita bisa mengatur arah peron.

Tapi sekarang di ionic 4 sudah tidak ada.

Halo

Dalam ionik 3 kami memiliki: platform.setDir
Di sana kita bisa mengatur arah peron.

Tapi sekarang di ionic 4 sudah tidak ada.

Anda cukup menggunakan:

document.documentElement.setAttribute('dir', 'rtl');

atau

document.documentElement.setAttribute('dir', 'ltr');

Halo
Dalam ionik 3 kami memiliki: platform.setDir
Di sana kita bisa mengatur arah peron.
Tapi sekarang di ionic 4 sudah tidak ada.

Anda cukup menggunakan:

document.documentElement.setAttribute('dir', 'rtl');

atau

document.documentElement.setAttribute('dir', 'ltr');

Tidak bekerja dengan benar! Penggeser dan navigasi rusak menggunakan metode ini! apakah ada cara untuk membuat komponen ini disegarkan untuk mendapatkan nilai gaya RTL yang tepat

Tidak bekerja dengan benar! Penggeser dan navigasi rusak menggunakan metode ini! apakah ada cara untuk membuat komponen ini disegarkan untuk mendapatkan nilai gaya RTL yang tepat

Saya mencoba penggeser dengan instalasi ionik baru dan berfungsi dengan baik
tapi apa yang Anda maksud dengan "Navigasi"? jika maksud Anda menu samping, ini juga berfungsi dengan baik

kode saya:

tombol sakelar rtl:

  changeLang() {
    if (this.translate.currentLang === 'en') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }
  }

dalam konstruktor app.component.ts (setelah initializeApp ()):

    this.initializeApp();

    if (localStorage.getItem('lang') === 'ar') {
      localStorage.setItem('lang', 'ar');
      document.documentElement.setAttribute('dir', 'rtl');
      document.documentElement.setAttribute('lang', 'ar');
      this.translate.use('ar');
    } else {
      localStorage.setItem('lang', 'en');
      document.documentElement.setAttribute('dir', 'ltr');
      document.documentElement.setAttribute('lang', 'en');
      this.translate.use('en');
    }

catatan: Saya menggunakan ngx-translate

Tidak bekerja dengan benar! Penggeser dan navigasi rusak menggunakan metode ini! apakah ada cara untuk membuat komponen ini disegarkan untuk mendapatkan nilai gaya RTL yang tepat

@heshaShawky https://github.com/ionic-team/ionic/issues/17012#issuecomment -459670351

Tidak bekerja dengan benar! Penggeser dan navigasi rusak menggunakan metode ini! apakah ada cara untuk membuat komponen ini disegarkan untuk mendapatkan nilai gaya RTL yang tepat

@bayu_joo (komentar)

Itu bekerja dengan baik dengan slider tetapi sayangnya tidak menunya atau mungkin saya salah jadi jika Anda memiliki kode untuk menu akan menjadi hebat!

Terima kasih atas bantuan Anda.

Masalah Input Mengambang di RTL

Diuji pada CLI ionik 4.12.0

Halo,
Saat kami menyetel:

document.documentElement.setAttribute('dir', 'rtl');

Ada masalah dengan: posisi mengambang masukan ion
Seperti yang didokumentasikan: masukan Penggunaan mengambang

Saat kami menambahkan:

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

Pada fokus masukan, teks diubah ke kiri, bukan ke atas.

Untuk memperbaikinya saya menambahkan kelas ini di global.scss:

.label-floating.sc-ion-label-md-h,
.label-floating.sc-ion-label-ios-h {
    -webkit-transform-origin: right top;
    transform-origin: right top;
}

Semoga ini membantu !

bantuan apa pun dengan pengalihan ion-menu rtl / ltr karena tidak berfungsi menggunakan [side]='side' mana saya mengubah sisi ketika pengguna mengaktifkan ion-toggl
dan saya juga mencoba menggunakan
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
ketika toggling sebagian besar semua komponen beralih arah dengan sukses kecuali untuk menu ion

ada berita tentang daftar lengkapnya?

Menemukannya.

Seharusnya:

.item-options-start {
kanan: 0;
kiri: otomatis;
-ms-flex-pack: mulai;
justify-content: flex-start;
}

.item-options-end {
kiri: 0;
kanan: otomatis;
-ms-flex-pack: mulai;
justify-content: flex-start;
}

saya menambahkan modifikasi lain ke kelas karena yang paling atas hanya menyesuaikan tampilan UI tetapi menekan tombol tidak berfungsi dengan baik (karena salah satu wadah opsi geser-item membutuhkan 100% yang menimpa yang lain)

.item-sliding-active-slide.item-sliding-active-options-end ion-item- options: bukan (.item-options-start),
.item-sliding-active-slide.item-sliding-active-options-start .item-options-start {
lebar: otomatis;
}

halo @abennouna , saya punya masalah dengan icon di ion-list , tidak ada margin seperti di ltr.
apakah Anda tahu cara memperbaikinya?

 <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
            <ion-item [routerLink]="p.url">
              <ion-icon slot="start" [src]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>

Kenapa tidak ada update di v4 untuk semua hal yang diperbaiki?

bantuan apa pun dengan pengalihan ion-menu rtl / ltr karena tidak berfungsi menggunakan [side]='side' mana saya mengubah sisi ketika pengguna mengaktifkan ion-toggl
dan saya juga mencoba menggunakan
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
ketika toggling sebagian besar semua komponen beralih arah dengan sukses kecuali untuk menu ion

ada bantuan?

bantuan apa pun dengan pengalihan ion-menu rtl / ltr karena tidak berfungsi menggunakan [side]='side' mana saya mengubah sisi ketika pengguna mengaktifkan ion-toggl
dan saya juga mencoba menggunakan
document.documentElement.setAttribute('dir','rtl');
&
document.documentElement.setAttribute('dir','ltr');
ketika toggling sebagian besar semua komponen beralih arah dengan sukses kecuali untuk menu ion

ada bantuan?

Tambahkan ini ke file global.scss Anda:
.label-floating.sc-ion-label-md-h, .label-floating.sc-ion-label-ios-h { -webkit-transform-origin: right top; transform-origin: right top; }

Adakah pembaruan tentang masalah RTL geser item?

Perbaikan!

Saya telah menggabungkan perbaikan berikut untuk RTL yang akan dirilis besok ( 4.4.1 ):

• label mengambang / bertumpuk sekarang diposisikan dengan benar
• pin range memiliki panah di bagian bawah, bukan di kanan seperti sebelumnya
• tombol bilah pencarian diposisikan dengan benar
• lencana tab diposisikan dengan benar ( hanya di Chrome saat ini)
• tombol hebat diposisikan dengan benar
• ikon sakelar berada di tempat yang benar dan tidak keluar batas
• batas segmen dibalik sehingga menargetkan tombol pertama dan terakhir yang tepat di iOS

Build Dev Terbaru

Saya merilis versi pengembang jika Anda ingin mencobanya lebih awal: 4.5.0-dev.201905212141.24e9cf0

Bug yang Diketahui

Saya memeriksa semua daftar ini dan saya menemukan yang berikut ini benar-benar masih bug :

• lencana tombol tab (rusak di Safari)
• arah geser item
• tombol di item (slot end in item rusak oleh margin-left unset, kemungkinan di padding-horizontal mixin)
• teks tanggal waktu tidak sejajar dengan label

Perlu Verifikasi

Saya tidak sempat memeriksa hal-hal berikut:

• datetime beberapa kolom
• menu / menu-toggle

Jika ada yang bisa memberi tahu saya jika ada sesuatu yang saya lewatkan atau jika Anda telah melakukan debugging dan mungkin tahu di mana masalahnya untuk beberapa di antaranya, itu akan sangat membantu. Terima kasih!

@tokopedia
menggesek untuk kembali ke arah yang salah seharusnya sebaliknya

ini adalah masalah yang sangat penting, saya harap Anda dapat memperbaikinya dengan rilis ini :)

@tokopedia

Bug yang Diketahui

...

• tombol di item (slot end in item rusak oleh margin-left unset, kemungkinan di padding-horizontal mixin)

FYI, saya tidak bisa mereproduksi dalam tes "item / tombol".

• teks tanggal waktu tidak sejajar dengan label

-> PR # 18340

Perlu Verifikasi

Saya tidak sempat memeriksa hal-hal berikut:

• datetime beberapa kolom

Lebarnya masih putus -> PR # 18339

• menu / menu-toggle

tidak yakin tentang yang satu ini.

Luar biasa terima kasih @abennouna! Saya menggabungkan perbaikan Anda. 🙂

Saya tidak dapat mereproduksi yang berikut ini:

Elemen Float: float-start, float-end, & versi responsifnya (regresi: # 17012 (komentar))

| ltr | rtl |
| --- | --- |
| | |

Saya tidak dapat mereproduksi yang berikut ini:

Elemen Float: float-start, float-end, & versi responsifnya (regresi: # 17012 (komentar))

Maaf @brandyscarney Anda benar, saya rasa saya mengujinya sebelum menarik diri dari master 🤨🤦

Terima kasih @ alaa-alshamy! Saya telah menambahkannya ke masalah. Tidak akan ada perbaikan untuk itu dalam rilis hari ini karena masih membutuhkan investigasi, debugging dan solusi yang ditemukan. 🙂

Perbaikan!

Saya telah menggabungkan perbaikan berikut untuk RTL yang akan dirilis besok ( 4.4.1 ):

* **floating/stacked labels** are now positioning properly

* **range** pin has the arrow on the bottom instead of on the right like previously

* **searchbar** buttons are positioning properly

* **tab** badge is positioning properly (in Chrome **only** at the moment)

* **fab** buttons are positioning properly

* **toggle** icon is in correct place and not going out of bounds

* **segment** border is flipped so that it targets the proper first and last buttons in iOS

Build Dev Terbaru

Saya merilis build dev jika Anda ingin mencobanya lebih awal: 4.5.0-dev.201905212141.24e9cf0

Bug yang Diketahui

Saya memeriksa semua daftar ini dan saya menemukan yang berikut ini benar-benar masih bug :

* tab-button badges (broken in Safari)

* item sliding direction

* button in item (slot end in item is broken by the margin-left unset, likely in the padding-horizontal mixin)

* datetime text is not aligning with the label

Perlu Verifikasi

Saya tidak sempat memeriksa hal-hal berikut:

* datetime multiple columns

* menu / menu-toggle

Jika ada yang bisa memberi tahu saya jika ada sesuatu yang saya lewatkan atau jika Anda telah melakukan debugging dan mungkin tahu di mana masalahnya untuk beberapa di antaranya, itu akan sangat membantu. Terima kasih!

Sepertinya perbaikan batas segmen tidak berfungsi di iOS. Saya telah memperbarui ke @ ionic / angular 4.4.2.

Terima kasih @loopezz! Saya menambahkannya ke masalah asli.

Saya baru saja mengirimkan PR untuk memperbaiki metode gerakan geser / buka item di sini: https://github.com/ionic-team/ionic/pull/18366

Saya menerbitkan versi pengembang jika ada yang ingin mengujinya: 4.5.0-dev.201905231504.7ab9479

Masalah Ionic 4.4.2:
ion-item-sliding tidak berfungsi dengan benar dalam mode rtl,
Saat arah index.htlm adalah dir "rtl"
Tombol tidak muncul dalam mode RTL.
Beri tahu saya jika ada solusi lain.
Terima kasih

Saya tidak dapat mereproduksi yang berikut ini:

Elemen Float: float-start, float-end, & versi responsifnya (regresi: # 17012 (komentar))

@brandyscarney Sekarang saya dapat mereproduksi di Safari.

Juga, tidak yakin apakah itu membantu: take float-start , aturan yang dihasilkan dikelompokkan dan muncul Safari mengabaikan aturan yang tidak dapat diurai:

.ion-float-start,
[float-start] {
  float: left !important;
}
[dir=rtl] .ion-float-start,
:host-context([dir=rtl]) .ion-float-start,
[dir=rtl] [float-start],
:host-context([dir=rtl]) [float-start] {
  float: right !important;
}

(Safari membutuhkan non- :host-context )

Stylesheet

Sebenarnya CSS sudah diurai

Terima kasih @abennouna! Bisakah Anda memperbarui masalah ini? Mungkin kita perlu memperbarui add-root-selector untuk mengembalikannya sebagai dua penyeleksi terpisah?

@brandyscarney masalah diperbarui. Mengembalikan 2 pemilih di add-root-selector memecahkan masalah ini. Semoga tidak ada perubahan-perubahan 😅

@abennouna Bagaimana dengan masalah ion-item-sliding RTL?

@tokopediaPerbaikannya adalah bagian dari rilis 4.4.2. Dapatkah Anda membagikan repo minimal untuk mereproduksi masalah Anda?

Maaf untuk itu, lihat komentar Brandy di bawah 👇

@shahramSo Masalah geser item sudah diperbaiki, hanya belum dirilis. Ini akan ada dalam rilis 4.5.0 hari ini jika semuanya berjalan dengan baik, tetapi jika Anda membutuhkannya segera lihat komentar saya di sini untuk rilis dev: https://github.com/ionic-team/ionic/issues/17012 #issuecomment -495259725

@brandyscarney Apakah ada cara agar saya dapat menggunakan kembali SCSS yang sama yang ditulis dalam aplikasi ionik 3?
@ include padding (10px, 5px, 8px, 10px)

Saya mendapat kesalahan "Tidak ada mixin bernama padding"

Menu ini berfungsi saat diatur saat startup (terbuka dari kanan). Namun bila di set / diubah secara dinamis maka akan terbuka dari kiri. Apakah ini masalah yang diketahui?

Lihat: https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50/

Apakah ada perkembangan / kemajuan terkait RTL (kapan direncanakan untuk dimasukkan ke dalam Ionic4)? Atau apakah upaya yang didorong oleh komunitas ini?

@abenuna

masalah ini: https://github.com/ionic-team/ionic/issues/17012#issuecomment -456785167

masih ada di perangkat / simulator ios asli tetapi tidak di browser!

versi ionik: 4.7.1

ini terjadi karena gaya berikut:

:host( .fab-horizontal-center) {
margin-left: unset;
}

menghapus unset akan menyelesaikan masalah tetapi saya tidak yakin bagaimana cara menimpa / membatalkannya
Saya mencoba semua nilai lain untuk margin tetapi tidak berhasil
hanya menghapusnya yang akan memperbaiki masalah!

Tidak yakin apakah ini akan berhasil, saya tidak memiliki akses untuk mengujinya, tapi mungkin Anda
bisa mencoba

: host (.fab-horizontal-center): lang (en) {
margin-left: tidak disetel;
}

https://www.w3schools.com/cssref/sel_lang.asp

Pada Selasa, 6 Agustus 2019 pukul 22:37 Adel Ali [email protected] menulis:

ini terjadi karena gaya berikut:

: host (.fab-horizontal-center) {
margin-left: tidak disetel;
}

menghapus tidak disetel akan menyelesaikan masalah tetapi saya tidak yakin bagaimana caranya
timpa / batalkan
Saya mencoba semua nilai lain untuk margin tetapi tidak berhasil
hanya menghapusnya yang akan memperbaiki masalah!

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/ionic-team/ionic/issues/17012?email_source=notifications&email_token=AAHJ3YMNSR6XM3ETE5RWV7LQDHHIHA5CNFSM4GO4IEF2YY3PNVWWK3TLONUL52HS4DFVREXG43VLOK3WHHHA5CNFSM4GO4IEF2YY3PNVWWK3K3TUL52HS4DFVREXG43VLOK3B282HS4DFVREXG43VNV3B288
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AAHJ3YPFJSDPK4KG7ZKD7BLQDHHIHANCNFSM4GO4IEFQ
.

terima kasih @mrahmadt tapi tidak berhasil

solusinya adalah:

di global.scss

.fab-horizontal-center {
    margin-left: -28px !important;
}

juga saya perhatikan bahwa posisi start yang menakjubkan tidak berubah arah dalam mode RTL di simulator / perangkat ios

ion-slides rtl tidak berfungsi dengan baik?
bantuan apapun

Halo, saya punya masalah dengan menu samping di perangkat iOS yang sebenarnya
Terbuka dari kiri ke kanan dalam mode RTL !!
Adakah yang bisa membantu saya dengan itu atau siapa pun yang telah memperbaiki masalah ini

@tokopedia
pembaruan apa pun terkait ion-slide rtl

pembaruan apa pun pada dukungan RTL untuk ion-slide jika saya mengubah dir dokumen ke RTL, ion-slide berhenti menyapu di antara slide

pembaruan apa pun pada dukungan RTL untuk ion-slide jika saya mengubah dir dokumen ke RTL, ion-slide berhenti menyapu di antara slide

Ini menggesek tetapi ke arah yang salah

@abennouna saya masih melihat masalah "ikon pilih di iOS: perbaiki posisi elemen dalam" pada versi saat ini, meskipun seharusnya sudah diperbaiki sesuai dengan deskripsi masalah.

@abennouna Sepertinya kolom di ion-picker tidak berganti posisi berdasarkan mode LTR vs RTL: https://github.com/ionic-team/ionic/issues/21205.

Karya sebelumnya tampaknya menunjukkan bahwa ini disengaja:

tanggal Waktu
☑️ alat pilih di iOS / MD: perbaiki posisi horizontal kolom mulai / akhir ketika ada 2 atau 3 kolom pemilih (PR # 18339)
☑️ dengan label mengambang atau bertumpuk: teks tanggal waktu harus tetap dalam aliran dokumen (regresi) (PR # 18340)
✅ picker di iOS / MD: pertahankan urutan kolom seperti di LTR saat menggunakan format tanggal waktu dan / atau DD / MM / YYYY (lihat # 16294) (PR: # 17018)

Apakah Anda ingat alasan di balik ini?

Halo semuanya,
Saya menemukan beberapa masalah dengan komponen geser-item-ion di RTL (Ionic 5):
Pertama:
ion-item-options tidak terbuka dengan benar terutama di iOS
Saya memperbaikinya dengan css:
ion-item-options {
lebar: tidak disetel! penting;
}
itu memperbaiki masalah dan opsi muncul benar di LTR dan RTL

Kedua:
ketika saya mencoba membukanya secara terprogram dengan metode .open ('end'), itu dibuka di LTR tetapi dengan RTL itu mengaktifkan kelas bernama: item-sliding-active-options-start tetapi sisinya diakhiri jadi tidak ' t terbuka:
Untuk memperbaikinya saya menambahkan ion-item-options kedua dengan side = "start" dan setelah membukanya dan melakukan apa yang saya inginkan, saya menghapusnya. Ini bukan solusi yang baik tapi itu memecahkan masalah saya sekarang.

Hei. Saya ingin tahu apakah gesekan untuk kembali ke arah belakang sudah diselesaikan atau belum. Karena arahnya tidak berubah sekarang.

https://github.com/ionic-team/ionic-framework/issues/19488

<ion-list> ikon detail menunjukkan arah yang salah saat mengubah arah di halaman yang sama (tanpa memuat ulang) menggunakan: document.documentElement.setAttribute('dir', 'ltr');

Halo, saya punya masalah dengan menu samping di perangkat iOS yang sebenarnya
Terbuka dari kiri ke kanan dalam mode RTL !!
Adakah yang bisa membantu saya dengan itu atau siapa pun yang telah memperbaiki masalah ini

ini tidak bekerja untuk saya juga ..

@ChiragPrajapat , saya baru saja melaporkan bug untuk masalah ini dan menunjukkan panduan tentang itu, periksa dan berharap, ini berguna untuk Anda.
https://github.com/ionic-team/ionic-framework/issues/22116