Ionic-framework: Agregar soporte de derecha a izquierda
_De @ mashaly100200 el 30 de diciembre de 2015 17: 24_
amablemente agregue soporte rtl a la animación y los componentes
_Copiado del número original: driftyco / ionic2 # 832_
mhartington
Todos 75 comentarios
_De @adamdbradley el 30 de diciembre de 2015 17: 38_
Sí, esto está en nuestra hoja de ruta para completar y nos encantaría obtener más comentarios de los desarrolladores de RTL con experiencia para ayudarnos a señalar dónde debemos mejorar. ¿Podría proporcionar una lista de verificación de ciertas partes de ionic2 que no funcionan bien con RTL? Nuestro objetivo sería proporcionar un archivo css RTL adicional y hacer que cualquier JS se ajuste en consecuencia dependiendo de si el elemento html tiene dir="rtl" o no. Gracias
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 18: 39_
Es un placer ayudar al equipo de ionic2 a respaldar RTL
firest es fácil ver cuáles son los efectos negativos si usamos la dirección rtl
podemos agregar este atributo a la etiqueta html que convertirá todo el sitio web a rtl
o
podemos usarlo en el cuerpo como un estilo como este
style = " dirección: rtl "
si el equipo iónico planea apoyar rtl
Deberán agregar la dirección de destino en las configuraciones de la aplicación, porque la aplicación necesitará saber cuál es la dirección en el inicio
, y si el desarrollador necesita cambiar el idioma de la aplicación al idioma rtl en tiempo de ejecución, entonces deberíamos actualizar todas las aplicaciones (como Android nativo, aplicación de teléfono de Windows, ios debe reiniciar la aplicación para cambiar su dirección)
ahora, cuando trato de cambiar la dirección html de ionic2, descubrí que hay cosas que ya son compatibles con la dirección rtl porque html puro sé cómo lidiar con la dirección rtl
pero hay cosas que deben ser de apoyo rtl dirección
lo primero es la animación
No sé si el equipo iónico hace la animación con código css o javascript, en ambos casos, todas las animaciones que tengan rtl o ltr deberán agregar otra dirección de animación, no solo cambiar varialbe sino agregar otro porque muchas cosas deberán cambiar
Me gustaría brindar la asistencia que pueda al equipo iónico para ayudar en esta gran biblioteca
Sé que mi inglés no es bueno, pero espero que entiendas mis palabras :)
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 18: 44_
por favor cambie este objetivo "Nuestro objetivo sería proporcionar un archivo css RTL adicional"
debido a que necesitamos las dos direcciones en la misma aplicación, según la elección del usuario, en algún momento estará en tiempo de ejecución
mhartington
en 18 ene. 2016
_De @adamdbradley el 30 de diciembre de 2015 18: 51_
necesitamos las dos direcciones en la misma aplicación, según la elección del usuario, en algún momento estará en tiempo de ejecución
Ionic mismo podrá agregar dinámicamente este archivo css por usted, dependiendo de <html dir="rtl">
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 19: 23_
estas imágenes intentan cambiar la dirección del ejemplo de la aplicación de conferencia onic
si el equipo iónico cubre la dirección rtl en este ejemplo, creo que no será menos del 90% del soporte rtl
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 19: 26_
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 19: 27_
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 30 de diciembre de 2015 20: 21_
cualquier ícono que esté a la derecha, izquierda, atrás o adelante, como el ícono del botón de retroceso, necesitará este estilo
{
-webkit-transform: rotar (180 grados);
-moz-transform: rotar (180 grados);
-o-transform: rotar (180 grados);
-ms-transform: rotar (180 grados);
transformar: rotar (180 grados);
}
mhartington
en 18 ene. 2016
_De @adamdbradley el 31 de diciembre de 2015 4: 27_
Entonces @brandyscarney tuvo una buena idea de que creamos todos los archivos scss RTL dentro del repositorio y los preparamos para completar.
Estaba pensando que en lugar de agregar dinámicamente otro rtl css, podríamos tener una variable $rtl-support: false sass predeterminada que se puede actualizar en las variables sass de cada aplicación. Entonces, en la mayoría de los casos, el rtl css adicional no se agregaría a las aplicaciones, pero para aquellos que requieran el rtl css, pueden establecer $rtl-support: true .
Luego, dentro de nuestros nuevos archivos rtl scss, el CSS se puede envolver con <strong i="12">@if</strong> $rtl-support . De esta manera podemos mantener los archivos css separados y más fáciles de editar, y proporcionar soporte rtl listo para usar. ¿Crees que esto funcionará @ mashaly100200 ?
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 31 de diciembre de 2015 11:48_
sí, cargar rtl dinámicamente es una buena idea,
comencemos con la animación, porque puede que necesite más esfuerzo
- Quiero saber ¿es posible agregar una animación de transición de página específica cuando se empujan y se abren las páginas?
- y ¿cómo el desarrollador agrega esta animación específica a las páginas de remolque que entran y salen?
- ¿Puede el desarrollador observar el evento y luego agregar su animación específica también a las dos páginas?
Si su respuesta es sí para las tres preguntas anteriores, entonces puedo felicitarme porque el tema de la animación no necesita ningún esfuerzo y la dirección de rtl de apoyo total y el equipo iónico merecen un gran agradecimiento :)
mhartington
en 18 ene. 2016
_De @adamdbradley el 1 de enero de 2016 1: 53_
Esta es la animación de transición para ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts
No estoy seguro de si esto debería agregar lógica para RTL, o si debería haber una nueva animación en su lugar. Sin embargo, puede agregar su propia transición y anular la configuración pageTransition : https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 1 de enero de 2016 21: 55_
hola @adamdbradley , feliz navidad
Terminé una clase de animación personalizada que revierte el comportamiento de la clase de animación predeterminada depende de documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
Lo probé, y pronto lo probaré en proyectos reales (inshaa allah)
también terminé algunas de las clases de CSS que era necesario revertir
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9
y si me enfrento a más clases que deben revertirse, lo agregaré a este archivo hasta que termine uno o dos proyectos reales
también rtl necesita estas configuraciones en el constructor de aplicaciones
https://gist.github.com/mashaly100200/692160b036422d7b018c
Estaba tratando de agregar toda la configuración en un solo lugar, así que descubrí que puedo agregar todas las cosas en el contratista de la aplicación
espero que estas cosas puedan ayudar a que ionic2 sea totalmente compatible con rtl
No dude en agregar cualquier corrección o sugerencia.
mhartington
en 18 ene. 2016
_De @adamdbradley el 2 de enero de 2016 3: 2_
Genial, parece que la transición RTL está bastante cerca de la transición LTR, lo que me hace pensar que debería ser una opción isRTL que se pasa a las opciones de transición y solo tenemos una transición. Puedo actualizar ionic para que tenga una propiedad isRTL común a la que se pueda hacer referencia en toda la aplicación (con los webworkers queremos evitar hacer lecturas document dentro de la lógica de ionic).
mhartington
en 18 ene. 2016
_De @adamdbradley el 2 de enero de 2016 3:36_
Se agregó isRTL() a Platform : https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16
mhartington
en 18 ene. 2016
_De @adamdbradley el 2 de enero de 2016 3: 58_
Todas las transiciones ahora se pasan isRTL dentro de opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798
Entonces, ahora la transición de ios puede agregar la lógica para las transiciones RTL.
mhartington
en 18 ene. 2016
_De @adamdbradley el 2 de enero de 2016 4: 38_
Se agregó cómo podemos incluir RTL css para que se compile correctamente dentro de ionic.css (que incluye tanto md como ios css) e ionic.ios.css (solo ios). La idea es que las aplicaciones que quieran incluir RTL y LTR css dentro del mismo archivo pueden establecer $include-rtl: true en sus variables sass, de lo contrario, de forma predeterminada solo incluirán LTR css. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231
mhartington
en 18 ene. 2016
_De @MatanYed el 6 de enero de 2016 18: 14_
Solo usted debe saber: las aplicaciones RTL en iOS son en parte LTR:
El lado del botón principal de la barra de navegación está a la izquierda, el menú lateral a la izquierda, la animación de transición es de izquierda a derecha.
mhartington
en 18 ene. 2016
_De @adamdbradley el 7 de enero de 2016 16: 41_
Se agregaron nuevos métodos a la plataforma para obtener y establecer el idioma y la dirección: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f
mhartington
en 18 ene. 2016
_De @ mashaly100200 el 12 de enero de 2016 21: 2_
actualizar
para cualquiera que fluya este tema
reemplazar
config.set ('backButtonIcon', 'ion-ios-flecha-adelante');
con
config.set ('backButtonIcon', 'flecha hacia adelante');
también actualizo la clase de animación
https://gist.github.com/mashaly100200/bf713f2b558285322155
mhartington
en 18 ene. 2016
He estado trabajando en este problema en una aplicación móvil de Moodle para nuestra empresa y necesitamos que la aplicación admita inglés y árabe al mismo tiempo, por lo que no es un problema cambiar la dirección de todo a RTL, pero debe estar en ejecución. hora. Utilicé algunos ajustes al principio usando ng-if y algo de transmisión a través del rootcope en la aplicación, pero cada vez que el usuario cambia el idioma, la aplicación necesita una recarga, las cosas no funcionan en absoluto con este método.
Hace tres días, comencé a pelear con Ionic (se convierte en un problema universal :)), el equipo de moodle abre problemas en este momento pero no creo que los revisen.
No estoy usando Ionic 2, pero mi enfoque en este problema es muy simple, con el atributo de lado iónico en la directiva iónica (creo que la directiva más preocupada con el problema de RTL tiene este atributo) hará que la solución sea más fácil de lo que parece.
Estoy tratando de anular la directiva para agregar un enlace al atributo lateral porque ahora, no agrega algunas alineaciones al resto del contenido usando css en la aplicación.scss, y con la ayuda de angular-translate y el actual implementación de la aplicación moodle, actualice la palabra izquierda en las clases y de lado a derecho y viceversa cada vez que cambie el idioma.
Todavía lo estoy implementando en este momento, espero que funcione (debe funcionar de todos modos).
mohessaid
en 15 feb. 2016
después de agregar dir = "rtl" a index.html, la representación de los elementos comenzará desde la derecha, lo que afecta el aspecto de algunos elementos, como el botón de segmento.
para arreglarlo cambié
.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; }
a
.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; }
La animación de navegación debe ser opuesta a la dirección de la aplicación, desde la izquierda para las aplicaciones RTL y desde la derecha para las aplicaciones LTR. para arreglarlo hice esto:
cambiado
var OFF_RIGHT = '99.5%';
a
var OFF_RIGHT = '-99.5%';
y
var OFF_LEFT = '-33%';
a
var OFF_LEFT = '33%';
y
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
a
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '-100%');
}
en iónico-angular / transiciones / transición-ios
y para el elemento de retroceso en la barra de navegación, puse el ícono antes del texto y lo cambié a adelante.
@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/
})
el marcador de posición en la entrada de la barra de búsqueda se puede arreglar
haciendo estos cambios (cambia todo de izquierda a derecha)
.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; }
a
.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
en 14 mar. 2016
en el archivo: ionic.bundle.js
cambiar el código:
setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
cámbialo para que sea:
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)';
Sé que esta no es una buena solución, pero tenía que hacerlo.
y agregué estos 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: ""; }
e hizo el menú a la derecha:
<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
en 27 mar. 2016
sí, eso es lo que estamos esperando, y será increíble
gracias equipo iónico
adelante: +1:
alaa-alshamy
en 16 abr. 2016
EDITAR: no importa, esto ya se ha solucionado
sijav
en 31 may. 2016
ion-item-sliding debe ser la opción swipe-left para la versión rtl como esta:
<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
en 1 jun. 2016
Hola,
Estoy trabajando en ionic 2.0. ¿Cómo puedo reducir el ancho de navegación izquierdo?
rejeeshrajan10
en 21 jun. 2016
¿Cómo manejas Gestures con rtl en v2?
Necesito arreglarlo para la plataforma iOS en ionic v1. No estoy seguro de cómo el iPhone captura el deslizamiento hacia la derecha en RTL.
Pude cambiar la dirección del menú lateral y la dirección de deslizamiento en 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
en 2 jul. 2016
Cuando se publique la función RTL, podrá cambiarla después de ejecutar la aplicación (me refiero a un cambio en vivo entre ltr y rtl?
Al igual que las aplicaciones nativas que tienen la página de cambio de idioma en la aplicación.
MatanYadaev
en 19 jul. 2016
@MatanYed : Sí, lo hará. En realidad debe. Es bastante sencillo en una aplicación híbrida simplemente cambiando la dirección y alineando el texto usando CSS.
msoni11
en 19 jul. 2016
@mhartington : cuando se usa una etiqueta de iones flotante con dirección RTL, la etiqueta flotante no se alinea a la derecha, sino en algún lugar en el medio, al escribir texto en el campo de entrada.
¿hay alguna solución para esto?
<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
en 25 jul. 2016
+1
royipressburger
en 25 jul. 2016
@royipressburger (_con respecto a "+1" _) - hay un emoticón de "pulgar hacia arriba" y un botón "Suscribirse" si quieres apoyar o seguir.
astec
en 25 jul. 2016
@mhartington , @ msoni11 : ¿alguna respuesta? Estoy realmente atrapado con eso.
devoraf
en 27 jul. 2016
@devoraf : No estoy seguro de qué versión de ionic estás usando. En ionic v1 he jugado con RTL css y form element funcionó para mí.
msoni11
en 27 jul. 2016
@ msoni11 : iónico v2. ¿Te funcionó bien este comportamiento flotante en particular?
devoraf
en 27 jul. 2016
@devoraf : Todavía no he probado la
msoni11
en 27 jul. 2016
@ msoni11 : ¿puede adjuntar un CSS de muestra que pueda afectar la alineación / dirección de la etiqueta flotante?
devoraf
en 27 jul. 2016
+1
RezaHaidari
en 29 jul. 2016
@devoraf : Lo siento, pero no he usado etiquetas flotantes. He usado estos elementos de formulario y los alineé correctamente para RTL.
msoni11
en 30 jul. 2016
No sé si se ha dicho, sino que incluso la navegación por páginas cuando se cometa un error dir="rtl" se añade a <html> etiqueta. En Ionic 2, muchos de los componentes que usé no lo admitían y terminé volviendo a Ionic 1. En este momento puedo hacer algo con los componentes y no he encontrado ninguno que sea un problema para mí, pero la navegación se estropea y obtengo pantallas blancas o páginas retrasadas. Cuando elimino dir="rtl" todo funciona perfectamente.
¿Estoy haciendo algo mal o $state.go() realidad no funciona con rtl en absoluto?
loolooii
en 3 ago. 2016
@loolooii : Tienes que agregar css para que Iónico 1 funcione para 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);
}
Utilice esta versión rtl iónica https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl y podrá deslizar el dedo hacia la derecha en RTL.
msoni11
en 4 ago. 2016
@ msoni11 ¡Gracias! Cosas geniales.
loolooii
en 4 ago. 2016
@loolooii : :) También escribí una pequeña publicación en la que mencioné cómo funcionará la implementación real en la aplicación iónica. Mira aquí
msoni11
en 4 ago. 2016
¿Alguna actualización sobre el problema de RTL?
MatanYadaev
en 31 oct. 2016
¿Alguna actualización sobre esto? , también ¿por qué el equipo iónico lo eliminó de la beta 12?
OmarHassan25
en 5 dic. 2016
Creo que si enumeramos todos los problemas de RTL de los comentarios de los desarrolladores, podemos contribuir y solucionarlos uno por uno, eventualmente, terminaremos con soporte completo de RTL.
Khalid-Nowaf
en 21 dic. 2016
¡RTL es realmente importante! ¿Existe un marco de tiempo?
AmitMY
en 11 feb. 2017
@AmitMY No estoy seguro acerca de ionic2 pero para ionic1 una de mis aplicaciones en vivo está funcionando bastante bien con soporte RTL.
msoni11
en 12 feb. 2017
@ msoni11 Gracias. Estoy hablando de Ionic2.
AmitMY
en 12 feb. 2017
@AmitMY @ msoni11 Trabajaré pronto en un proyecto de tamaño medio usando IONIC 2, luego detectaré todos los problemas de RTL, si los hubiera.
Khalid-Nowaf
en 12 feb. 2017
@ Khalid-Nowaf: Estaría feliz de ayudar.
msoni11
en 12 feb. 2017
@ msoni11 gracias! Los mantendré informados.
Khalid-Nowaf
en 12 feb. 2017
RTL estaba presente en la hoja de ruta RC 12, ¡no sé por qué lo dejaron caer!
OmarHassan25
en 13 feb. 2017
Hola, ¿no veo diapositivas de iones en este largo hilo?
También necesita apoyo.
He publicado aquí una solicitud
http://idangero.us/swiper/forum/#!/general : support-for-pagination-righ
Mi solución alternativa, aún no codificada, sería rellenar las diapositivas al revés y pasar a la última diapositiva al comenzar. Supongo que tengo los eventos correctos para detectar el final de la reproducción, cuando la reproducción llega a la primera diapositiva :)
Una advertencia, aunque no soy un experto.
Espero que el soporte RTL esté planeado a nivel de componente y no solo y exclusivamente a nivel de aplicación.
Es posible que quiera mi aplicación principalmente en inglés, como pestañas / etiquetas de botones, pero el contenido real de los consumibles en árabe. Por ejemplo, como el comportamiento de un control deslizante / buscapersonas deseado o configurable para RTL debido a su orientación RTL de texto y gráficos.
¡Sip! Ya me deshice de esa desagradable barra de desplazamiento.
También puedo tener una página con 2 listas cada una en un idioma diferente.
<ion-list flow=RTL>....
<ion-list flow=LTR>....
AlGantori
en 14 feb. 2017
Cuando está en modo rtl, no hay margen entre el rango y sus etiquetas, por lo tanto, los íconos en ambos lados no son parcialmente visibles.
Mohsen7s
en 15 feb. 2017
Como parte de esto, también deberíamos analizar este problema https://github.com/driftyco/ionic/issues/10685
jgw96
en 7 abr. 2017
Hola a todos, estamos trasladando el seguimiento del soporte RTL a este problema
https://github.com/driftyco/ionic/issues/11211
Brandy trabajará un poco para que esto funcione, así que espere verlo pronto.
mhartington
en 13 abr. 2017
Hay muchos mensajes aquí, no encontré la solución porque no soy bueno en inglés.
¿Alguien puede llevarme a la solución de la dirección del menú, porque cuando cambia a la izquierda, la animación se abre de izquierda a derecha, y el deslizamiento también de izquierda a derecha?
por favor cualquier ayuda.
joesleiman
en 24 may. 2017
@joesleiman No hay una solución para ti en este momento. Se sugiere una solución en https://github.com/driftyco/ionic/pull/11336 y está pendiente de revisión.
AmitMY
en 24 may. 2017
@AmitMY ok gracias. Tengo otro problema sobre cómo cambiar la dirección a rtl desde la etiqueta html en index.html o ion-app o body porque el ion-select no está por debajo de <ion-nav> donde cambio la dirección. ¿Puedes llevarme a una solución si lo sabes?
joesleiman
en 24 may. 2017
@joesleiman : Si está usando ionic1, lo he arreglado bajo esta etiqueta https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1
Puede revisar y aplicar cambios.
msoni11
en 24 may. 2017
Establece su 'dir' predeterminado en la etiqueta HTML, y si desea cambiarlo en tiempo de ejecución, haga 'this.platform.setDit (' rtl ', true)'.
No use el atributo dir en ningún otro lugar, ya que no se admiten direcciones anidadas.
Finalmente, use la versión nocturna, ya que está más lista para RTL que la 3.2.1
Si tiene alguna otra pregunta de soporte, use el foro iónico, y para errores / características use github
AmitMY
en 24 may. 2017
@ msoni11 no iónico 3.2.0
joesleiman
en 24 may. 2017
@AmitMY estoy usando en toda mi aplicación en cada etiqueta raíz [att.dir] = 'isRtl? 'rtl': 'ltr' '(en todas las formas: como contenido de iones)
no es bueno?
joesleiman
en 24 may. 2017
@joesleiman
por ahora, solo uso la transición de página de material design, que es una alternativa para evitar la transición de página de izquierda a derecha.
javascript
// in app.module.ts
.
.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition
})
.
.
Khalid-Nowaf
en 24 may. 2017
@AmitMY ¿cómo puedo cambiar el icono del botón de retroceso a la flecha derecha en lugar de la flecha izquierda (cuando lo cambio a rtl)
joesleiman
en 24 may. 2017
@joesleiman No, tener dir="rtl" en ion-content no garantiza soporte. Siempre debe usar this.platform.setDir('rtl', true) y eliminar todos los atributos dir excepto el de la etiqueta html . También controla la dirección de los componentes iónicos de la escritura mecanografiada, como los gestos. (tenga en cuenta que setDir con true también actualiza la etiqueta html con el directorio correcto)
Acerca del botón Atrás, si usa la forma correcta de establecer la dirección, como se mencionó anteriormente, cambiará sus flechas, como se hace aquí: https://github.com/driftyco/ionic/pull/11634. Solo está disponible en la versión nocturna, y hoy se lanzará una nueva versión (3.3.0).
Pregunto nuevamente, por favor, para este tipo de preguntas de soporte, use el foro. Github es para errores / solicitudes de funciones.
Puede leer más sobre RTL aquí: https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
Esta es la documentación oficial de RTL, pero aún no está hecha, por lo que no está en el sitio web.
AmitMY
en 24 may. 2017
@AmitMY ok lo haré ... muchas gracias,
joesleiman
en 24 may. 2017
@AmitMy si el usuario puso this.platform.setDir ('rtl', true); y cierre la aplicación y luego vuelva a ella, ¿cómo puedo guardar la etiqueta html dir = 'rtl'? entonces no es buena idea usarlo. porque vuelve a dir = "ltr"
joesleiman
en 24 may. 2017
@joesleiman Entonces, si su aplicación es multidireccional y usa las preferencias del usuario para decidir de qué lado, le recomendaría usar NativeStorage y almacenar para las "preferencias" clave el objeto: {lang: "he", dir: "rtl"} , y luego en app.component.ts en platform.ready compruebe si el usuario tiene preferencias. Si lo hace, aplíquelos por setDir .
No hay otra solución por ahora.
AmitMY
en 24 may. 2017
@AmitMY cuando uso setDir: sigue siendo el ion-select >> ion-alert: tengo un problema en la dirección rtl en md (android)
joesleiman
en 24 may. 2017
@AmitMY lo resolví con esto:
html [dir = "rtl"] .alert-md .alert-radio-icon {
izquierda: 0px;
derecha: 13px;
}
joesleiman
en 24 may. 2017
Creo que no está usando la versión nocturna como sugerí ( 3.2.1-201705231529 ), y si la está usando, es un caso de estilo anulado, y se corrige aquí https://github.com/driftyco / iónico / tirón / 11635
AmitMY
en 24 may. 2017
@AmitMY puede completar la discusión aquí porque estoy encontrando más y más errores:
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591
joesleiman
en 24 may. 2017
¡Gracias por el problema! Este problema se bloquea para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
en 3 sept. 2018
Temas relacionados
alexbainbridge
·
3Comentarios
Nick-The-Uncharted
·
3Comentarios
GeorgeAnanthSoosai
·
3Comentarios
MrBokeh
·
3Comentarios
manucorporat
·
3Comentarios
Comentario más útil
¿Alguna actualización sobre el problema de RTL?