Ionic-framework: Tambahkan Dukungan Kanan Ke Kiri
_From @ mashaly100200 pada 30 Desember 2015 17: 24_
mohon tambahkan dukungan rtl ke animasi dan komponen
_Disalin dari masalah asli: driftyco / ionic2 # 832_
mhartington
Semua 75 komentar
_From @adamdbradley pada 30 Desember 2015 17: 38_
Ya, ini ada di peta jalan kami untuk diselesaikan dan kami ingin mendapatkan lebih banyak umpan balik dari pengembang RTL berpengalaman untuk membantu kami menunjukkan di mana kami perlu meningkatkan. Apakah Anda dapat memberikan daftar periksa bagian tertentu ionic2 yang tidak bekerja dengan baik dengan RTL. Tujuan kita adalah untuk menyediakan file RTL css tambahan, dan memiliki JS yang menyesuaikan tergantung apakah elemen html memiliki dir="rtl" atau tidak. Terima kasih
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 18:39_
Dengan senang hati saya membantu tim ionic2 untuk mendukung RTL
firest mudah untuk melihat apa saja efek buruknya jika kita menggunakan arah rtl
kita dapat menambahkan attr ini ke tag html yang akan mengubah semua situs web menjadi rtl
atau
kita bisa menggunakannya di tubuh sebagai gaya seperti ini
style = " direction: rtl "
jika tim ionik berencana untuk mendukung rtl
Anda perlu menambahkan arah target dalam konfigurasi Aplikasi, karena aplikasi perlu mengetahui arah saat memulai
, dan jika pengembang perlu mengubah bahasa aplikasi ke bahasa rtl saat runtime maka kita harus menyegarkan semua aplikasi (seperti android asli, aplikasi windows phone, ios perlu memulai ulang aplikasi untuk mengubah arahnya)
sekarang ketika saya mencoba untuk mengubah arah html ionic2 saya menemukan bahwa ada hal-hal yang sudah mendukung arah rtl karena html murni tahu bagaimana menangani arah rtl
Tapi ada hal-hal yang perlu mendukung arah rtl
hal pertama adalah animasi
saya tidak tahu apakah tim ionik melakukan animasi dengan css atau kode javascript, dalam kedua kasus semua penyihir animasi memiliki rtl atau ltr perlu menambahkan arah animasi lain, tidak hanya mengubah varialbe tetapi menambahkan satu sama lain karena banyak hal perlu diubah
Saya ingin memberikan bantuan semampu saya kepada tim ionik untuk membantu di perpustakaan yang hebat ini
Saya tahu bahasa Inggris saya tidak bagus, tapi saya harap Anda mengerti kata-kata saya :)
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 18: 44_
tlg ubah tujuan ini "Sasaran kami adalah menyediakan file css RTL tambahan"
karena kita membutuhkan dua arah dalam aplikasi yang sama, berdasarkan pilihan pengguna, suatu saat akan berada dalam runtime
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 30 Desember 2015 18: 51_
kita membutuhkan dua arah dalam aplikasi yang sama, berdasarkan pilihan pengguna, suatu saat akan berada dalam runtime
Ionic sendiri akan dapat secara dinamis menambahkan file css ini untuk Anda, tergantung pada <html dir="rtl">
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 19: 23_
img ini dari mencoba mengubah arah contoh aplikasi konferensi-onik
jika tim ionik mencakup arah rtl dalam contoh ini saya pikir itu tidak akan kurang dari 90% dari dukungan rtl
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 19: 26_
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 19: 27_
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 30 Desember 2015 20: 21_
ikon apa pun yang berupa panah kanan, kiri, belakang, atau maju seperti ikon tombol kembali akan memerlukan gaya ini
{
-webkit-transform: rotate (180deg);
-moz-transform: rotate (180deg);
-o-transform: rotate (180deg);
-ms-transform: rotate (180deg);
transform: rotate (180deg);
}
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 31 Desember 2015 4: 27_
Jadi @brandyscarney memiliki ide yang bagus bahwa kami membuat semua file RTL scss di dalam repo dan menyiapkannya untuk diisi.
Saya berpikir bahwa alih-alih menambahkan rtl css secara dinamis, kita dapat memiliki variabel default $rtl-support: false sass yang dapat diperbarui di variabel sass setiap aplikasi. Jadi dalam banyak kasus, rtl css tambahan tidak akan ditambahkan ke aplikasi, tetapi bagi mereka yang membutuhkan rtl css mereka dapat mengatur $rtl-support: true .
Kemudian di dalam file rtl scss baru kami, css dapat dibungkus dengan <strong i="12">@if</strong> $rtl-support . Dengan cara ini kita dapat memisahkan file css dan lebih mudah diedit, dan menyediakan dukungan rtl. Pikirkan ini akan berhasil @ mashaly100200 ?
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada tanggal 31 Desember 2015 11: 48_
ya, memuat rtl secara dinamis adalah ide yang bagus,
Mari kita mulai dengan animasi, karena mungkin perlu lebih banyak usaha
- Saya ingin tahu apakah mungkin menambahkan animasi transisi halaman tertentu ketika melakukan push dan pop halaman?
- dan bagaimana pengembang menambahkan animasi spesifik ini ke halaman derek yang masuk dan keluar?
- Bisakah pengembang menonton kembali acara kemudian menambahkan animasi spesifiknya juga ke dua halaman?
jika jawaban Anda adalah ya untuk tiga pertanyaan sebelumnya, maka saya dapat mengucapkan selamat kepada diri saya sendiri karena topik animasi tidak memerlukan usaha apa pun dan dukungan penuh rtl direction dan tim ionik pantas mendapatkan banyak terima kasih :)
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 1 Januari 2016 1: 53_
Ini adalah animasi transisi untuk iOS: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts
Tidak yakin apakah ini harus menambahkan logika untuk RTL, atau jika harus ada animasi baru sebagai gantinya. Namun Anda dapat menambahkan transisi Anda sendiri, dan mengganti konfigurasi pageTransition : https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 1 Januari 2016 21: 55_
hai @adamdbradley , selamat natal
saya menyelesaikan kelas animasi khusus yang membalikkan perilaku kelas animasi default bergantung pada documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
saya mengujinya, dan saya akan mengujinya dalam proyek nyata segera (insyaa allah)
juga saya menyelesaikan beberapa kelas css yang perlu dibalik
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9
dan jika saya menghadapi lebih banyak kelas yang perlu dibalik, saya akan menambahkannya ke file ini sampai saya menyelesaikan satu atau dua proyek nyata
juga rtl membutuhkan konfigurasi ini dalam konstruktor aplikasi
https://gist.github.com/mashaly100200/692160b036422d7b018c
saya mencoba menambahkan semua konfigurasi di satu tempat sehingga saya menemukan bahwa saya dapat menambahkan semua hal di kontraktor aplikasi
semoga hal ini dapat membantu membuat ionic2 mendukung penuh rtl
Silakan menambahkan koreksi atau saran apa pun.
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 2 Januari 2016 3: 2_
Keren, jadi sepertinya transisi RTL sangat dekat dengan transisi LTR, yang membuat saya berpikir itu harus menjadi opsi isRTL yang diteruskan ke opsi transisi dan kami hanya memiliki satu transisi. Saya dapat memperbarui ionik sehingga memiliki properti isRTL yang dapat direferensikan di seluruh aplikasi (dengan webworker kami ingin menghindari melakukan document membaca dalam logika ionik).
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 2 Januari 2016 3: 36_
Menambahkan isRTL() menjadi Platform : https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 2 Januari 2016 3: 58_
Semua transisi sekarang diteruskan isRTL dalam opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798
Jadi sekarang transisi ios dapat menambahkan logika untuk transisi RTL.
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 2 Januari 2016 4: 38_
Menambahkan bagaimana kita dapat menyertakan RTL css sehingga dibangun dengan benar dalam ionic.css (yang mencakup md dan ios css) dan ionic.ios.css (hanya ios). Pikirannya adalah bahwa aplikasi yang ingin menyertakan RTL dan LTR css dalam file yang sama dapat mengatur $include-rtl: true dalam variabel sass mereka, jika tidak maka default hanya akan menyertakan LTR css. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231
mhartington
pada 18 Jan 2016
_Dari @MatanYed pada 6 Januari 2016 18: 14_
Sekadar informasi: Aplikasi RTL di iOS sebagian LTR:
Sisi tombol bilah navigasi utama kiri, menu samping kiri, animasi transisi dari kiri ke kanan.
mhartington
pada 18 Jan 2016
_From @adamdbradley pada 7 Januari 2016 16: 41_
Menambahkan metode baru ke platform untuk mendapatkan dan mengatur bahasa dan arah: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f
mhartington
pada 18 Jan 2016
_From @ mashaly100200 pada 12 Januari 2016 21: 2_
memperbarui
untuk siapa saja yang membahas topik ini
menggantikan
config.set ('backButtonIcon', 'ion-ios-arrow-forward');
dengan
config.set ('backButtonIcon', 'arrow-forward');
juga saya memperbarui kelas animasi
https://gist.github.com/mashaly100200/bf713f2b558285322155
mhartington
pada 18 Jan 2016
Saya telah menangani masalah ini pada aplikasi seluler moodle untuk perusahaan kami dan kami memerlukan aplikasi tersebut untuk mendukung bahasa Inggris dan Arab dalam waktu yang bersamaan, jadi ini bukan masalah untuk mengalihkan semua arah ke RTL tetapi harus dijalankan waktu. Saya menggunakan beberapa tweak di awal menggunakan ng-if dan beberapa penyiaran melalui rootscope di aplikasi, tetapi setiap kali pengguna mengubah bahasa, aplikasi perlu memuat ulang, hal-hal tidak berfungsi sama sekali dengan metode ini.
Tiga hari yang lalu, saya mulai berkelahi dengan Ionic (ini menjadi masalah universal :)), Tim moodle membuka masalah saat ini, tetapi saya rasa mereka tidak akan melihatnya.
Saya tidak menggunakan Ionic 2 tetapi pendekatan saya dalam masalah ini sangat sederhana, dengan atribut sisi ionik dalam direktif ionik (menurut saya direktif yang paling peduli dengan masalah RTL memiliki atribut ini) akan membuat solusi lebih mudah daripada yang terlihat.
Saya mencoba menimpa arahan untuk menambahkan pengikatan ke atribut samping karena sekarang, itu tidak menambahkan beberapa keselarasan ke konten lainnya menggunakan css di app.scss, dan dengan bantuan terjemahan sudut dan arus implementasi aplikasi moodle, perbarui kiri dalam kata di kelas dan sisi ke kanan dan sebaliknya setiap kali bahasa berubah.
Saya masih menerapkannya saat saya berharap ini akan berhasil (tetap harus berhasil).
mohessaid
pada 15 Feb 2016
setelah menambahkan dir = "rtl" ke index.html, rendering elemen akan dimulai dari kanan, yang memengaruhi tampilan beberapa elemen, seperti tombol segmen.
untuk memperbaikinya saya berubah
.segment-button:first-of-type {
border-radius: 4px 0 4px 0;
margin-left: 0; }
.segment-button:not(:first-of-type) {
border-left-width: 0; }
.segment-button:last-of-type {
border-left-width: 0;
border-radius: 4px 0 0 4px;
margin-left: 0; }
untuk
.segment-button:first-of-type {
border-radius: 0 4px 4px 0;
margin-right: 0; }
.segment-button:not(:first-of-type) {
border-right-width: 0; }
.segment-button:last-of-type {
border-right-width: 0;
border-radius: 4px 0 0 4px;
margin-right: 0; }
Animasi Nav harus berlawanan dengan arah aplikasi, dari kiri untuk aplikasi RTL dan dari kanan untuk aplikasi LTR. untuk memperbaikinya saya melakukan ini:
berubah
var OFF_RIGHT = '99.5%';
untuk
var OFF_RIGHT = '-99.5%';
dan
var OFF_LEFT = '-33%';
untuk
var OFF_LEFT = '33%';
dan
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
untuk
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '-100%');
}
dalam sudut ionik / transisi / transisi-ios
dan untuk elemen belakang di bilah Nav, saya meletakkan ikon sebelum teks, dan mengubah ikon menjadi maju.
@App({
config: {
backButtonText: 'الرجوع', // this is arabic or whatever
backButtonIcon:'ios-arrow-forward'
// | ion-ios-arrow-back | ion-md-arrow-back
} // http://ionicframework.com/docs/v2/api/config/Config/
})
placeholder di input bilah pencarian bisa diperbaiki
dengan melakukan perubahan ini (ubah semuanya dari kiri ke kanan)
.searchbar-search-icon {
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2013'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1%20M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0%20L5,0z'/><line%20stroke='rgba(0,%200,%200,%200.5)'%20stroke-miterlimit='10'%20x1='12.6'%20y1='12.6'%20x2='8.2'%20y2='8.2'/></svg>");
background-size: 13px;
background-repeat: no-repeat;
position: absolute;
left: 9px;
top: 9px;
margin-left: calc(50% - 60px);
-webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
.searchbar-input {
height: 3rem;
line-height: 3rem;
padding: 0 28px;
font-size: 1.4rem;
font-weight: 400;
border-radius: 5px;
color: #000;
background-color: #FFFFFF;
padding-left: calc(50% - 28px);
-webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
.searchbar-input::-moz-placeholder {
color: rgba(0, 0, 0, 0.5); }
.searchbar-input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.5); }
.searchbar-input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.5);
text-indent: 0; }
untuk
.searchbar-search-icon {
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2013%2013'><path%20fill='rgba(0,%200,%200,%200.5)'%20d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1%20M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0%20L5,0z'/><line%20stroke='rgba(0,%200,%200,%200.5)'%20stroke-miterlimit='10'%20x1='12.6'%20y1='12.6'%20x2='8.2'%20y2='8.2'/></svg>");
background-size: 13px;
background-repeat: no-repeat;
position: absolute;
right: 9px;
top: 9px;
margin-right: calc(50% - 60px);
-webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
.searchbar-input {
height: 3rem;
line-height: 3rem;
padding: 0 28px;
font-size: 1.4rem;
font-weight: 400;
border-radius: 5px;
color: #000;
background-color: #FFFFFF;
padding-right: calc(50% - 28px);
-webkit-transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1);
transition: all 400ms cubic-bezier(0.25, 0.45, 0.05, 1); }
.searchbar-input::-moz-placeholder {
color: rgba(0, 0, 0, 0.5); }
.searchbar-input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.5); }
.searchbar-input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.5);
text-indent: 0; }
wis
pada 14 Mar 2016
dalam file: ionic.bundle.js
ubah kodenya:
setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
ubah menjadi:
setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
if (content.offsetX > 0)
{
xTransform = amount;
}
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
Saya tahu ini bukan solusi yang baik tetapi saya harus melakukannya.
dan saya menambahkan css ini:
a , h1 , h2 , span , div{
text-align: right;
}
.title.title-left.header-item{
left : 0 !important;
}
label.item,
ion-nav-buttons,
ion-header-bar{
direction: rtl;
}
.item-checkbox {
padding-right: 60px;
}
.ion-android-arrow-back:before {
content: ""; }
.ion-android-arrow-forward:before {
content: ""; }
dan membuat menu di sebelah kanan:
<ion-side-menus enable-menu-with-back-views="false" >
<ion-side-menu side="right" expose-aside-when="large">
<ion-header-bar class="bar-positive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
MuhammadRashed
pada 27 Mar 2016
ya itulah yang kita tunggu, dan itu akan luar biasa
terima kasih tim ionik
lanjutkan: +1:
alaa-alshamy
pada 16 Apr 2016
EDIT: tidak peduli ini sudah diperbaiki
sijav
pada 31 Mei 2016
ion-item-sliding harus swipe-left opsi untuk versi rtl seperti ini:
<ion-item-sliding swipe-left>
<ion-item>
<ion-avatar item-right>
<img src="img/slimer.png">
</ion-avatar>
<h2>Slimer</h2>
</ion-item>
<ion-item-options>
<button primary>
<ion-icon name="text"></ion-icon>
Text
</button>
<button secondary>
<ion-icon name="call"></ion-icon>
Call
</button>
</ion-item-options>
</ion-item-sliding>
hemedani
pada 1 Jun 2016
Hai,
Saya sedang mengerjakan ionic 2.0. bagaimana cara mengurangi lebar navigasi kiri.
rejeeshrajan10
pada 21 Jun 2016
Bagaimana Anda menangani Gestur dengan rtl di v2?
Saya perlu memperbaikinya untuk platform iOS di ionic v1. Tidak yakin bagaimana iPhone menangkap swipe-right di RTL.
Saya bisa mengubah arah sidemenu dan arah swiping di rtl.
https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl
https://github.com/msoni11/ionic-bower/releases/tag/v1.1.1-rtl
msoni11
pada 2 Jul 2016
Ketika fitur RTL akan dipublikasikan, itu akan dapat mengubahnya setelah menjalankan aplikasi (maksud saya perubahan langsung antara ltr ke rtl?
Sama seperti aplikasi asli yang memiliki halaman perubahan bahasa di aplikasi.
MatanYadaev
pada 19 Jul 2016
@MatanYed : Ya itu akan. Itu pasti. Ini cukup langsung dalam aplikasi hybrid hanya dengan mengubah arah dan teks-align menggunakan CSS.
msoni11
pada 19 Jul 2016
@mhartington : saat menggunakan label ion mengambang dengan arah RTL, label mengambang tidak sejajar ke kanan, tetapi di suatu tempat di tengah, saat mengetik teks di bidang masukan.
apakah ada solusi untuk itu?
<ion-list dir="rtl"> <ion-item> <ion-label floating >{{ usrTitle }}</ion-label> <ion-input type="text" [(ngModel)]="usrValue"></ion-input> </ion-item> <ion-item> <ion-label floating >{{ pswTitle }}</ion-label> <ion-input type="password" [(ngModel)]="pswValue"></ion-input> </ion-item></ion-list>
devoraf
pada 25 Jul 2016
+1
royipressburger
pada 25 Jul 2016
@royipressburger (_regards "+1" _) - ada tombol "jempol ke atas" emotikon & "Berlangganan" jika Anda ingin mendukung atau mengikuti.
astec
pada 25 Jul 2016
@mhartington , @ msoni11 : ada jawaban? Saya benar-benar terjebak dengan itu.
devoraf
pada 27 Jul 2016
@ devoraf : Saya tidak yakin versi ionik mana yang Anda gunakan. Di ionic v1 saya telah bermain dengan RTL css dan elemen bentuk bekerja untuk saya.
msoni11
pada 27 Jul 2016
@ msoni11 : ionik v2. apakah perilaku mengambang khusus ini bekerja dengan baik untuk Anda?
devoraf
pada 27 Jul 2016
@ devoraf : Saya belum mencoba v2. Aplikasi saya memiliki banyak kode yang ditulis di v1 jadi saya meretas v1 untuk mengizinkan RTL.
msoni11
pada 27 Jul 2016
@ msoni11 : dapatkah Anda melampirkan contoh css yang mungkin mempengaruhi penyelarasan / arah label mengambang?
devoraf
pada 27 Jul 2016
+1
RezaHaidari
pada 29 Jul 2016
@ devoraf : Maaf, tetapi saya belum menggunakan label mengambang. Saya telah menggunakan elemen formulir ini dan membuatnya sejajar untuk RTL.
msoni11
pada 30 Jul 2016
Saya tidak tahu apakah itu telah dinyatakan, tetapi bahkan menavigasi halaman menjadi kacau ketika dir="rtl" ditambahkan ke <html> tag. Di Ionic 2 banyak komponen yang saya gunakan tidak mendukungnya dan saya akhirnya beralih kembali ke Ionic 1. Sekarang saya dapat melakukan sesuatu tentang komponen dan belum menemukan apa pun yang menjadi masalah bagi saya, tetapi navigasi menjadi kacau balau up dan saya mendapatkan layar putih atau halaman yang lambat. Ketika saya menghapus dir="rtl" semuanya bekerja dengan sempurna.
Apakah saya melakukan sesuatu yang salah atau $state.go() sebenarnya tidak bekerja dengan rtl sama sekali?
loolooii
pada 3 Agu 2016
@loolooii : Anda harus menambahkan css agar ionik 1 berfungsi untuk RTL
.rtl, html[dir=rtl] {
direction: rtl;
text-align: right;
}
/** To fix empty page issue in rtl. **/
.rtl .click-block-hide {
<strong i="7">@include</strong> translate3d(9999px, 0, 0);
}
Gunakan versi ionic rtl ini https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl dan Anda akan dapat menggeser ke kanan di RTL.
msoni11
pada 4 Agu 2016
@ msoni11 Terima kasih! Hal-hal mengagumkan.
loolooii
pada 4 Agu 2016
@loolooii : :) Saya telah menulis posting kecil juga di mana saya menyebutkan bagaimana implementasi aktual akan bekerja di aplikasi ionik. Cek di sini
msoni11
pada 4 Agu 2016
Ada pembaruan tentang masalah RTL?
MatanYadaev
pada 31 Okt 2016
Adakah pembaruan tentang ini? , juga mengapa tim ionik menghapusnya dari beta 12?
OmarHassan25
pada 5 Des 2016
Saya pikir jika kami mencantumkan semua masalah RTL dari masukan pengembang, kami dapat berkontribusi dan memperbaikinya satu per satu, pada akhirnya, kami akan mendapatkan dukungan RTL penuh.
Khalid-Nowaf
pada 21 Des 2016
RTL sangat penting! Apakah ada jangka waktunya?
AmitMY
pada 11 Feb 2017
@AmitMY Tidak yakin tentang ionic2 tetapi untuk ionic1 salah satu aplikasi langsung saya berjalan cukup baik dengan dukungan RTL.
msoni11
pada 12 Feb 2017
@ msonia Terima kasih. Saya berbicara tentang Ionic2.
AmitMY
pada 12 Feb 2017
@AmitMY @ msoni11 Saya akan segera bekerja dalam proyek menengah menggunakan IONIC 2, kemudian saya akan melihat semua Masalah RTL jika ada.
Khalid-Nowaf
pada 12 Feb 2017
@ Khalid-Nowaf: Saya akan dengan senang hati membantu.
msoni11
pada 12 Feb 2017
@ msoni terima kasih! Aku akan terus mengabari kalian.
Khalid-Nowaf
pada 12 Feb 2017
RTL hadir di peta jalan RC 12, saya tidak tahu mengapa mereka menjatuhkannya ?!
OmarHassan25
pada 13 Feb 2017
Halo, saya tidak melihat ion-slide di utas panjang ini?
Itu juga membutuhkan dukungan.
Saya telah memposting di sini permintaan
http://idangero.us/swiper/forum/#!/general : support-for-pagination-righ
solusi saya, belum dikodekan, akan mengisi slide ke belakang, dan pindah ke slide terakhir saat memulai. Saya berasumsi bahwa saya memiliki peristiwa yang tepat untuk mendeteksi akhir pemutaran, ketika pemutaran mencapai slide pertama :)
Sebuah kata hati-hati meskipun saya bukan seorang ahli.
Saya berharap dukungan RTL direncanakan di tingkat komponen dan tidak hanya dan secara eksklusif di tingkat aplikasi.
Saya mungkin menginginkan aplikasi saya sebagian besar dalam bahasa Inggris, seperti label tab / tombol tetapi konten konsumsi aktual dalam bahasa Arab. Misalnya, seperti perilaku penggeser / pager yang diinginkan atau dapat dikonfigurasi ke RTL karena orientasi teks dan grafisnya RTL.
ya! Saya sudah menyingkirkan scrollbar yang buruk itu.
Saya juga mungkin memiliki halaman dengan 2 daftar masing-masing dalam bahasa yang berbeda.
<ion-list flow=RTL>....
<ion-list flow=LTR>....
AlGantori
pada 14 Feb 2017
Saat dalam mode rtl, tidak ada margin antara rentang dan labelnya, oleh karena itu ikon di kedua sisi tidak terlihat sebagian.
Mohsen7s
pada 15 Feb 2017
Sebagai bagian dari ini, kami juga harus melihat masalah ini https://github.com/driftyco/ionic/issues/10685
jgw96
pada 7 Apr 2017
Halo semuanya, kami sedang memindahkan pelacakan dukungan RTL ke masalah ini
https://github.com/driftyco/ionic/issues/11211
Brandy akan melakukan beberapa pekerjaan untuk mewujudkannya, jadi harap segera melihatnya.
mhartington
pada 13 Apr 2017
Ada banyak pesan di sini, saya tidak menemukan solusinya karena saya tidak pandai bahasa Inggris.
dapatkah seseorang mengarahkan saya ke solusi arah menu, karena ketika berubah ke kiri ada animasi itu terbuka dari kiri ke kanan, dan gesekan masih dari kiri ke kanan juga.
mohon bantuannya.
joesleiman
pada 24 Mei 2017
@joesleiman Saat ini belum ada solusi untuk anda. Perbaikan disarankan di https://github.com/driftyco/ionic/pull/11336 dan menunggu tinjauan.
AmitMY
pada 24 Mei 2017
@AmitY ok terima kasih. saya punya masalah lain bagaimana mengubah arah ke rtl dari tag html di index.html atau ion-app atau body karena ion-pilih tidak di bawah <ion-nav> mana saya mengubah arah. dapatkah Anda memberi saya solusi jika Anda tahu?
joesleiman
pada 24 Mei 2017
@joesleiman : Jika Anda menggunakan ionic1, saya telah memperbaikinya dengan tag ini https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1
Anda dapat meninjau dan menerapkan perubahan.
msoni11
pada 24 Mei 2017
Anda mengatur 'dir' default Anda pada tag HTML, dan jika Anda ingin mengubahnya dalam runtime, Anda melakukan 'this.platform.setDit (' rtl ', true)'.
Jangan gunakan atribut dir di mana pun, karena arah bertingkat tidak didukung.
Terakhir, harap gunakan versi nightly, karena lebih siap RTL daripada 3.2.1
Jika Anda memiliki pertanyaan dukungan lainnya, silakan gunakan forum ionik, dan untuk bug / fitur gunakan github
AmitMY
pada 24 Mei 2017
@ msoni11 tidak ada ionik 3.2.0
joesleiman
pada 24 Mei 2017
@AmitMY yang saya gunakan di semua aplikasi saya di setiap tag root [att.dir] = 'isRtl? 'rtl': 'ltr' '(dalam setiap bentuk: seperti konten ion)
tidak bagus?
joesleiman
pada 24 Mei 2017
@joesiman
untuk saat ini, saya hanya menggunakan transisi halaman desain material, yang merupakan alternatif untuk menghindari transisi halaman dari kiri ke kanan.
javascript
// in app.module.ts
.
.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition
})
.
.
Khalid-Nowaf
pada 24 Mei 2017
@AmitMY bagaimana saya bisa mengubah ikon tombol kembali ke panah kanan daripada panah kiri (ketika mengubahnya menjadi rtl)
joesleiman
pada 24 Mei 2017
@joesleiman Tidak, memiliki dir="rtl" pada ion-content tidak menjamin dukungan. Anda harus selalu menggunakan this.platform.setDir('rtl', true) dan menghapus semua atribut dir kecuali yang ada di tag html . Ini juga mengontrol arah komponen ionik dari naskah ketikan, seperti isyarat. (perhatikan bahwa setDir dengan true juga memperbarui tag html dengan dir yang benar)
Tentang tombol kembali, jika Anda menggunakan cara yang tepat untuk mengatur arah, seperti yang disebutkan di atas, itu akan membalikkan panah Anda, seperti yang dilakukan di sini - https://github.com/driftyco/ionic/pull/11634. Ini hanya tersedia dalam versi malam, dan versi baru (3.3.0) akan dirilis hari ini.
Saya bertanya sekali lagi, untuk pertanyaan dukungan seperti ini gunakan forum. Github adalah untuk bug / permintaan fitur.
Anda dapat membaca lebih lanjut tentang RTL di sini - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
Ini adalah dokumentasi resmi RTL, tetapi belum dilakukan sehingga tidak ada di situs web.
AmitMY
pada 24 Mei 2017
@AmitMY ok saya akan lakukan ... terima kasih banyak,
joesleiman
pada 24 Mei 2017
@AmitMy jika pengguna meletakkan this.platform.setDir ('rtl', true); dan tutup aplikasi dan kemudian kembali ke sana bagaimana saya bisa menyimpan tag html dir = 'rtl'. jadi bukan ide bagus untuk menggunakannya. karena kembali ke dir = "ltr"
joesleiman
pada 24 Mei 2017
@joesleiman Jadi jika aplikasi Anda multidirectional, dan Anda menggunakan preferensi pengguna untuk memutuskan sisi mana, saya akan merekomendasikan menggunakan NativeStorage , dan menyimpan untuk kunci "preferensi" objek: {lang: "he", dir: "rtl"} , dan lalu di app.component.ts pada platform.ready periksa apakah pengguna memiliki preferensi. Jika ya, terapkan dengan setDir .
Tidak ada solusi lain untuk saat ini.
AmitMY
pada 24 Mei 2017
@AmitMY ketika saya menggunakan setDir: masih ion-select >> ion-alert: memiliki masalah dalam arah rtl di md (android)
joesleiman
pada 24 Mei 2017
@AmitMY saya menyelesaikannya dengan ini:
html [dir = "rtl"] .alert-md .alert-radio-icon {
kiri: 0px;
kanan: 13px;
}
joesleiman
pada 24 Mei 2017
Saya pikir Anda tidak menggunakan versi malam seperti yang saya sarankan ( 3.2.1-201705231529 ), dan jika Anda menggunakannya, itu adalah kasus gaya yang diganti, dan diperbaiki di sini https://github.com/driftyco / ionic / pull / 11635
AmitMY
pada 24 Mei 2017
@AmitMY dapatkah Anda menyelesaikan diskusi di sini karena saya menemukan semakin banyak bug:
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591
joesleiman
pada 24 Mei 2017
Terima kasih atas masalahnya! Masalah ini dikunci untuk mencegah komentar yang tidak relevan dengan masalah aslinya. Jika ini masih menjadi masalah dengan versi terbaru Ionic, buat masalah baru dan pastikan templatnya terisi penuh.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
pada 3 Sep 2018
Masalah terkait
brandyscarney
·
3Komentar
danbucholtz
·
3Komentar
fdnhkj
·
3Komentar
vswarte
·
3Komentar
manucorporat
·
3Komentar
Komentar yang paling membantu
Ada pembaruan tentang masalah RTL?