ionic-framework 🚀 - أضف اليمين إلى اليسار الدعم

_ Fromadamdbradley في 30 ديسمبر 2015 17:38 _

نعم ، هذا في خارطة الطريق لإكمالها ونود الحصول على مزيد من التعليقات من مطوري RTL ذوي الخبرة لمساعدتنا في تحديد المكان الذي نحتاج إلى تحسينه. هل ستتمكن من تقديم قائمة مراجعة لأجزاء معينة من ionic2 التي لا تعمل بشكل جيد مع RTL. سيكون هدفنا هو توفير ملف RTL css إضافي ، وإجراء تعديل JS وفقًا لذلك اعتمادًا على ما إذا كان عنصر html يحتوي على dir="rtl" أم لا. شكر

mhartington في ١٨ يناير ٢٠١٦

👍5

_ From @ mashaly100200 في 30 ديسمبر 2015 18:39 _

إنه لمن دواعي سروري أن أساعد فريق ionic2 على دعم RTL
من السهل مشاهدة ما هي الآثار السيئة إذا استخدمنا اتجاه rtl
يمكننا إضافة هذا attr إلى علامة html التي ستحول كل مواقع الويب إلى rtl

أو
يمكننا استخدامه في الجسم كنمط مثل هذا
style = " direction: rtl "

إذا كان الفريق الأيوني يخطط لدعم rtl

ستحتاج إلى إضافة الاتجاه المستهدف في تكوينات التطبيق ، لأن التطبيق سيحتاج إلى معرفة الاتجاه عند بدء التشغيل
، وإذا احتاج المطور إلى تغيير لغة التطبيق إلى لغة rtl في وقت التشغيل ، فيجب علينا تحديث جميع التطبيقات (مثل android الأصلي ، تطبيق windows phone ، ios بحاجة إلى إعادة تشغيل التطبيق لتغيير اتجاهه)

الآن عندما أحاول تغيير اتجاه html الأيوني ، وجدت أن هناك أشياء تدعم بالفعل اتجاه rtl coz النقي html konw كيفية التعامل مع اتجاه rtl
ولكن هناك أشياء تحتاج إلى دعم اتجاه rtl
أول شيء هو الرسوم المتحركة
لا أعرف ما إذا كان الفريق الأيوني يقوم بالرسوم المتحركة باستخدام كود css أو javascript ، في كلتا الحالتين ، ستحتاج جميع ساحرات الرسوم المتحركة إلى rtl أو ltr إلى إضافة اتجاه حركة آخر ، وليس فقط تغيير varialbe ولكن إضافة شيء آخر يحتاج إلى تغيير العديد من الأشياء

أود أن أقدم المساعدة قدر المستطاع لفريق أيوني للمساعدة في هذه المكتبة الرائعة

أعلم أن لغتي الإنجليزية ليست جيدة ، لكن أتمنى أن تفهم كلامي :)

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 30 ديسمبر 2015 18:44 _

الرجاء تغيير هذا الهدف "سيكون هدفنا توفير ملف RTL css إضافي"
نظرًا لأننا نحتاج إلى الاتجاهين في نفس التطبيق ، بناءً على اختيار المستخدم ، فسيكون ذلك في وقت التشغيل لبعض الوقت

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 30 ديسمبر 2015 18:51 _

نحتاج إلى الاتجاهين في نفس التطبيق ، بناءً على اختيار المستخدم ، في وقت ما في وقت التشغيل

ستكون Ionic نفسها قادرة على إضافة ملف css هذا ديناميكيًا ، اعتمادًا على <html dir="rtl">

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 30 ديسمبر 2015 19:23 _

هذه الصور من محاولة تغيير اتجاه مثال تطبيق onic-Conference-app
إذا قام الفريق الأيوني بتغطية اتجاه rtl في هذا المثال ، أعتقد أنه لن يكون أقل من 90٪ من دعم rtl

Image of Yaktocat

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 30 ديسمبر 2015 19:26 _

Image of Yaktocat

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 30 ديسمبر 2015 19:27 _

Image of Yaktocat

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 30 ديسمبر 2015 20:21_

أي رمز يمين أو يسار أو خلفي أو سهم للأمام مثل رمز الزر الخلفي سيحتاج إلى هذا النمط
{
-webkit- تحويل: تدوير (180 درجة) ؛
-موز-تحويل: تدوير (180 درجة) ؛
- تحويل: تدوير (180 درجة) ؛
تحويل ms: تدوير (180 درجة) ؛
تحويل: تدوير (180 درجة) ؛
}

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 31 ديسمبر 2015 4:27_

لذلك كانت لدى brandyscarney فكرة جيدة بأننا ننشئ جميع ملفات RTL scss داخل الريبو ونجهزها للتعبئة.

كنت أفكر أنه بدلاً من إضافة rtl css أخرى ديناميكيًا ، يمكن أن يكون لدينا متغير sass افتراضي $rtl-support: false يمكن تحديثه في متغيرات sass لكل تطبيق. لذلك في معظم الحالات ، لن تتم إضافة rtl css الإضافي إلى التطبيقات ، ولكن بالنسبة لأولئك الذين يحتاجون إلى rtl css يمكنهم تعيين $rtl-support: true .

ثم في ملفات rtl scss الجديدة ، يمكن تغليف ملف css بـ <strong i="12">@if</strong> $rtl-support . بهذه الطريقة يمكننا الاحتفاظ بملفات css منفصلة وتسهيل تحريرها ، وتوفير دعم rtl خارج الصندوق. أعتقد أن هذا سيعمل @ mashaly100200 ؟

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 31 ديسمبر 2015 11:48_

نعم ، يعتبر تحميل rtl ديناميكيًا فكرة جيدة ،

دعونا نبدأ بالرسوم المتحركة ، لأنه قد يحتاج إلى مزيد من الجهد

أريد أن أعرف هل من الممكن إضافة رسوم متحركة معينة لانتقال الصفحة عند القيام بصفحات الدفع والصورة؟
وكيف يضيف المطور هذه الرسوم المتحركة المحددة إلى صفحتين تدخل الساحرة وتغادر؟
هل يستطيع المطور مشاهدة الحدث ثم يضيف الرسوم المتحركة الخاصة به أيضًا إلى الصفحتين؟

إذا كانت إجابتك بنعم على الأسئلة الثلاثة السابقة ، فيمكنني أن أهنئ موضوع الرسوم المتحركة الخاص بي لأنني لست بحاجة إلى أي جهد ودعم كامل لاتجاه rtl والفريق الأيوني يستحق جزيل الشكر :)

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 1 يناير 2016 1:53_

هذه هي الرسوم المتحركة الانتقالية لنظام ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts

لست متأكدًا مما إذا كان هذا يجب أن يضيف منطقًا لـ RTL ، أو إذا كان يجب أن يكون هناك رسوم متحركة جديدة بدلاً من ذلك. ومع ذلك ، يمكنك إضافة الانتقال الخاص بك ، وتجاوز pageTransition config: https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 1 يناير 2016 21:55_

مرحبا adamdbradley ، عيد ميلاد سعيد

لقد انتهيت من فئة الرسوم المتحركة المخصصة التي تعكس سلوك فئة الرسوم المتحركة الافتراضي الذي يعتمد على documenten.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
جربته وسأختبره في مشاريع حقيقية قريباً (إن شاء الله).

كما أنهيت بعض فئات css التي كان يلزم عكسها
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9

وإذا واجهت المزيد من الفصول يجب عكسها ، فسأضيفها إلى هذا الملف حتى أنتهي من مشروع حقيقي أو مشروعين حقيقيين

تحتاج أيضًا rtl إلى هذه التكوينات في مُنشئ التطبيق
https://gist.github.com/mashaly100200/692160b036422d7b018c

كنت أحاول إضافة كل التهيئة في مكان واحد لذلك وجدت أنه يمكنني إضافة كل الأشياء في مقاول التطبيق

نأمل أن تساعد هذه الأشياء في جعل ionic2 يدعم RTL بشكل كامل

لا تتردد في إضافة أي تصحيحات أو اقتراحات.

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 2 يناير 2016 3: 2_

رائع ، لذلك يبدو أن انتقال RTL قريب جدًا من انتقال LTR ، مما يجعلني أعتقد أنه يجب أن يكون خيارًا isRTL يتم تمريره إلى خيارات الانتقال ولدينا انتقال واحد فقط. يمكنني تحديث أيوني بحيث يحتوي على خاصية isRTL الشائعة التي يمكن الرجوع إليها في جميع أنحاء التطبيق (مع عاملي الويب نريد تجنب إجراء عمليات قراءة document ضمن منطق أيوني).

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 2 يناير 2016 3:36_

تمت إضافة isRTL() إلى Platform : https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 2 يناير 2016 3:58

يتم الآن تمرير جميع الانتقالات isRTL ضمن opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798

الآن يمكن أن يضيف الانتقال إلى ios المنطق لتحولات RTL.

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 2 يناير 2016 4:38_

تمت إضافة كيف يمكننا تضمين RTL css بحيث يتم إنشاؤه بشكل صحيح داخل ionic.css (والذي يتضمن كلاً من md و ios css) و ionic.ios.css (ios فقط). الفكرة هي أن التطبيقات التي تريد تضمين كل من RTL و LTR css داخل نفس الملف يمكنها تعيين $include-rtl: true في متغيرات sass الخاصة بهم ، وإلا فسيتم تضمين LTR css افتراضيًا فقط. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231

mhartington في ١٨ يناير ٢٠١٦

_ FromMatanYed في 6 يناير 2016 18:14 _

فقط عليك أن تعرف: تطبيقات RTL في iOS هي جزئيًا من نوع LTR:
الجانب الأيسر من زر شريط التنقل الأساسي ، والقائمة الجانبية على اليسار ، والحركة الانتقالية من اليسار إلى اليمين.

mhartington في ١٨ يناير ٢٠١٦

_ Fromadamdbradley في 7 يناير 2016 16:41 _

تمت إضافة طرق جديدة إلى النظام الأساسي للحصول على اللغة والتوجيه وتعيينهما :

mhartington في ١٨ يناير ٢٠١٦

_ From @ mashaly100200 في 12 يناير 2016 21: 2_

تحديث
لأي شخص يتدفق هذا الموضوع
يحل محل
config.set ('backButtonIcon'، 'ion-ios-arrow-forward') ؛
مع
config.set ('backButtonIcon'، 'سهم للأمام') ؛

كما قمت بتحديث فئة الرسوم المتحركة
https://gist.github.com/mashaly100200/bf713f2b558285322155

mhartington في ١٨ يناير ٢٠١٦

لقد كنت أعمل على حل هذه المشكلة على تطبيق موودل لشركتنا ونحتاج التطبيق لدعم اللغة الإنجليزية والعربية في نفس الوقت ، لذا فهي ليست مشكلة في تبديل اتجاه كل شيء إلى RTL ولكن يجب أن تكون قيد التشغيل زمن. لقد استخدمت بعض التعديلات في البداية باستخدام ng-if وبعض البث من خلال rootcope في التطبيق ، ولكن كلما قام المستخدم بتغيير اللغة ، يحتاج التطبيق إلى إعادة تحميل ، والأشياء لا تعمل على الإطلاق بهذه الطريقة.
منذ ثلاثة أيام ، بدأت القتال مع Ionic (أصبحت مشكلة عالمية :)) ، يفتح فريق Moodle المشكلات في الوقت الحالي ولكن لا أعتقد أنهم سينظرون إليها.
أنا لا أستخدم Ionic 2 ولكن أسلوبي في هذه المشكلة بسيط للغاية ، مع السمة الجانبية الأيونية في التوجيه الأيوني (أعتقد أن التوجيه الأكثر اهتمامًا بمشكلة RTL لديه هذه الخاصية) سيجعل الحل أسهل مما يبدو.
أحاول تجاوز التوجيه لإضافة ارتباط إلى السمة الجانبية لأنه الآن لا يضيف بعد ذلك بعض المحاذاة لبقية المحتوى باستخدام css في app.scss ، وبمساعدة angular-translate و current تنفيذ تطبيق موودل ، وتحديث اليسار في الكلمة في الصفوف والجانب إلى اليمين والعكس بالعكس كلما تغيرت اللغة.
ما زلت أقوم بتنفيذها في الوقت الحالي وآمل أن تنجح (يجب أن تعمل على أي حال).

mohessaid في ١٥ فبراير ٢٠١٦

بعد إضافة dir = "rtl" إلى index.html ، سيبدأ عرض العناصر من اليمين ، مما يؤثر على مظهر بعض العناصر ، مثل زر المقطع.
لإصلاحها لقد غيرت

  .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; }

إلى

  .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; }

يجب أن تكون حركة Nav معاكسة لاتجاه التطبيق ، من اليسار لتطبيقات RTL ومن اليمين لتطبيقات LTR. لإصلاح ذلك فعلت هذا:
تغير
var OFF_RIGHT = '99.5%';
إلى
var OFF_RIGHT = '-99.5%';
و
var OFF_LEFT = '-33%';
إلى
var OFF_LEFT = '33%';
و

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '100%');
                }

إلى

                if (backDirection) {
                    // leaving content, back direction
                    leavingContent
                        .before.clearStyles([OPACITY])
                        .fromTo(TRANSLATEX, CENTER, '-100%');
                }

في الأيونية الزاوية / التحولات / الانتقال دائرة الرقابة الداخلية

وبالنسبة للعنصر الخلفي في شريط التنقل ، أضع الرمز قبل النص ، وقمت بتغيير الرمز لإعادة توجيهه.

@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/
})

يمكن إصلاح العنصر النائب في إدخال شريط البحث
بإجراء هذه التغييرات (تغيير كل شيء من اليسار إلى اليمين)

.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; }

إلى

.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 في ١٤ مارس ٢٠١٦

في الملف: ionic.bundle.js
غير الكود:


setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';

غيره ليكون:


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

أعلم أن هذا ليس حلاً جيدًا ولكن كان علي ذلك.

وأضفت هذه المغلق:


   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: ""; }

وجعل القائمة على اليمين:


<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 في ٢٧ مارس ٢٠١٦

نعم ، هذا ما ننتظره ، وسيكون هذا رائعًا

شكرا فريق الأيونية

المضي قدما: +1:

alaa-alshamy في ١٦ أبريل ٢٠١٦

تحرير: ما عليك سوى إصلاح هذا بالفعل

sijav في ٣١ مايو ٢٠١٦

ion-item-sliding يحتاج إلى أن يكون swipe-left الخيار لعرض RTL مثل هذا:

        <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 في ١ يونيو ٢٠١٦

مرحبا،
أنا أعمل على الأيونية 2.0. كيف يمكنني تقليل عرض التنقل الأيسر.

rejeeshrajan10 في ٢١ يونيو ٢٠١٦

كيف تتعامل مع الإيماءات باستخدام RTL في الإصدار 2؟

أحتاج إلى إصلاحه لمنصة iOS في الإصدار 1 من الأيوني. لست متأكدًا من كيفية التقاط iPhone سريعًا لليمين في RTL.

تمكنت من تغيير اتجاه sidemenu وضرب الاتجاه في 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 في ٢ يوليو ٢٠١٦

عندما يتم نشر ميزة RTL ، سيكون بإمكانها تغييرها بعد تشغيل التطبيق (أعني التغيير المباشر بين ltr إلى rtl؟
تمامًا مثل التطبيقات الأصلية التي تم تغيير صفحة اللغة في التطبيق.

MatanYadaev في ١٩ يوليو ٢٠١٦

MatanYed : نعم ستفعل. يجب في الواقع. إنه سهل جدًا في التطبيق المختلط بمجرد تغيير الاتجاه ومحاذاة النص باستخدام CSS.

msoni11 في ١٩ يوليو ٢٠١٦

mhartington : عند استخدام تسمية أيونية عائمة مع اتجاه RTL ، لا يتم محاذاة التسمية العائمة إلى اليمين ، ولكن في مكان ما في الوسط ، عند كتابة نص في حقل الإدخال.
هل من حل لها؟

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

floating

devoraf في ٢٥ يوليو ٢٠١٦

+1

royipressburger في ٢٥ يوليو ٢٠١٦

👎3

royipressburger (_regards "+1" _) - هناك رمز "إبهام لأعلى" وزر "اشتراك" إذا كنت تريد الدعم أو المتابعة.

astec في ٢٥ يوليو ٢٠١٦

mhartington ، @ msoni11 : هل من إجابة؟ أنا عالق به حقًا.

devoraf في ٢٧ يوليو ٢٠١٦

devoraf : لست متأكدًا من إصدار أيوني الذي تستخدمه. في الإصدار 1 الأيوني ، لعبت باستخدام RTL css وعمل عنصر الشكل من أجلي.

msoni11 في ٢٧ يوليو ٢٠١٦

@ msoni11 : أيوني v2. هل نجح هذا السلوك العائم بشكل خاص بالنسبة لك؟

devoraf في ٢٧ يوليو ٢٠١٦

@ devoraf : لم أجرب الإصدار 2 بعد. يحتوي تطبيقي على الكثير من التعليمات البرمجية المكتوبة في الإصدار 1 لذلك اخترقت الإصدار 1 للسماح لـ RTL.

msoni11 في ٢٧ يوليو ٢٠١٦

@ msoni11 : هل يمكنك من فضلك إرفاق نموذج css قد يؤثر على محاذاة / اتجاه الملصق العائم؟

devoraf في ٢٧ يوليو ٢٠١٦

+1

RezaHaidari في ٢٩ يوليو ٢٠١٦

👎4

devoraf : آسف ولكني لم أستخدم التسميات العائمة. لقد استخدمت عناصر النموذج هذه وجعلتها متوافقة بشكل صحيح مع RTL.

msoni11 في ٣٠ يوليو ٢٠١٦

لا أعرف ما إذا كان قد تم ذكره ، ولكن حتى التنقل عبر الصفحات يتم إفساده عند إضافة dir="rtl" إلى علامة <html> . في Ionic 2 الكثير من المكونات التي استخدمتها لم تدعمها وانتهى بي الأمر بالعودة إلى Ionic 1. في الوقت الحالي يمكنني فعل شيء ما بشأن المكونات ولم أجد أيًا من هذه المكونات يمثل مشكلة بالنسبة لي ، ولكن التنقل يتعرض للتلف لأعلى وأحصل على شاشات بيضاء أو صفحات بطيئة. عندما أقوم بإزالة dir="rtl" كل شيء يعمل بشكل مثالي.

هل أفعل شيئًا خاطئًا أو أن $state.go() لا يعمل مع rtl على الإطلاق؟

loolooii في ٣ أغسطس ٢٠١٦

loolooii : يجب عليك إضافة css لجعل أيوني 1 يعمل مع 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);
}

استخدم هذا الإصدار الأيوني rtl https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl وستتمكن من التمرير سريعًا إلى اليمين في RTL.

msoni11 في ٤ أغسطس ٢٠١٦

👍2

@ msoni11 شكرا! فريق عمل رائع.

loolooii في ٤ أغسطس ٢٠١٦

loolooii : :) لقد كتبت أيضًا هنا

msoni11 في ٤ أغسطس ٢٠١٦

أي تحديث حول قضية RTL؟

MatanYadaev في ٣١ أكتوبر ٢٠١٦

👍7 👎1

أي تحديثات بخصوص هذا؟ ، لماذا قام الفريق الأيوني بإزالته من بيتا 12؟

OmarHassan25 في ٥ ديسمبر ٢٠١٦

👍2

أعتقد أنه إذا قمنا بإدراج جميع مشكلات RTL من تعليقات المطورين ، فيمكننا المساهمة وإصلاحها واحدة تلو الأخرى ، وفي النهاية ، سننتهي بدعم كامل من RTL.

Khalid-Nowaf في ٢١ ديسمبر ٢٠١٦

RTL مهمة حقًا! هل هناك إطار زمني؟

AmitMY في ١١ فبراير ٢٠١٧

AmitMY لست متأكدًا من ionic2 ولكن بالنسبة لـ ionic1 ، يعمل أحد تطبيقي المباشر بشكل جيد مع دعم RTL.

msoni11 في ١٢ فبراير ٢٠١٧

@ msoni11 شكرا. أنا أتحدث عن Ionic2.

AmitMY في ١٢ فبراير ٢٠١٧

AmitMY @ msoni11 سأعمل قريبًا في مشروع متوسط الحجم باستخدام IONIC 2 ، ثم

Khalid-Nowaf في ١٢ فبراير ٢٠١٧

@ خالد نواف: يسعدني تقديم المساعدة.

msoni11 في ١٢ فبراير ٢٠١٧

@ msoni11 شكرا! سأعمل على إمدادكم بالتحديثات.

Khalid-Nowaf في ١٢ فبراير ٢٠١٧

RTL كانت موجودة في خريطة الطريق RC 12 ، لا أعرف لماذا أسقطوها ؟!

OmarHassan25 في ١٣ فبراير ٢٠١٧

مرحبًا ، لا أرى الشرائح الأيونية في سلسلة الرسائل الطويلة هذه؟
هي أيضا بحاجة إلى الدعم.
لقد نشرت هنا طلبا
http://idangero.us/swiper/forum/#!/general : support-for-pagination-righ

سيكون الحل البديل ، الذي لم يتم ترميزه بعد ، هو تعبئة الشرائح للخلف ، والانتقال إلى آخر شريحة عند البدء. أفترض أن لدي الأحداث المناسبة لاكتشاف نهاية التشغيل ، عندما يصل التشغيل إلى الشريحة الأولى :)

كلمة تحذير رغم أنني لست خبيرا.
آمل أن يتم التخطيط لدعم RTL على مستوى المكون وليس فقط وحصريًا على مستوى التطبيق.

قد أريد تطبيقي باللغة الإنجليزية في الغالب ، مثل علامات التبويب / تسميات الأزرار ولكن المحتوى الفعلي القابل للاستهلاك باللغة العربية. على سبيل المثال ، مثل سلوك شريط التمرير / النداء المطلوب أو القابل للتكوين إلى RTL بسبب اتجاه النص والرسومات من اليمين إلى اليسار.

index 44

index 45
نعم! لقد تخلصت بالفعل من شريط التمرير السيئ هذا.

كما قد يكون لدي صفحة بها قائمتان لكل منهما بلغة مختلفة.

<ion-list flow=RTL>....
<ion-list flow=LTR>....

AlGantori في ١٤ فبراير ٢٠١٧

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

Mohsen7s في ١٥ فبراير ٢٠١٧

كجزء من هذا ، يجب أن ننظر أيضًا في هذه المشكلة https://github.com/driftyco/ionic/issues/10685

jgw96 في ٧ أبريل ٢٠١٧

مرحبًا بالجميع ، نحن ننقل تتبع دعم RTL إلى هذه المشكلة
https://github.com/driftyco/ionic/issues/11211

سيقوم براندي ببعض العمل للحصول على هذا الأمر ، لذا توقع رؤيته قريبًا.

mhartington في ١٣ أبريل ٢٠١٧

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

joesleiman في ٢٤ مايو ٢٠١٧

joesleiman لا يوجد حل لك في الوقت الحالي. تم اقتراح إصلاح في https://github.com/driftyco/ionic/pull/11336 وهو في انتظار المراجعة.

AmitMY في ٢٤ مايو ٢٠١٧

AmitMY طيب شكرا لك. لدي مشكلة أخرى في كيفية تغيير الاتجاه إلى rtl من علامة html في index.html أو أيون التطبيق أو الجسم لأن تحديد الأيون ليس أقل من <ion-nav> حيث أقوم بتغيير الاتجاه. هل يمكنك أن تقودني إلى حل إذا كنت تعلم؟

joesleiman في ٢٤ مايو ٢٠١٧

joesleiman : إذا كنت تستخدم ionic1 ، فقد أصلحته تحت هذه العلامة https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1

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

msoni11 في ٢٤ مايو ٢٠١٧

يمكنك تعيين "dir" الافتراضي الخاص بك على علامة HTML ، وإذا كنت تريد تغييره في وقت التشغيل ، فيمكنك إجراء "this.platform.setDit ('rtl'، true) '.

لا تستخدم سمة dir في أي مكان آخر ، حيث إن الاتجاهات المتداخلة غير مدعومة.

أخيرًا ، يرجى استخدام الإصدار الليلي ، حيث إنه أكثر استعدادًا لـ RTL من 3.2.1

إذا كان لديك أي أسئلة دعم أخرى ، فالرجاء استخدام المنتدى الأيوني ، وبالنسبة للأخطاء / الميزات ، استخدم جيثب

AmitMY في ٢٤ مايو ٢٠١٧

@ msoni11 لا أيوني 3.2.0

joesleiman في ٢٤ مايو ٢٠١٧

AmitMY أستخدمه في كل تطبيقي في كل علامة جذر [att.dir] = 'isRtl؟ 'rtl': 'ltr' (في كل شكل: مثل محتوى أيون)
ليس جيدا؟

joesleiman في ٢٤ مايو ٢٠١٧

تضمين التغريدة
في الوقت الحالي ، أستخدم انتقال صفحة تصميم المواد فقط ، وهو بديل لتجنب انتقال الصفحة من اليسار إلى اليمين.

javascript // in app.module.ts . . imports: [ BrowserModule, IonicModule.forRoot(MyApp, { pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition }) . .

Khalid-Nowaf في ٢٤ مايو ٢٠١٧

AmitMY كيف يمكنني تغيير رمز زر الرجوع إلى السهم الأيمن بدلاً من السهم الأيسر (عند تغييره إلى rtl)

joesleiman في ٢٤ مايو ٢٠١٧

joesleiman لا ، وجود dir="rtl" على ion-content لا يضمن الدعم. يجب دائمًا استخدام this.platform.setDir('rtl', true) وإزالة جميع سمات dir باستثناء تلك الموجودة في علامة html . كما يتحكم في اتجاه المكونات الأيونية من الكتابة المطبوعة ، مثل الإيماءات. (لاحظ أن setDir مع true أيضًا بتحديث علامة html باستخدام dir الصحيح)

حول زر الرجوع ، إذا كنت تستخدم الطريقة الصحيحة لضبط الاتجاه ، كما هو مذكور أعلاه ، فسوف يقلب أسهمك ، كما هو الحال هنا - https://github.com/driftyco/ionic/pull/11634. يتوفر فقط في الإصدار الليلي ، وسيصدر إصدار جديد (3.3.0) في وقت لاحق اليوم.

أسأل مرة أخرى ، من فضلك ، عن هذا النوع من أسئلة الدعم ، استخدم المنتدى. Github مخصص لطلبات الأخطاء / الميزات.

يمكنك قراءة المزيد عن RTL هنا - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
هذه هي وثائق RTL الرسمية ، لكنها لم يتم تنفيذها بعد ، لذا فهي غير موجودة في الموقع.

AmitMY في ٢٤ مايو ٢٠١٧

AmitMY طيب سأفعل ... شكرا جزيلا لك ،

joesleiman في ٢٤ مايو ٢٠١٧

AmitMy إذا وضع المستخدم this.platform.setDir ('rtl'، true) ؛ وأغلق التطبيق ثم عد إليه كيف يمكنني الحفظ لعلامة html dir = 'rtl'. لذلك ليست فكرة جيدة لاستخدامها. لأنها تعود إلى dir = "ltr"

joesleiman في ٢٤ مايو ٢٠١٧

joesleiman لذا إذا كان تطبيقك متعدد الاتجاهات ، وكنت تستخدم تفضيلات المستخدم لتحديد أي جانب ، فإنني أوصي باستخدام NativeStorage ، وتخزين العنصر "التفضيلات" الرئيسية: {lang: "he", dir: "rtl"} ، و ثم في app.component.ts على platform.ready تحقق مما إذا كان المستخدم لديه تفضيلات. إذا فعل ذلك ، فقم بتطبيقها بواسطة setDir .

لا يوجد حل آخر الآن.

AmitMY في ٢٤ مايو ٢٠١٧

AmitMY عندما أستخدم setDir: لا يزال الاختيار الأيوني >> تنبيه أيوني: لديك مشكلة في اتجاه rtl على md (android)

joesleiman في ٢٤ مايو ٢٠١٧

AmitMY لقد قمت بحلها من خلال هذا:
html [dir = "rtl"] .alert-md .alert-radio-icon {
اليسار: 0 بكسل ؛
اليمين: 13 بكسل ؛
}

joesleiman في ٢٤ مايو ٢٠١٧

أعتقد أنك لا تستخدم الإصدار الليلي كما اقترحت ( 3.2.1-201705231529 ) ، وإذا كنت تستخدمه ، فهو حالة من النمط المتجاوز ، ويتم إصلاحه هنا https://github.com/driftyco / ايوني / سحب / 11635

AmitMY في ٢٤ مايو ٢٠١٧

AmitMY ، هل يمكنك إكمال المناقشة هنا لأنني
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591

joesleiman في ٢٤ مايو ٢٠١٧

شكرا على المشكلة! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فيرجى إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.

ionitron-bot[bot] في ٣ سبتمبر ٢٠١٨

Ionic-framework: أضف اليمين إلى اليسار الدعم

التعليق الأكثر فائدة

ال 75 كومينتر

القضايا ذات الصلة