Ionic-framework: Unterstützung von rechts nach links hinzufügen
_Von @ mashaly100200 am 30. Dezember 2015 17: 24_
Bitte fügen Sie der Animation und den Komponenten Support RTL hinzu
_Kopiert von der Originalausgabe: driftyco / ionic2 # 832_
mhartington
Alle 75 Kommentare
Von @adamdbradley am 30. Dezember 2015 17: 38_
Ja, dies steht auf unserer Roadmap und wir würden gerne mehr Feedback von erfahrenen RTL-Entwicklern erhalten, um herauszufinden, wo wir uns verbessern müssen. Könnten Sie eine Checkliste für bestimmte Teile von ionic2 bereitstellen, die mit RTL nicht gut funktionieren? Unser Ziel wäre es, eine zusätzliche RTL-CSS-Datei bereitzustellen und JS entsprechend anzupassen, je nachdem, ob das HTML-Element dir="rtl" oder nicht. Vielen Dank
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 18: 39_
Es ist mir eine Freude, dem ionic2-Team bei der Unterstützung von RTL zu helfen
Am besten ist es einfach zu beobachten, was die schlechten Auswirkungen sind, wenn wir die RTL-Richtung verwenden
Wir können dieses attr zum HTML-Tag hinzufügen, das alle Websites in rtl konvertiert
oder
Wir können es im Körper als einen solchen Stil verwenden
style = " Richtung: RTL "
wenn ionic team plant, rtl zu unterstützen
Sie müssen die Zielrichtung in App-Konfigurationen hinzufügen, da die Anwendung wissen muss, in welche Richtung beim Start
und wenn der Entwickler die App-Sprache zur Laufzeit in RTL-Sprache ändern muss, sollten wir alle Apps aktualisieren (wie natives Android, Windows Phone App, ios müssen die Anwendung neu starten, um ihre Richtung zu ändern).
Jetzt, als ich versuche, die Richtung von ionic2 html zu ändern, stellte ich fest, dass es bereits Dinge gibt, die die rtl-Richtung unterstützen, weil reines html konw, wie man mit der rtl-Richtung umgeht
Aber es gibt Dinge, die die Richtung unterstützen müssen
Das erste ist die Animation
Ich weiß nicht, ob das ionische Team die Animation mit CSS- oder Javascript-Code ausführt. In beiden Fällen müssen alle Animationen mit RTL oder LTR eine andere Animationsrichtung hinzufügen, nicht nur die Varialbe ändern, sondern auch eine andere, da sich viele Dinge ändern müssen
Ich möchte dem ionischen Team so gut ich kann helfen, in dieser großartigen Bibliothek zu helfen
Ich weiß, dass mein Englisch nicht gut ist, aber ich hoffe du verstehst meine Worte :)
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 18: 44_
Bitte ändern Sie dieses Ziel "Unser Ziel wäre es, eine zusätzliche RTL-CSS-Datei bereitzustellen."
Da wir die beiden Richtungen in derselben Anwendung benötigen, basierend auf der Wahl des Benutzers, wird es einige Zeit zur Laufzeit sein
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 30. Dezember 2015 18: 51_
Wir brauchen die beiden Richtungen in derselben Anwendung, basierend auf der Wahl des Benutzers, einige Zeit wird es zur Laufzeit sein
Ionic selbst kann diese CSS-Datei je nach <html dir="rtl"> dynamisch für Sie hinzufügen
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 19: 23_
Diese Bilder stammen aus dem Versuch, die Richtung des Beispiels einer Onic-Conference-App zu ändern
Wenn das ionische Team in diesem Beispiel die RTL-Richtung abdeckt, werden es wahrscheinlich nicht weniger als 90% der RTL-Unterstützung sein
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 19: 26_
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 19: 27_
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 30. Dezember 2015 20: 21_
Jedes Symbol, bei dem es sich um einen Rechts-, Links-, Rück- oder Vorwärtspfeil handelt, wie z. B. ein Symbol für die Zurück-Schaltfläche, benötigt diesen Stil
{
-webkit-transform: drehen (180 Grad);
-Moz-Transformation: drehen (180 Grad);
-o-Transformation: drehen (180 Grad);
-ms-Transformation: drehen (180 Grad);
transformieren: drehen (180 Grad);
}}
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 31. Dezember 2015 4: 27_
@Brandyscarney hatte also eine gute Idee, dass wir alle RTL-scss-Dateien innerhalb des Repos erstellen und sie zum Füllen vorbereiten.
Ich dachte, anstatt dynamisch ein weiteres RTL-CSS hinzuzufügen, könnten wir eine Standard-Sass-Variable $rtl-support: false haben, die in den Sass-Variablen jeder App aktualisiert werden kann. In den meisten Fällen wird das zusätzliche RTL-CSS nicht zu Apps hinzugefügt, aber für diejenigen, die das RTL-CSS benötigen, können sie $rtl-support: true festlegen.
Dann kann das CSS in unseren neuen RTL-SCSS-Dateien mit <strong i="12">@if</strong> $rtl-support umbrochen werden. Auf diese Weise können wir die CSS-Dateien getrennt und einfacher zu bearbeiten halten und sofort RTL-Unterstützung bieten. Denken Sie, dass dies @ mashaly100200 funktionieren wird ?
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 31. Dezember 2015 11: 48_
Ja, RTL dynamisch laden ist eine gute Idee.
Beginnen wir mit der Animation, da dies möglicherweise mehr Aufwand erfordert
- Ich möchte wissen, ob es möglich ist, bestimmte Seitenübergangsanimationen hinzuzufügen, wenn Push- und Pop-Seiten erstellt werden.
- und wie Entwickler diese spezielle Animation zu den zwei Seiten hinzufügen, die betreten und verlassen werden?
- Kann der Entwickler das Ereignis zurückschauen und dann seine spezifische Animation auch zu den beiden Seiten hinzufügen?
Wenn Ihre Antwort auf die vorherigen drei Fragen Ja lautet, dann kann ich meinem Selbst-Coz-Animationsthema gratulieren. Ich brauche keine Mühe und die volle Unterstützung der RTL-Richtung und des Ionenteams verdienen einen großen Dank :)
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 1. Januar 2016 1: 53_
Dies ist die Übergangsanimation für ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts
Ich bin mir nicht sicher, ob dies eine Logik für RTL hinzufügen soll oder ob stattdessen eine neue Animation vorhanden sein soll. Sie können jedoch Ihren eigenen Übergang hinzufügen und die Konfiguration pageTransition überschreiben: https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 1. Januar 2016 21: 55_
Hallo @adamdbradley , frohe Weihnachten
Ich habe eine benutzerdefinierte Animationsklasse fertiggestellt, die das Standardverhalten der Animationsklasse umkehrt und von documen.dir abhängt
https://gist.github.com/mashaly100200/bf713f2b558285322155
Ich habe es getestet und ich werde es bald in echten Projekten testen (inshaa allah)
Außerdem habe ich einige CSS-Klassen abgeschlossen, die rückgängig gemacht werden mussten
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9
und wenn ich vor sehe, dass mehr Klassen umgekehrt werden müssen, werde ich es dieser Datei hinzufügen, bis ich ein oder zwei echte Projekte abgeschlossen habe
Außerdem benötige ich diese Konfigurationen im App-Konstruktor
https://gist.github.com/mashaly100200/692160b036422d7b018c
Ich habe versucht, alle Konfigurationen an einem Ort hinzuzufügen, damit ich feststellen konnte, dass ich alle Dinge im App-Auftragnehmer hinzufügen kann
Ich hoffe, diese Dinge können dazu beitragen, dass ionic2 rtl vollständig unterstützt
Bitte zögern Sie nicht, Korrekturen oder Vorschläge hinzuzufügen.
mhartington
am 18. Jan. 2016
_Aus @adamdbradley am 2. Januar 2016 3: 2_
Cool, also sieht es so aus, als ob der RTL-Übergang dem LTR-Übergang verdammt nahe kommt, was mich denken lässt, dass es sich um eine isRTL -Option handeln sollte, die in die Optionen des Übergangs übernommen wird, und wir haben nur einen Übergang. Ich kann ionic so aktualisieren, dass es eine gemeinsame isRTL -Eigenschaft hat, auf die in der gesamten App verwiesen werden kann (mit Webworkern möchten wir vermeiden, dass document innerhalb der Logik von ionic gelesen werden).
mhartington
am 18. Jan. 2016
Von @adamdbradley am 2. Januar 2016 3: 36_
isRTL() zu Platform hinzugefügt: https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 2. Januar 2016 3: 58_
Alle Übergänge werden jetzt mit isRTL innerhalb von opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798
Jetzt kann der ios-Übergang die Logik für RTL-Übergänge hinzufügen.
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 2. Januar 2016 4: 38_
Es wurde hinzugefügt, wie wir RTL-CSS einschließen können, damit es korrekt in ionic.css (das sowohl md als auch ios css enthält) und ionic.ios.css (nur ios) erstellt wird. Der Gedanke ist, dass Apps, die sowohl RTL- als auch LTR-CSS in dieselbe Datei aufnehmen möchten, $include-rtl: true in ihren Sass-Variablen festlegen können, andernfalls wird standardmäßig nur LTR-CSS eingeschlossen. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231
mhartington
am 18. Jan. 2016
_Von @MatanYed am 6. Januar 2016 18: 14_
Nur Sie wissen: RTL-Apps in iOS sind teilweise LTR:
Die Seite der primären Navigationsleiste ist links, das Seitenmenü ist links, die Übergangsanimation ist von links nach rechts.
mhartington
am 18. Jan. 2016
_Von @adamdbradley am 7. Januar 2016 16: 41_
Neue Methoden zur Plattform zum Abrufen und Festlegen von Sprache und Richtung hinzugefügt: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f
mhartington
am 18. Jan. 2016
_Von @ mashaly100200 am 12. Januar 2016 21: 2_
aktualisieren
für jeden fließen dieses Thema
ersetzen
config.set ('backButtonIcon', 'ion-ios-arrow-forward');
mit
config.set ('backButtonIcon', 'Pfeil nach vorne');
Außerdem aktualisiere ich die Animationsklasse
https://gist.github.com/mashaly100200/bf713f2b558285322155
mhartington
am 18. Jan. 2016
Ich habe an diesem Problem an einer Moodle-App für unser Unternehmen gearbeitet, und wir benötigen die App, um Englisch und Arabisch gleichzeitig zu unterstützen. Es ist also kein Problem, die Richtung von allem auf RTL umzustellen, aber sie muss ausgeführt werden Zeit. Ich habe am Anfang einige Optimierungen mit ng-if und einige Übertragungen über das Rootscope in der App vorgenommen, aber wenn der Benutzer die Sprache ändert, muss die App neu geladen werden. Bei dieser Methode funktionieren die Dinge überhaupt nicht.
Vor drei Tagen habe ich angefangen, mit Ionic zu kämpfen (es wird ein universelles Problem :)). Das Moodle-Team hat momentan offene Fragen, aber ich glaube nicht, dass sie sich diese ansehen werden.
Ich verwende Ionic 2 nicht, aber mein Ansatz in diesem Problem ist sehr einfach. Mit dem ionischen Seitenattribut in der ionischen Direktive (ich denke, die am meisten betroffene Direktive mit dem RTL-Problem hat dieses Attribut) wird die Lösung einfacher machen, als es aussieht.
Ich versuche, die Anweisung zum Hinzufügen einer Bindung zum Seitenattribut zu überschreiben, da jetzt keine Ausrichtungen zum Rest des Inhalts mithilfe von CSS in der app.scss und mithilfe von Angular-Translate und Current hinzugefügt werden Bei der Implementierung der Moodle-App aktualisieren Sie das Wort links in den Klassen und von Seite nach rechts und umgekehrt, wenn sich die Sprache ändert.
Ich implementiere es noch im Moment, ich hoffe es wird funktionieren (es muss sowieso funktionieren).
mohessaid
am 15. Feb. 2016
Nach dem Hinzufügen von dir = "rtl" zu index.html beginnt das Rendern von Elementen von rechts, was sich auf das Aussehen einiger Elemente auswirkt, z. B. der Segmentschaltfläche.
Um das Problem zu beheben, habe ich mich geändert
.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; }
zu
.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; }
Die Nav-Animation muss der App-Richtung entgegengesetzt sein, von links für RTL-Apps und von rechts für LTR-Apps. Um das Problem zu beheben, habe ich Folgendes getan:
geändert
var OFF_RIGHT = '99.5%';
zu
var OFF_RIGHT = '-99.5%';
und
var OFF_LEFT = '-33%';
zu
var OFF_LEFT = '33%';
und
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
zu
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '-100%');
}
in Ionenwinkel / Übergänge / Übergangs-ios
und für das hintere Element in der Navigationsleiste habe ich das Symbol vor den Text gesetzt und das Symbol in vorwärts geändert.
@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/
})
Der Platzhalter in der Suchleisteneingabe kann festgelegt werden
indem Sie diese Änderungen vornehmen (ändern Sie alles von links nach rechts)
.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; }
zu
.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
am 14. März 2016
in der Datei: ionic.bundle.js
Ändern Sie den Code:
setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
ändere es so:
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)';
Ich weiß, dass dies keine gute Lösung ist, aber ich musste.
und ich fügte diese CSS hinzu:
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: ""; }
und machte das Menü auf der rechten Seite:
<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
am 27. März 2016
Ja, darauf warten wir, und das wird großartig
danke ionic team
mach weiter: +1:
alaa-alshamy
am 16. Apr. 2016
EDIT: Vergiss nicht, dass dies bereits behoben wurde
sijav
am 31. Mai 2016
ion-item-sliding muss swipe-left Option für eine RTL-Version wie diese sein:
<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
am 1. Juni 2016
Hallo,
Ich arbeite an ionic 2.0. Wie kann ich die linke Navigationsbreite reduzieren?
rejeeshrajan10
am 21. Juni 2016
Wie gehst du mit Gesten mit RTL in Version 2 um?
Ich muss es für die iOS-Plattform in ionic v1 reparieren. Ich bin mir nicht sicher, wie das iPhone in RTL nach rechts wischt.
Ich konnte die Richtung des Seitenmenüs ändern und die Richtung in RTL wischen.
https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl
https://github.com/msoni11/ionic-bower/releases/tag/v1.1.1-rtl
msoni11
am 2. Juli 2016
Wenn die RTL-Funktion veröffentlicht wird, kann sie nach dem Ausführen der App geändert werden (ich meine Live-Änderung zwischen ltr und rtl?
Genau wie native Apps, deren Seite die Sprache in der App ändert.
MatanYadaev
am 19. Juli 2016
@MatanYed : Ja, das wird es. Es muss eigentlich. In der Hybrid-App ist es ziemlich einfach, die Richtung zu ändern und den Text mithilfe von CSS auszurichten.
msoni11
am 19. Juli 2016
@mhartington : Wenn Sie ein schwebendes
Gibt es eine Lösung dafür?
<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
am 25. Juli 2016
+1
royipressburger
am 25. Juli 2016
@royipressburger (_regards "+1" _) - Es gibt ein Emoticon mit "Daumen hoch" und eine Schaltfläche "Abonnieren", wenn Sie unterstützen oder folgen möchten.
astec
am 25. Juli 2016
@mhartington , @ msoni11 : irgendeine Antwort? Ich bin wirklich dabei.
devoraf
am 27. Juli 2016
@devoraf : Ich bin nicht sicher, welche Version von ionic Sie verwenden. In ionic v1 habe ich mit RTL CSS gespielt und Formelement hat für mich funktioniert.
msoni11
am 27. Juli 2016
@ msoni11 : ionic v2. Hat dieses spezielle schwebende Verhalten für Sie gut funktioniert?
devoraf
am 27. Juli 2016
@devoraf : Ich habe v2 noch nicht ausprobiert. Meine App hat viel Code in v1 geschrieben, also habe ich v1 gehackt, um RTL zuzulassen.
msoni11
am 27. Juli 2016
@ msoni11 : CSS anhängen, das die Ausrichtung / Richtung des schwebenden Etiketts beeinflussen könnte?
devoraf
am 27. Juli 2016
+1
RezaHaidari
am 29. Juli 2016
@devoraf : Entschuldigung, aber ich habe keine schwebenden Etiketten verwendet. Ich habe diese Formularelemente verwendet und sie für RTL richtig ausgerichtet.
msoni11
am 30. Juli 2016
Ich weiß nicht, ob es angegeben wurde, aber selbst das Navigieren durch Seiten wird durcheinander gebracht, wenn dir="rtl" zu <html> hinzugefügt wird. In Ionic 2 haben viele Komponenten, die ich verwendet habe, dies nicht unterstützt und ich bin wieder zu Ionic 1 gewechselt. Im Moment kann ich etwas gegen Komponenten tun und bin auf keine gestoßen, die für mich ein Problem darstellen, aber die Navigation ist durcheinander Ich bekomme weiße Bildschirme oder verzögerte Seiten. Wenn ich dir="rtl" entferne, funktioniert alles perfekt.
Mache ich etwas falsch oder funktioniert $state.go() überhaupt nicht mit rtl ?
loolooii
am 3. Aug. 2016
@loolooii : Sie müssen
.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);
}
Verwenden Sie diese ionische RTL-Version https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl, und Sie können in RTL nach rechts wischen.
msoni11
am 4. Aug. 2016
@ msoni11 Danke! Tolles Zeug.
loolooii
am 4. Aug. 2016
@loolooii : :) Ich habe auch einen kleinen Beitrag geschrieben, in dem ich erwähnte, wie die tatsächliche Implementierung in der ionischen App funktionieren wird. Überprüfen Sie hier
msoni11
am 4. Aug. 2016
Gibt es ein Update zum RTL-Problem?
MatanYadaev
am 31. Okt. 2016
Irgendwelche Updates dazu? , auch warum ionic team es aus Beta 12 entfernt hat?
OmarHassan25
am 5. Dez. 2016
Ich denke, wenn wir alle RTL-Probleme aus Entwickler-Feedbacks auflisten, können wir sie einzeln beitragen und beheben. Letztendlich werden wir die volle RTL-Unterstützung erhalten.
Khalid-Nowaf
am 21. Dez. 2016
RTL ist wirklich wichtig! Gibt es einen Zeitrahmen?
AmitMY
am 11. Feb. 2017
@AmitMY Ich ionic2 nicht sicher, aber für ionic1 läuft eine meiner Live-Apps mit RTL-Unterstützung ziemlich gut.
msoni11
am 12. Feb. 2017
@ msoni11 Danke. Ich spreche von Ionic2.
AmitMY
am 12. Feb. 2017
@AmitMY @ msoni11 Ich werde bald in einem mittelgroßen Projekt mit IONIC 2 arbeiten, dann werde ich alle RTL-Probleme erkennen, falls vorhanden.
Khalid-Nowaf
am 12. Feb. 2017
@ Khalid-Nowaf: Ich würde gerne helfen.
msoni11
am 12. Feb. 2017
@ msoni11 danke! Ich werde euch auf dem Laufenden halten.
Khalid-Nowaf
am 12. Feb. 2017
RTL war in der Roadmap RC 12 vorhanden, ich weiß nicht, warum sie es fallen ließen ?!
OmarHassan25
am 13. Feb. 2017
Hallo, ich sehe keine Ionen-Dias in diesem langen Thread?
Es braucht auch Unterstützung.
Ich habe hier eine Anfrage gepostet
http://idangero.us/swiper/forum/#!/general : Unterstützung für die Paginierung
Meine Problemumgehung, die noch nicht codiert ist, besteht darin, die Folien rückwärts zu füllen und beim Start zur letzten Folie zu wechseln. Ich gehe davon aus, dass ich die richtigen Ereignisse habe, um das Ende der Wiedergabe zu erkennen, wenn die Wiedergabe die erste Folie erreicht :)
Ein Wort der Vorsicht, obwohl ich kein Experte bin.
Ich hoffe, dass die RTL-Unterstützung auf Komponentenebene und nicht nur und ausschließlich auf App-Ebene geplant ist.
Ich möchte meine App meistens auf Englisch, wie Tabs / Button-Labels, aber den tatsächlichen Verbrauchsmaterial-Inhalt auf Arabisch. Zum Beispiel wie das Verhalten eines Schiebereglers / Pagers, der aufgrund seiner RTL-Ausrichtung für Text und Grafiken für RTL erwünscht oder konfigurierbar ist.
Jep! Ich habe diese böse Bildlaufleiste bereits losgeworden.
Ich kann auch eine Seite mit 2 Listen in jeweils einer anderen Sprache haben.
<ion-list flow=RTL>....
<ion-list flow=LTR>....
AlGantori
am 14. Feb. 2017
Im RTL-Modus gibt es keinen Abstand zwischen dem Bereich und seinen Beschriftungen, daher sind die Symbole auf beiden Seiten teilweise nicht sichtbar.
Mohsen7s
am 15. Feb. 2017
Als Teil davon sollten wir uns auch mit diesem Problem befassen: https://github.com/driftyco/ionic/issues/10685
jgw96
am 7. Apr. 2017
Hallo zusammen, wir verschieben das Tracking der RTL-Unterstützung in dieses Problem
https://github.com/driftyco/ionic/issues/11211
Brandy wird einige Arbeit leisten, um dies in Gang zu bringen. Erwarten Sie also, es bald zu sehen.
mhartington
am 13. Apr. 2017
Es gibt viele Nachrichten hier, ich habe die Lösung nicht gefunden, da ich nicht gut Englisch kann.
Kann mich jemand zur Lösung der Richtung des Menüs führen, denn wenn es zu links wechselt, öffnet sich die Animation von links nach rechts und das Wischen immer noch von links nach rechts.
Bitte jede Hilfe.
joesleiman
am 24. Mai 2017
@joesleiman Derzeit gibt es keine Lösung für Sie. Ein Fix wird unter https://github.com/driftyco/ionic/pull/11336 vorgeschlagen und steht noch aus.
AmitMY
am 24. Mai 2017
@AmitMY ok danke. Ich habe ein anderes Problem, wie man die Richtung von HTML-Tag in index.html oder Ionen-App oder Körper zu RTL ändert, weil die Ionenauswahl nicht unter <ion-nav> wo ich die Richtung ändere. Können Sie mich zu einer Lösung führen, wenn Sie es wissen?
joesleiman
am 24. Mai 2017
@joesleiman : Wenn Sie ionic1 verwenden, habe ich es unter diesem Tag https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1 behoben
Sie können Änderungen überprüfen und anwenden.
msoni11
am 24. Mai 2017
Sie legen Ihr Standardverzeichnis für das HTML-Tag fest. Wenn Sie es zur Laufzeit ändern möchten, führen Sie 'this.platform.setDit (' rtl ', true)' aus.
Verwenden Sie das dir-Attribut nirgendwo anders, da verschachtelte Richtungen nicht unterstützt werden.
Verwenden Sie zum Schluss die nächtliche Version, da diese RTL-fähiger ist als 3.2.1
Wenn Sie weitere Support-Fragen haben, verwenden Sie bitte das ionische Forum und für Fehler / Funktionen github
AmitMY
am 24. Mai 2017
@ msoni11 no ionic 3.2.0
joesleiman
am 24. Mai 2017
@AmitMY Ich verwende in meiner gesamten App in jedem Root-Tag [att.dir] = 'isRtl? 'rtl': 'ltr' '(in jeder Form: wie Ionengehalt)
ist nicht gut
joesleiman
am 24. Mai 2017
@joesleiman
Im Moment verwende ich nur den Seitenübergang für das Materialdesign. Dies ist eine Alternative, um einen Seitenübergang von links nach rechts zu vermeiden.
javascript
// in app.module.ts
.
.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition
})
.
.
Khalid-Nowaf
am 24. Mai 2017
@AmitMY Wie kann ich das Symbol für die Zurück-Schaltfläche in einen Linkspfeils ändern (wenn ich es in RTL ändere)
joesleiman
am 24. Mai 2017
@joesleiman Nein, dir="rtl" auf ion-content , garantiert keine Unterstützung. Sie sollten immer this.platform.setDir('rtl', true) und alle dir -Attribute außer dem im html -Tag entfernen. Es steuert auch die Richtung der ionischen Komponenten aus dem Typoskript, wie z. B. Gesten. (Beachten Sie, dass setDir mit true auch das HTML-Tag mit dem richtigen Verzeichnis aktualisiert.)
Wenn Sie die Zurück-Schaltfläche wie oben beschrieben auf die richtige Weise festlegen, werden Ihre Pfeile wie hier beschrieben umgedreht -
Ich bitte noch einmal, für diese Art von Support-Fragen nutzen Sie das Forum. Github ist für Bugs / Feature-Anfragen.
Weitere Informationen zu RTL finden Sie hier - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
Dies ist die offizielle RTL-Dokumentation, die jedoch noch nicht erstellt wurde und sich nicht auf der Website befindet.
AmitMY
am 24. Mai 2017
@AmitMY ok ich werde tun ... vielen Dank,
joesleiman
am 24. Mai 2017
@AmitMy, wenn der Benutzer this.platform.setDir ('rtl', true) eingegeben hat; und schließen Sie die App und kehren Sie dann zu ihr zurück. Wie kann ich für das HTML-Tag dir dir = 'rtl' speichern? Es ist also keine gute Idee, es zu benutzen. weil es zu dir = "ltr" zurückkehrt
joesleiman
am 24. Mai 2017
@joesleiman Wenn Ihre App also multidirektional ist und Sie die Benutzereinstellungen verwenden, um zu entscheiden, auf welcher Seite Sie sich befinden, würde ich empfehlen, NativeStorage und das Objekt für die wichtigsten "Einstellungen" zu speichern: {lang: "he", dir: "rtl"} und Überprüfen Sie dann in app.component.ts auf platform.ready , ob der Benutzer Einstellungen hat. Wenn ja, wenden Sie sie mit setDir .
Derzeit keine andere Lösung.
AmitMY
am 24. Mai 2017
@AmitMY wenn ich setDir benutze: immer noch die ion-select >> ion-alert: habe ein Problem in RTL-Richtung auf md (android)
joesleiman
am 24. Mai 2017
@AmitMY Ich habe es dadurch gelöst:
html [dir = "rtl"] .alert-md .alert-radio-icon {
links: 0px;
rechts: 13px;
}}
joesleiman
am 24. Mai 2017
Ich denke, Sie verwenden die nächtliche Version nicht wie vorgeschlagen ( 3.2.1-201705231529 ), und wenn Sie sie verwenden, handelt es sich um einen überschriebenen Stil, der hier behoben wird: https://github.com/driftyco / ionic / pull / 11635
AmitMY
am 24. Mai 2017
@AmitMY können Sie die Diskussion hier abschließen, weil ich immer mehr Fehler
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591
joesleiman
am 24. Mai 2017
Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu vermeiden, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
am 3. Sept. 2018
Verwandte Themen
Macstyg
·
3Kommentare
alexbainbridge
·
3Kommentare
gio82
·
3Kommentare
daveshirman
·
3Kommentare
BilelKrichen
·
3Kommentare
Hilfreichster Kommentar
Gibt es ein Update zum RTL-Problem?