ionic-framework 🚀 - Ajouter un support de droite à gauche

_De @adamdbradley le 30 décembre 2015 17: 38_

Oui, cela fait partie de notre feuille de route et nous aimerions avoir plus de commentaires de la part de développeurs RTL expérimentés pour nous aider à indiquer les points à améliorer. Seriez-vous en mesure de fournir une liste de contrôle de certaines parties d'ionic2 qui ne fonctionnent pas bien avec RTL. Notre objectif serait de fournir un fichier css RTL supplémentaire et de faire ajuster le JS en conséquence selon que l'élément html a dir="rtl" ou non. Merci

mhartington le 18 janv. 2016

👍5

_De @ mashaly100200 le 30 décembre 2015 18:39_

J'ai le plaisir d'aider l'équipe ionic2 à soutenir RTL
c'est facile de regarder quels sont les mauvais effets si on utilise rtl direction
nous pouvons ajouter cette balise attr en html qui convertira tous les sites Web en rtl

ou
on peut l'utiliser dans le corps comme un style comme celui-ci
style = " direction: rtl "

si l'équipe ionique prévoit de soutenir RTL

ils devront ajouter la direction cible dans les configurations de l'application, car l'application devra savoir quelle est la direction au démarrage
, et si le développeur a besoin de changer la langue de l'application en langage rtl lors de l'exécution, nous devons actualiser toutes les applications (comme Android natif, l'application Windows Phone, iOS doit redémarrer l'application pour changer sa direction)

maintenant, quand j'essaye de changer la direction html ionic2, j'ai trouvé qu'il y a des choses qui supportent déjà la direction rtl coz pure html konw comment gérer la direction rtl
mais ce sont des choses qui doivent être prises en charge par la direction RTL
la première chose est l'animation
Je ne sais pas si l'équipe ionique fait l'animation avec du code css ou javascript, dans les deux cas, toutes les animations avec rtl ou ltr devront ajouter une autre direction d'animation, non seulement changer varialbe mais en ajouter une autre car beaucoup de choses devront changer

Je voudrais aider comme je peux à l'équipe ionique pour l'aider dans cette grande bibliothèque

je sais que mon anglais n'est pas bon, mais j'espère que vous comprenez mes mots :)

mhartington le 18 janv. 2016

_De @ mashaly100200 le 30 décembre 2015 18:44_

plz modifier cet objectif "Notre objectif serait de fournir un fichier css RTL supplémentaire"
parce que nous avons besoin des deux sens dans la même application, en fonction du choix de l'utilisateur, un certain temps, il sera en cours d'exécution

mhartington le 18 janv. 2016

_De @adamdbradley le 30 décembre 2015 18:51_

nous avons besoin des deux sens dans la même application, en fonction du choix de l'utilisateur, un certain temps, il sera en cours d'exécution

Ionic lui-même pourra ajouter dynamiquement ce fichier css pour vous, en fonction du <html dir="rtl">

mhartington le 18 janv. 2016

_De @ mashaly100200 le 30 décembre 2015 19: 23_

ces images d'essayer de changer la direction de l'exemple onic-conference-app
si l'équipe ionique couvre la direction rtl dans cet exemple, je pense que ce ne sera pas moins de 90% du support rtl

Image of Yaktocat

mhartington le 18 janv. 2016

_De @ mashaly100200 le 30 décembre 2015 19: 26_

Image of Yaktocat

mhartington le 18 janv. 2016

_De @ mashaly100200 le 30 décembre 2015 19: 27_

Image of Yaktocat

mhartington le 18 janv. 2016

_De @ mashaly100200 le 30 décembre 2015 20:21_

toute icône qui est une flèche droite, gauche, arrière ou avant comme l'icône du bouton arrière aura besoin de ce style
{
-webkit-transform: rotation (180deg);
-moz-transform: rotation (180deg);
-o-transform: rotation (180deg);
-ms-transform: rotation (180deg);
transformer: tourner (180deg);
}

mhartington le 18 janv. 2016

_De @adamdbradley le 31 décembre 2015 4: 27_

Donc, @brandyscarney a eu la bonne idée de créer tous les fichiers RTL scss dans le dépôt et de les préparer à être remplis.

Je pensais qu'au lieu d'ajouter dynamiquement un autre css rtl, nous pourrions avoir une variable par défaut $rtl-support: false sass qui peut être mise à jour dans les variables sass de chaque application. Donc, dans la plupart des cas, le css rtl supplémentaire ne serait pas ajouté aux applications, mais pour ceux qui ont besoin du css rtl, ils peuvent définir $rtl-support: true .

Ensuite, dans nos nouveaux fichiers rtl scss, le css peut être encapsulé avec <strong i="12">@if</strong> $rtl-support . De cette façon, nous pouvons garder les fichiers css séparés et plus faciles à éditer, et fournir un support rtl prêt à l'emploi. Vous pensez que cela fonctionnera @ mashaly100200 ?

mhartington le 18 janv. 2016

_De @ mashaly100200 le 31 décembre 2015 11:48_

oui charger rtl dynamiquement est une bonne idée,

commençons par l'animation, car cela peut nécessiter plus d'efforts

Je veux savoir est-il possible d'ajouter une animation de transition de page spécifique quand les pages push et pop?
et comment le développeur ajoute-t-il cette animation spécifique aux pages de remorquage qui entrent et sortent?
le développeur peut-il regarder en arrière l'événement puis ajouter son animation spécifique également aux deux pages?

si votre réponse est oui pour les trois questions précédentes, alors je peux féliciter mon sujet d'animation auto coz ne nécessite aucun effort et un soutien complet de la direction rtl et de l'équipe ionique mérite un très grand merci :)

mhartington le 18 janv. 2016

_De @adamdbradley le 1er janvier 2016 1: 53_

Voici l'animation de transition pour ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts

Je ne sais pas si cela devrait ajouter une logique pour RTL, ou s'il devrait y avoir une nouvelle animation à la place. Vous pouvez cependant ajouter votre propre transition et remplacer la configuration pageTransition : https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24

mhartington le 18 janv. 2016

_De @ mashaly100200 le 1er janvier 2016 21: 55_

salut @adamdbradley , joyeux Noël

J'ai terminé une classe d'animation personnalisée qui inverse le comportement de la classe d'animation par défaut dépend de documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
Je l'ai testé, et je vais bientôt le tester dans de vrais projets (inshaa allah)

aussi j'ai terminé certaines des classes css qui devaient être inversées
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9

et si je fais face à plus de classes doivent être inversées, je l'ajouterai à ce fichier jusqu'à ce que je termine un ou deux projets réels

rtl a également besoin de ces configurations dans le constructeur d'application
https://gist.github.com/mashaly100200/692160b036422d7b018c

J'essayais d'ajouter toute la configuration au même endroit, donc j'ai trouvé que je pouvais ajouter toutes choses dans l'entrepreneur de l'application

J'espère que ces choses peuvent aider à rendre ionic2 entièrement compatible avec RTL

N'hésitez pas à ajouter des corrections ou des suggestions.

mhartington le 18 janv. 2016

_De @adamdbradley le 2 janvier 2016 3: 2_

Cool, il semble donc que la transition RTL soit très proche de la transition LTR, ce qui me fait penser que ce devrait être une option isRTL qui est passée dans les options de la transition et nous n'avons qu'une seule transition. Je peux mettre à jour ionic afin qu'il ait une propriété isRTL qui peut être référencée dans toute l'application (avec les webworkers, nous voulons éviter de faire des document lectures dans la logique d'ionic).

mhartington le 18 janv. 2016

_De @adamdbradley le 2 janvier 2016 3: 36_

Ajout de isRTL() à Platform : https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16

mhartington le 18 janv. 2016

_De @adamdbradley le 2 janvier 2016 3: 58_

Toutes les transitions sont maintenant passées isRTL dans le opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798

Alors maintenant, la transition ios peut ajouter la logique des transitions RTL.

mhartington le 18 janv. 2016

_De @adamdbradley le 2 janvier 2016 4:38_

Ajout de la façon dont nous pouvons inclure RTL css afin qu'il se compile correctement dans ionic.css (qui inclut à la fois md et ios css) et ionic.ios.css (juste ios). L'idée est que les applications qui souhaitent inclure à la fois RTL et LTR css dans le même fichier peuvent définir $include-rtl: true dans leurs variables sass, sinon elles incluront par défaut uniquement LTR css. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231

mhartington le 18 janv. 2016

_De @MatanYed le 6 janvier 2016 18: 14_

Juste à savoir: les applications RTL sur iOS sont en partie LTR:
Le côté du bouton de la barre de navigation principale est à gauche, le menu latéral est à gauche, l'animation de transition est de gauche à droite.

mhartington le 18 janv. 2016

_De @adamdbradley le 7 janvier 2016 16:41_

Ajout de nouvelles méthodes à la plate-forme pour obtenir et définir la langue et la direction: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f

mhartington le 18 janv. 2016

_De @ mashaly100200 le 12 janvier 2016 21: 2_

mettre à jour
pour quiconque suit ce sujet
remplacer
config.set ('backButtonIcon', 'ion-ios-arrow-forward');
avec
config.set ('backButtonIcon', 'flèche vers l'avant');

aussi je mets à jour la classe d'animation
https://gist.github.com/mashaly100200/bf713f2b558285322155

mhartington le 18 janv. 2016

J'ai travaillé sur ce problème sur une application mobile moodle pour notre entreprise et nous avons besoin de l'application pour prendre en charge l'anglais et l'arabe en même temps, donc ce n'est pas un problème de changer la direction de tout vers RTL mais il doit être en cours d'exécution temps. J'ai utilisé quelques ajustements au début en utilisant ng-if et une diffusion via le rootscope dans l'application, mais chaque fois que l'utilisateur change de langue, l'application a besoin d'un rechargement, les choses ne fonctionnent pas du tout avec cette méthode.
Il y a trois jours, j'ai commencé à me battre avec Ionic (ça devient un problème universel :)), l'équipe moodle a ouvert des problèmes pour le moment mais je ne pense pas qu'ils les regarderont.
Je n'utilise pas Ionic 2 mais mon approche dans ce problème est très simple, avec l'attribut côté ionique dans la directive ionique (je pense que la directive la plus concernée par le problème RTL a cet attribut) rendra la solution plus facile qu'il n'y paraît.
J'essaie de remplacer la directive pour ajouter une liaison à l'attribut side car maintenant, il n'ajoute pas d'alignements au reste du contenu en utilisant css dans le app.scss, et avec l'aide de angular-translate et du courant mise en œuvre de l'application moodle, mettez à jour la gauche dans le mot dans les classes et le côté droit et vice versa chaque fois que la langue change.
Je suis toujours en train de l'implémenter pour le moment, j'espère que cela fonctionnera (cela doit quand même fonctionner).

mohessaid le 15 févr. 2016

après avoir ajouté dir = "rtl" à index.html, le rendu des éléments commencera par la droite, ce qui affecte l'apparence de certains éléments, comme le bouton de segment.
pour le réparer, j'ai changé

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

L'animation de navigation doit être opposée à la direction de l'application, de gauche pour les applications RTL et de droite pour les applications LTR. pour le réparer, j'ai fait ceci:
modifié
var OFF_RIGHT = '99.5%';
à
var OFF_RIGHT = '-99.5%';
et
var OFF_LEFT = '-33%';
à
var OFF_LEFT = '33%';
et

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

dans ionique-angulaire / transitions / transition-ios

et pour l'élément arrière dans la barre de navigation, j'ai mis l'icône avant le texte et j'ai changé l'icône en avant.

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

l'espace réservé dans l'entrée de la barre de recherche peut être corrigé
en faisant ces changements (tout changer de gauche à droite)

.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 le 14 mars 2016

dans le fichier: ionic.bundle.js
changer le code:


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

changez-le en:


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

Je sais que ce n'est pas une bonne solution, mais je devais le faire.

et j'ai ajouté ces css:


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

et fait le menu à droite:


<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 le 27 mars 2016

ouais c'est ce que nous attendons, et ce sera génial

merci l'équipe ionique

allez-y: +1:

alaa-alshamy le 16 avr. 2016

EDIT: peu importe, cela a déjà été corrigé

sijav le 31 mai 2016

ion-item-sliding doit être l'option swipe-left pour la version rtl comme ceci:

        <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 le 1 juin 2016

Salut,
Je travaille sur ionic 2.0. comment puis-je réduire la largeur de navigation à gauche.

rejeeshrajan10 le 21 juin 2016

Comment gérez-vous les gestes avec RTL dans la v2?

Je dois le réparer pour la plate-forme iOS dans ionic v1. Je ne sais pas comment l'iPhone capture glisser vers la droite dans RTL.

J'ai pu changer la direction du sidemenu et la direction du glissement dans 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 le 2 juil. 2016

Lorsque la fonctionnalité RTL sera publiée, elle pourra la modifier après l'exécution de l'application (je veux dire le changement en direct entre ltr et rtl?
Tout comme les applications natives qui ont une page de changement de langue dans l'application.

MatanYadaev le 19 juil. 2016

@MatanYed : Oui, ce sera le cas. Il doit en fait. C'est assez simple dans une application hybride en changeant simplement de direction et en alignant le texte en utilisant CSS.

msoni11 le 19 juil. 2016

@mhartington : lors de l'utilisation d'une étiquette ionique flottante avec direction RTL, l'étiquette flottante n'est pas alignée à droite, mais quelque part au milieu, lors de la saisie de texte dans le champ de saisie.
y a-t-il une solution pour cela?

<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 le 25 juil. 2016

+1

royipressburger le 25 juil. 2016

👎3

@royipressburger (_regards "+1" _) - il y a une émoticône "pouce en haut" et un bouton "S'abonner" si vous voulez soutenir ou suivre.

astec le 25 juil. 2016

@mhartington , @ msoni11 : une réponse? je suis vraiment coincé avec ça.

devoraf le 27 juil. 2016

@devoraf : Je ne sais pas quelle version d'ionic vous utilisez. Dans ionic v1, j'ai joué avec RTL css et l'élément form a fonctionné pour moi.

msoni11 le 27 juil. 2016

@ msoni11 : ionique v2. ce comportement flottant particulier a-t-il bien fonctionné pour vous?

devoraf le 27 juil. 2016

@devoraf : Je n'ai pas encore essayé la v2. Mon application contient beaucoup de code écrit en v1, j'ai donc piraté la v1 pour autoriser RTL.

msoni11 le 27 juil. 2016

@ msoni11 : pouvez-vous s'il vous plaît joindre un exemple de css qui pourrait affecter l'alignement / la direction de l'étiquette flottante?

devoraf le 27 juil. 2016

+1

RezaHaidari le 29 juil. 2016

👎4

@devoraf : Désolé mais je n'ai pas utilisé d'étiquettes flottantes. J'ai utilisé ces éléments de formulaire et je les ai alignés à droite pour RTL.

msoni11 le 30 juil. 2016

Je ne sais pas si cela a été dit, mais même la navigation dans les pages est gâchée lorsque dir="rtl" est ajouté à la balise <html> . Dans Ionic 2, beaucoup de composants que j'ai utilisés ne le supportaient pas et j'ai fini par revenir à Ionic 1. Pour le moment, je peux faire quelque chose à propos des composants et je n'en ai rencontré aucun qui me pose problème, mais la navigation est perturbée et j'obtiens des écrans blancs ou des pages décalées. Quand je supprime dir="rtl" tout fonctionne parfaitement.

Est-ce que je fais quelque chose de mal ou $state.go() ne fonctionne pas du tout avec rtl ?

loolooii le 3 août 2016

@loolooii : Vous devez ajouter css pour que l'ionic 1 fonctionne pour 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);
}

Utilisez cette version rtl ionique https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl et vous pourrez glisser à droite dans RTL.

msoni11 le 4 août 2016

👍2

@ msoni11 Merci! Des trucs géniaux.

loolooii le 4 août 2016

@loolooii : :) J'ai également écrit un petit article dans lequel j'ai mentionné comment la mise en œuvre réelle fonctionnera dans l'application ionique. Vérifiez ici

msoni11 le 4 août 2016

Une mise à jour sur le problème RTL?

MatanYadaev le 31 oct. 2016

👍7 👎1

Des mises à jour à ce sujet? , aussi pourquoi l'équipe ionique l'a-t-elle retiré de la bêta 12?

OmarHassan25 le 5 déc. 2016

👍2

Je pense que si nous listons tous les problèmes RTL à partir des commentaires des développeurs, nous pouvons y contribuer et les résoudre un par un, nous finirons par obtenir un support RTL complet.

Khalid-Nowaf le 21 déc. 2016

RTL est vraiment important! Y a-t-il un calendrier?

AmitMY le 11 févr. 2017

@AmitMY Je ne suis pas sûr d'ionic2 mais pour ionic1, l'une de mes applications en direct fonctionne assez bien avec le support RTL.

msoni11 le 12 févr. 2017

@ msoni11 Merci. Je parle de Ionic2.

AmitMY le 12 févr. 2017

@AmitMY @ msoni11 Je travaillerai bientôt dans un projet de taille moyenne utilisant IONIC 2, puis je repérerai tous les problèmes RTL le cas échéant.

Khalid-Nowaf le 12 févr. 2017

@ Khalid-Nowaf: Je serais heureux de vous aider.

msoni11 le 12 févr. 2017

@ msoni11 merci! Je vous tiendrai au courant.

Khalid-Nowaf le 12 févr. 2017

RTL était présent dans la road map RC 12, je ne sais pas pourquoi ils l'ont laissé tomber?!

OmarHassan25 le 13 févr. 2017

Bonjour, je ne vois pas de diapositives ioniques dans ce long fil?
Il a également besoin de soutien.
J'ai posté ici une demande
http://idangero.us/swiper/forum/#!/general : support-for-pagination-droit

ma solution de contournement, pas encore codée, serait de remplir les diapositives à l'envers et de passer à la dernière diapositive au démarrage. Je suppose que j'ai les bons événements pour détecter la fin de la lecture, lorsque la lecture atteint la 1ère diapositive :)

Un mot d'avertissement bien que je ne sois pas un expert.
J'espère que le support RTL est prévu au niveau des composants et pas seulement et exclusivement au niveau de l'application.

Je veux peut-être que mon application soit principalement en anglais, comme les étiquettes des onglets / boutons, mais le contenu réel des consommables en arabe. Par exemple, comme le comportement d'un curseur / pager souhaité ou configurable en RTL en raison de son orientation RTL texte et graphique.

index 44

index 45
Ouaip! Je me suis déjà débarrassé de cette vilaine barre de défilement.

Je peux aussi avoir une page avec 2 listes chacune dans une langue différente.

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

AlGantori le 14 févr. 2017

En mode rtl, il n'y a pas de marge entre la plage et ses étiquettes, donc les icônes des deux côtés ne sont partiellement pas visibles.

Mohsen7s le 15 févr. 2017

Dans ce cadre, nous devrions également nous pencher sur ce problème https://github.com/driftyco/ionic/issues/10685

jgw96 le 7 avr. 2017

Salut à tous, nous transférons le suivi du support RTL à ce problème
https://github.com/driftyco/ionic/issues/11211

Brandy fera du travail pour que cela se fasse, alors attendez-vous à le voir bientôt.

mhartington le 13 avr. 2017

il y a beaucoup de messages ici, je n'ai pas trouvé la solution car je ne suis pas bon en anglais.
quelqu'un peut-il me conduire à la solution de la direction du menu, car quand il passe à gauche, l'animation s'ouvre de gauche à droite, et le glissement toujours de gauche à droite également.
s'il vous plaît toute aide.

joesleiman le 24 mai 2017

@joesleiman Il n'y a pas de solution pour vous pour le moment. Un correctif est suggéré dans https://github.com/driftyco/ionic/pull/11336 et est en attente d'examen.

AmitMY le 24 mai 2017

@AmitMY ok merci. J'ai un autre problème pour changer la direction de rtl à partir de la balise html dans index.html ou ion-app ou body parce que l'ion-select n'est pas sous <ion-nav> où je change la direction. pouvez-vous me conduire à une solution si vous savez?

joesleiman le 24 mai 2017

@joesleiman : Si vous utilisez ionic1, je l'ai corrigé sous cette balise https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1

Vous pouvez examiner et appliquer les modifications.

msoni11 le 24 mai 2017

Vous définissez votre «dir» par défaut sur la balise HTML, et si vous voulez le modifier à l'exécution, vous faites «this.platform.setDit (« rtl », true)».

N'utilisez pas l'attribut dir ailleurs, car les directions imbriquées ne sont pas prises en charge.

Enfin, veuillez utiliser la version nocturne, car elle est plus prête pour RTL que la 3.2.1

Si vous avez d'autres questions de support, veuillez utiliser le forum ionique, et pour les bogues / fonctionnalités, utilisez github

AmitMY le 24 mai 2017

@ msoni11 pas d'ionique 3.2.0

joesleiman le 24 mai 2017

@AmitMY j'utilise dans toute mon application dans chaque balise racine [att.dir] = 'isRtl? 'rtl': 'ltr' '(sous toutes les formes: comme le contenu en ions)
n'est pas bon?

joesleiman le 24 mai 2017

@joesleiman
pour l'instant, j'utilise uniquement la transition de page de conception matérielle, ce qui est une alternative pour éviter la transition de page de gauche à droite.

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

Khalid-Nowaf le 24 mai 2017

@AmitMY comment puis-je changer l'icône du bouton de retour en flèche vers la droite au lieu de la flèche vers la gauche (lorsque vous la modifiez en rtl)

joesleiman le 24 mai 2017

@joesleiman Non, avoir dir="rtl" sur ion-content ne garantit pas le support. Vous devez toujours utiliser this.platform.setDir('rtl', true) et supprimer tous les attributs dir sauf celui de la balise html . Il contrôle également la direction des composants ioniques à partir du dactylographie, tels que les gestes. (notez que setDir with true met également à jour la balise html avec le répertoire correct)

À propos du bouton de retour, si vous utilisez la bonne façon de définir la direction, comme mentionné ci-dessus, il retournera vos flèches, comme cela est fait ici - https://github.com/driftyco/ionic/pull/11634. Il n'est disponible que dans la version nocturne, et une nouvelle version (3.3.0) sera publiée plus tard dans la journée.

Je demande à nouveau, s'il vous plaît, pour ce genre de questions d'assistance, utilisez le forum. Github est destiné aux bogues / demandes de fonctionnalités.

Vous pouvez en savoir plus sur RTL ici - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
Il s'agit de la documentation officielle de RTL, mais elle n'est pas encore terminée, elle n'est donc pas sur le site Web.

AmitMY le 24 mai 2017

@AmitMY ok je le ferai ... merci beaucoup,

joesleiman le 24 mai 2017

@AmitMy si l'utilisateur met this.platform.setDir ('rtl', true); et fermez l'application, puis revenez-y comment puis-je enregistrer pour la balise html dir = 'rtl'. ce n'est donc pas une bonne idée de l'utiliser. car il revient à dir = "ltr"

joesleiman le 24 mai 2017

@joesleiman Donc, si votre application est multidirectionnelle et que vous utilisez les préférences de l'utilisateur pour décider de quel côté, je vous recommande d'utiliser NativeStorage , et de stocker pour la clé "preferences" l'objet: {lang: "he", dir: "rtl"} , et puis dans app.component.ts on platform.ready vérifier si l'utilisateur a des préférences. S'il le fait, appliquez-les de setDir .

Aucune autre solution pour l'instant.

AmitMY le 24 mai 2017

@AmitMY lorsque j'utilise setDir: toujours l'ion-select >> ion-alert: problème dans la direction RTL sur MD (Android)

joesleiman le 24 mai 2017

@AmitMY je l'ai résolu par ceci:
html [dir = "rtl"] .alert-md .alert-radio-icon {
gauche: 0px;
à droite: 13px;
}

joesleiman le 24 mai 2017

Je pense que vous n'utilisez pas la version nocturne comme je l'ai suggéré ( 3.2.1-201705231529 ), et si vous l'utilisez, c'est un cas de style remplacé, et il est corrigé ici https://github.com/driftyco / ionique / tirer / 11635

AmitMY le 24 mai 2017

@AmitMY pouvez-vous compléter la discussion ici car je trouve de plus en plus de bugs:
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591

joesleiman le 24 mai 2017

Merci pour le problème! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.

ionitron-bot[bot] le 3 sept. 2018

Ionic-framework: Ajouter un support de droite à gauche

Commentaire le plus utile

Tous les 75 commentaires

Questions connexes