Ionic-framework: Adicionar suporte da direita para a esquerda
_De @ mashaly100200 em 30 de dezembro de 2015 17: 24_
por favor, adicione support rtl à animação e aos componentes
_Copiado da edição original: driftyco / ionic2 # 832_
mhartington
Todos 75 comentários
_De @adamdbradley em 30 de dezembro de 2015 17: 38_
Sim, isso está em nosso roteiro para ser concluído e adoraríamos receber mais feedback de desenvolvedores RTL experientes para nos ajudar a apontar onde precisamos melhorar. Você poderia fornecer uma lista de verificação de certas partes do ionic2 que não funcionam bem com RTL? Nosso objetivo seria fornecer um arquivo css RTL adicional e fazer com que qualquer JS se ajuste de acordo, dependendo se o elemento html tem dir="rtl" ou não. obrigado
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 18: 39_
É um prazer ajudar a equipe ionic2 a apoiar a RTL
fogo é fácil observar quais são os efeitos negativos se usarmos a direção rtl
podemos adicionar este atributo à tag html que converterá todos os sites em rtl
ou
podemos usá-lo no corpo como um estilo como este
style = " direction: rtl "
se a equipe iônica planeja dar suporte a rtl
eles precisarão adicionar a direção de destino nas configurações do aplicativo, porque o aplicativo precisará saber qual é a direção na inicialização
, e se o desenvolvedor precisar alterar o idioma do aplicativo para rtl em tempo de execução, devemos atualizar todos os aplicativos (como android nativo, aplicativo do Windows Phone, ios precisa reiniciar o aplicativo para mudar sua direção)
agora, quando tento mudar a direção do ionic2 html, descobri que há coisas que já suportam a direção rtl coz pure html konw como lidar com a direção rtl
mas há coisas que precisam ser apoiadas pela direção de rtl
a primeira coisa é animação
Eu não sei se a equipe iônica faz a animação com css ou código javascript, em ambos os casos todas as animações que tenham rtl ou ltr precisarão adicionar outra direção de animação, não apenas alterar varialbe, mas adicionar outra porque muitas coisas precisarão ser alteradas
Eu gostaria de fornecer assistência quanto possível à equipe iônica para ajudar nesta ótima biblioteca
Eu sei que meu inglês não é bom, mas espero que você entenda minhas palavras :)
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 18: 44_
por favor, mude este objetivo "Nosso objetivo seria fornecer um arquivo css RTL adicional"
porque precisamos das duas direções no mesmo aplicativo, com base na escolha do usuário, em algum momento estará em tempo de execução
mhartington
em 18 jan. 2016
_De @adamdbradley em 30 de dezembro de 2015 18: 51_
precisamos das duas direções no mesmo aplicativo, com base na escolha do usuário, em algum momento estará em tempo de execução
O próprio Ionic será capaz de adicionar dinamicamente este arquivo css para você, dependendo do <html dir="rtl">
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 19: 23_
essas imgs de tentar mudar a direção do exemplo onic-conference-app
se a equipe iônica cobrir a direção rtl neste exemplo, acho que não será menos que 90% do suporte rtl
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 19: 26_
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 19: 27_
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 30 de dezembro de 2015 20: 21_
qualquer ícone que seja seta para a direita, esquerda, voltar ou avançar, como o ícone do botão voltar, precisará deste estilo
{
-webkit-transform: girar (180deg);
-moz-transform: rotate (180deg);
-o-transformar: girar (180 graus);
-ms-transform: gira (180deg);
transformar: girar (180deg);
}
mhartington
em 18 jan. 2016
_De @adamdbradley em 31 de dezembro de 2015 4: 27_
Portanto, @brandyscarney teve uma boa ideia de criarmos todos os arquivos RTL scss dentro do repo e deixá-los prontos para serem preenchidos.
Eu estava pensando que, em vez de adicionar dinamicamente outro rtl css, poderíamos ter uma variável $rtl-support: false sass padrão que pode ser atualizada nas variáveis sass de cada aplicativo. Portanto, na maioria dos casos, o rtl css extra não seria adicionado aos aplicativos, mas para aqueles que precisam do rtl css, eles podem definir $rtl-support: true .
Então, em nossos novos arquivos rtl scss, o css pode ser empacotado com <strong i="12">@if</strong> $rtl-support . Desta forma, podemos manter os arquivos css separados e mais fáceis de editar, e fornecer suporte rtl pronto para uso. Acha que isso vai funcionar @ mashaly100200 ?
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 31 de dezembro de 2015 11: 48_
sim carregar o RTL dinamicamente é uma boa ideia,
vamos começar com animação, porque pode ser necessário mais esforço
- Eu quero saber se é possível adicionar uma animação de transição de página específica ao empurrar e abrir páginas?
- e como o desenvolvedor adiciona essa animação específica às duas páginas que entram e saem?
- o desenvolvedor pode assistir ao evento e adicionar sua animação específica também às duas páginas?
se sua resposta for sim para as três perguntas anteriores, então posso parabenizar meu self coz. O tópico de animação não precisa de nenhum esforço e apoio total. A direção de rtl e a equipe iônica merecem um grande obrigado :)
mhartington
em 18 jan. 2016
_De @adamdbradley em 1 de janeiro de 2016 1: 53_
Esta é a animação de transição para ios: https://github.com/driftyco/ionic2/blob/master/ionic/animations/ios-transition.ts
Não tenho certeza se isso deve adicionar lógica para RTL ou se deve haver uma nova animação em vez disso. No entanto, você pode adicionar sua própria transição e substituir a configuração pageTransition : https://github.com/driftyco/ionic2/blob/master/ionic/config/modes.ts#L24
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 1 de janeiro de 2016 21: 55_
oi @adamdbradley feliz natal
terminei uma classe de animação personalizada que reverte o comportamento padrão da classe de animação dependente de documen.dir
https://gist.github.com/mashaly100200/bf713f2b558285322155
Eu testei, e vou testá-lo em projetos reais em breve (inshaa allah)
Também terminei algumas classes de css que precisavam ser revertidas
https://gist.github.com/mashaly100200/dc23529e570034b0dfb9
e se eu enfrentar mais classes que precisam ser revertidas, vou adicioná-lo a este arquivo até terminar um ou dois projetos reais
também rtl precisa dessas configurações no construtor de aplicativo
https://gist.github.com/mashaly100200/692160b036422d7b018c
Eu estava tentando adicionar todas as configurações em um só lugar, então descobri que posso adicionar todas as coisas no contratante do aplicativo
espero que essas coisas possam ajudar a tornar o ionic2 totalmente compatível com rtl
Sinta-se à vontade para adicionar correções ou sugestões.
mhartington
em 18 jan. 2016
_De @adamdbradley em 2 de janeiro de 2016 3: 2_
Legal, então parece que a transição RTL está muito perto da transição LTR, o que me faz pensar que deveria ser uma opção isRTL que é passada para as opções de transição e só temos uma transição. Posso atualizar o iônico para que tenha uma propriedade isRTL que pode ser referenciada em todo o aplicativo (com os webworkers, queremos evitar document leituras dentro da lógica do iônico).
mhartington
em 18 jan. 2016
_De @adamdbradley em 2 de janeiro de 2016 3: 36_
Adicionado isRTL() a Platform : https://github.com/driftyco/ionic2/blob/0b4b8628bf87cabab92d6563bf9878db8b86c885/ionic/components/modal/test/basic/index.ts#L16
mhartington
em 18 jan. 2016
_De @adamdbradley em 2 de janeiro de 2016 3: 58_
Todas as transições são passadas em isRTL dentro de opts : https://github.com/driftyco/ionic2/blob/da986a5fb0ee2c7660ad4494731b5fe98b393812/ionic/components/nav/nav-controller.ts#L798
Portanto, agora a transição ios pode adicionar a lógica para as transições RTL.
mhartington
em 18 jan. 2016
_De @adamdbradley em 2 de janeiro de 2016 4: 38_
Adicionou como podemos incluir css RTL para que seja compilado corretamente dentro de ionic.css (que inclui tanto md quanto ios css) e ionic.ios.css (apenas ios). A ideia é que os aplicativos que desejam incluir css RTL e LTR no mesmo arquivo podem definir $include-rtl: true em suas variáveis sass, caso contrário, o padrão será incluir apenas css LTR. https://github.com/driftyco/ionic2/blob/f38ad4a7d2d8c527a3bc64fd8569b11eb659c290/ionic/components/item/item.ios.scss#L231
mhartington
em 18 jan. 2016
_De @MatanYed em 6 de janeiro de 2016 18: 14_
Só para você saber: os aplicativos RTL no iOS são parcialmente LTR:
O lado do botão da barra de navegação principal é à esquerda, o menu lateral à esquerda, a animação de transição é da esquerda para a direita.
mhartington
em 18 jan. 2016
_De @adamdbradley em 7 de janeiro de 2016 16: 41_
Novos métodos adicionados à plataforma para obter e definir o idioma e a direção: https://github.com/driftyco/ionic2/commit/942bd9b93b97a88554aafc9972c1c2d86de9273f
mhartington
em 18 jan. 2016
_De @ mashaly100200 em 12 de janeiro de 2016 21: 2_
atualizar
para qualquer um fluir este tópico
substituir
config.set ('backButtonIcon', 'ion-ios-seta para a frente');
com
config.set ('backButtonIcon', 'seta para a frente');
também atualizo a classe de animação
https://gist.github.com/mashaly100200/bf713f2b558285322155
mhartington
em 18 jan. 2016
Tenho trabalhado neste problema em um aplicativo móvel moodle para nossa empresa e precisamos que o aplicativo suporte inglês e árabe ao mesmo tempo, então não é um problema de mudar a direção de tudo para RTL, mas precisa estar em execução Tempo. Eu usei alguns ajustes no início usando ng-if e alguns broadcasting através do rootscope no aplicativo, mas sempre que o usuário muda o idioma, o aplicativo precisa ser recarregado, as coisas não funcionam com este método.
Três dias atrás, comecei a lutar com Ionic (torna-se um problema universal :)), A equipe moodle está abrindo questões no momento, mas não acho que eles vão olhar para eles.
Não estou usando o Ionic 2, mas minha abordagem neste problema é muito simples, com o atributo do lado iônico na diretiva iônica (acho que a diretiva mais preocupada com o problema de RTL tem esse atributo) tornará a solução mais fácil do que parece.
Estou tentando substituir a diretiva para adicionar ligação ao atributo do lado porque agora, ele não adiciona alguns alinhamentos ao resto do conteúdo usando css no app.scss e com a ajuda de angular-translate e o atual implementação do aplicativo moodle, atualize a palavra da esquerda nas aulas e do lado para a direita e vice-versa sempre que houver mudança de idioma.
Ainda estou implementando no momento, espero que funcione (deve funcionar de qualquer maneira).
mohessaid
em 15 fev. 2016
após adicionar dir = "rtl" ao index.html, a renderização dos elementos começará da direita, o que afeta a aparência de alguns elementos, como o botão de segmento.
para consertar eu mudei
.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; }
para
.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; }
A animação de Nav deve ser oposta à direção do aplicativo, da esquerda para aplicativos RTL e da direita para aplicativos LTR. para consertar eu fiz isso:
mudou
var OFF_RIGHT = '99.5%';
para
var OFF_RIGHT = '-99.5%';
e
var OFF_LEFT = '-33%';
para
var OFF_LEFT = '33%';
e
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
}
para
if (backDirection) {
// leaving content, back direction
leavingContent
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '-100%');
}
em angular-iônico / transições / transição-ios
e para o elemento de trás na barra de navegação, coloquei o ícone antes do texto e mudei o ícone para avançar.
@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/
})
o marcador de posição na entrada da barra de pesquisa pode ser corrigido
fazendo essas mudanças (mude tudo da esquerda para a direita)
.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; }
para
.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
em 14 mar. 2016
no arquivo: ionic.bundle.js
mude o código:
setTranslateX: ionic.animationFrameThrottle(function(amount) {
var xTransform = content.offsetX + amount;
$element[0].style[ionic.CSS.TRANSFORM] = 'translate3d(' + xTransform + 'px,0,0)';
mude para ser:
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)';
Eu sei que esta não é uma boa solução, mas eu tinha que fazer.
e adicionei estes 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 fez o menu à direita:
<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
em 27 mar. 2016
sim é isso que estamos esperando, e isso vai ser incrível
obrigado equipe iônica
vá em frente: +1:
alaa-alshamy
em 16 abr. 2016
EDIT: deixa pra lá isso já foi consertado
sijav
em 31 mai. 2016
ion-item-sliding precisa ser swipe-left opção para a versão 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
em 1 jun. 2016
Oi,
Estou trabalhando no iônico 2.0. como posso reduzir a largura de navegação esquerda.
rejeeshrajan10
em 21 jun. 2016
Como você está lidando com Gestos com rtl na v2?
Eu preciso consertá-lo para a plataforma iOS em ionic v1. Não tenho certeza de como o iPhone captura deslize para a direita em RTL.
Consegui mudar a direção do menu lateral e deslizar na direção 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
em 2 jul. 2016
Quando o recurso RTL for publicado, ele será capaz de alterá-lo depois de executar o aplicativo (ou seja, mudança ao vivo entre ltr para rtl?
Assim como aplicativos nativos que mudam a página de idioma no aplicativo.
MatanYadaev
em 19 jul. 2016
@MatanYed : Sim, vai. Deve, na verdade. É bastante simples no aplicativo híbrido, apenas mudando a direção e o alinhamento do texto usando CSS.
msoni11
em 19 jul. 2016
@mhartington : ao usar o rótulo iônico flutuante com direção RTL, o rótulo flutuante não fica alinhado à direita, mas em algum lugar no meio, ao digitar texto no campo de entrada.
existe alguma solução para isso?
<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
em 25 jul. 2016
+1
royipressburger
em 25 jul. 2016
@royipressburger (_regards "+1" _) - há o emoticon "polegar para cima" e o botão "Inscrever-se" se você quiser apoiar ou seguir.
astec
em 25 jul. 2016
@mhartington , @ msoni11 : alguma resposta? estou realmente preso a isso.
devoraf
em 27 jul. 2016
@devoraf : Não tenho certeza de qual versão do iônico você está usando. No ionic v1 eu joguei com RTL css e form element funcionou para mim.
msoni11
em 27 jul. 2016
@ msoni11 : v2 iônico. esse comportamento flutuante em particular funcionou bem para você?
devoraf
em 27 jul. 2016
@devoraf : Ainda não experimentei a v2. Meu aplicativo tem muitos códigos escritos em v1, então eu cortei a v1 para permitir RTL.
msoni11
em 27 jul. 2016
@ msoni11 : você pode anexar css de amostra que possa afetar o alinhamento / direção do rótulo flutuante?
devoraf
em 27 jul. 2016
+1
RezaHaidari
em 29 jul. 2016
@devoraf : Desculpe, mas não usei rótulos flutuantes. Usei esses elementos de formulário e alinhei-os corretamente para RTL.
msoni11
em 30 jul. 2016
Não sei se foi declarado, mas até a navegação pelas páginas fica confusa quando dir="rtl" é adicionado à tag <html> . No Ionic 2, muitos componentes que usei não eram compatíveis e acabei voltando para o Ionic 1. Agora posso fazer algo sobre os componentes e não encontrei nenhum que seja um problema para mim, mas a navegação fica complicada e recebo telas brancas ou páginas lentas. Quando eu removo dir="rtl" tudo funciona perfeitamente.
Estou fazendo algo errado ou $state.go() realmente não funciona com rtl ?
loolooii
em 3 ago. 2016
@loolooii : Você precisa adicionar css para fazer o iônico 1 funcionar 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);
}
Use esta versão rtl iônica https://github.com/msoni11/ionic/releases/tag/v1.1.1-rtl e você poderá deslizar para a direita em RTL.
msoni11
em 4 ago. 2016
@ msoni11 Obrigado! Coisas incríveis.
loolooii
em 4 ago. 2016
@loolooii : :) Também escrevi um pequeno post onde mencionei como a implementação real funcionará no aplicativo iônico. Verifique aqui
msoni11
em 4 ago. 2016
Alguma atualização sobre o problema do RTL?
MatanYadaev
em 31 out. 2016
Alguma atualização sobre isso? , também por que a equipe iônica o removeu do beta 12?
OmarHassan25
em 5 dez. 2016
Acho que se listarmos todos os problemas de RTL dos feedbacks dos desenvolvedores, podemos contribuir e corrigi-los um por um, eventualmente, acabaremos com suporte total para RTL.
Khalid-Nowaf
em 21 dez. 2016
RTL é muito importante! Existe um prazo?
AmitMY
em 11 fev. 2017
@AmitMY Não tenho certeza sobre ionic2, mas para ionic1 um dos meus aplicativos ao vivo está funcionando muito bem com suporte RTL.
msoni11
em 12 fev. 2017
@ msoni11 Obrigado. Estou falando sobre o Ionic2.
AmitMY
em 12 fev. 2017
@AmitMY @ msoni11 Em breve trabalharei em um projeto de médio porte usando IONIC 2, então localizarei todos os problemas de RTL, se houver.
Khalid-Nowaf
em 12 fev. 2017
@ Khalid-Nowaf: Terei todo o gosto em ajudar.
msoni11
em 12 fev. 2017
@ msoni11 obrigado! Vou manter vocês atualizados.
Khalid-Nowaf
em 12 fev. 2017
A RTL esteve presente no road map RC 12, não sei porque o abandonaram ?!
OmarHassan25
em 13 fev. 2017
Olá, não vejo lâminas de íon neste longo segmento?
Ele também precisa de apoio.
Eu postei aqui um pedido
http://idangero.us/swiper/forum/#!/general : support-for-pagination-righ
minha solução alternativa, ainda não codificada, seria preencher os slides de trás para frente e passar para o último slide ao iniciar. Presumo que tenho os eventos certos para detectar o fim do jogo, quando a reprodução chega ao primeiro slide :)
Uma palavra de cautela, embora eu não seja um especialista.
Espero que o suporte RTL seja planejado no nível do componente e não apenas e exclusivamente no nível do aplicativo.
Posso querer meu aplicativo principalmente em inglês, como rótulos de guias / botões, mas o conteúdo consumível real em árabe. Por exemplo, como o comportamento de um controle deslizante / pager desejado ou configurável para RTL devido à orientação RTL de seus textos e gráficos.
Sim! Já me livrei daquela barra de rolagem nojenta.
Também posso ter uma página com 2 listas, cada uma em um idioma diferente.
<ion-list flow=RTL>....
<ion-list flow=LTR>....
AlGantori
em 14 fev. 2017
Quando no modo rtl, não há margem entre o intervalo e seus rótulos, portanto, os ícones em ambos os lados ficam parcialmente invisíveis.
Mohsen7s
em 15 fev. 2017
Como parte disso, devemos também analisar este problema https://github.com/driftyco/ionic/issues/10685
jgw96
em 7 abr. 2017
Olá a todos, estamos movendo o rastreamento do suporte RTL para este problema
https://github.com/driftyco/ionic/issues/11211
Brandy vai fazer algum trabalho para conseguir isso, então esperamos vê-lo em breve.
mhartington
em 13 abr. 2017
tem muitas mensagens aqui, não encontrei a solução porque não sou bom em inglês.
alguem pode me levar a solução de direção do menu, pois quando muda pra esquerda lá a animação abre da esquerda pra direita, e o furto ainda da esquerda pra direita também.
por favor qualquer ajuda.
joesleiman
em 24 mai. 2017
@joesleiman Não há solução para você no momento. Uma correção é sugerida em https://github.com/driftyco/ionic/pull/11336 e está com revisão pendente.
AmitMY
em 24 mai. 2017
@AmitMY ok obrigado. Eu tenho outro problema como mudar a direção para rtl da tag html em index.html ou ion-app ou body porque o ion-select não está em <ion-nav> onde eu mudo a direção. você pode me levar a uma solução se você sabe?
joesleiman
em 24 mai. 2017
@joesleiman : Se você estiver usando ionic1, eu corrigi sob esta tag https://github.com/msoni11/ionic/releases/tag/v.1.1.1-rtl.1
Você pode revisar e aplicar alterações.
msoni11
em 24 mai. 2017
Você define seu 'dir' padrão na tag HTML, e se quiser alterá-lo em tempo de execução, faça 'this.platform.setDit (' rtl ', true)'.
Não use o atributo dir em nenhum outro lugar, pois direções aninhadas não são suportadas.
Por fim, use a versão noturna, pois é mais pronta para RTL do que 3.2.1
Se você tiver qualquer outra pergunta de suporte, por favor use o fórum iônico, e para bugs / recursos use o github
AmitMY
em 24 mai. 2017
@ msoni11 no ionic 3.2.0
joesleiman
em 24 mai. 2017
@AmitMY estou usando em todos os meus aplicativos em todas as marcas raiz [att.dir] = 'isRtl? 'rtl': 'ltr' '(em todas as formas: como o conteúdo de íons)
não é bom?
joesleiman
em 24 mai. 2017
@joesleiman
por enquanto, uso apenas a transição de página do material design, que é uma alternativa para evitar a transição da página da esquerda para a direita.
javascript
// in app.module.ts
.
.
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
pageTransition: 'md-transition' // change the page Transition to avoid "LRT" page Transition
})
.
.
Khalid-Nowaf
em 24 mai. 2017
@AmitMY, como posso mudar o ícone do botão Voltar para a seta para a direita em vez da seta para a esquerda (quando mudar para rtl)
joesleiman
em 24 mai. 2017
@joesleiman Não, ter dir="rtl" em ion-content não é garantia de suporte. Você sempre deve usar this.platform.setDir('rtl', true) e remover todos os atributos dir exceto aquele na tag html . Ele também controla a direção dos componentes iônicos do texto datilografado, como gestos. (observe que setDir com true também atualiza a tag html com o diretório correto)
Sobre o botão voltar, se você usar a forma correta de definir a direção, conforme mencionado acima, ele vai virar suas flechas, como feito aqui - https://github.com/driftyco/ionic/pull/11634. Ele está disponível apenas na versão noturna, e uma nova versão (3.3.0) será lançada ainda hoje.
Peço novamente, por favor, para este tipo de perguntas de suporte use o fórum. O Github é para bugs / solicitações de recursos.
Você pode ler mais sobre RTL aqui - https://github.com/AmitMY/ionic-site/blob/543cc0dd6d198edd5aa2a9a31ac5bd4702ef5332/content/docs/rtl-support/index.md
Esta é a documentação oficial da RTL, mas ainda não foi feita, portanto não está no site.
AmitMY
em 24 mai. 2017
@AmitMY ok farei ... muito obrigado,
joesleiman
em 24 mai. 2017
@AmitMy se o usuário colocar this.platform.setDir ('rtl', true); e feche o aplicativo e depois volte a ele como posso salvar para html tag dir = 'rtl'. então não é uma boa ideia usá-lo. porque ele retorna para dir = "ltr"
joesleiman
em 24 mai. 2017
@joesleiman Portanto, se seu aplicativo for multidirecional e você usar as preferências do usuário para decidir de que lado, eu recomendaria usar NativeStorage e armazenar como "preferências" chave o objeto: {lang: "he", dir: "rtl"} , e então em app.component.ts em platform.ready verifique se o usuário tem preferências. Se ele fizer isso, aplique-os por setDir .
Nenhuma outra solução por enquanto.
AmitMY
em 24 mai. 2017
@AmitMY quando eu uso setDir: ainda o ion-select >> ion-alert: tem problema na direção rtl no MD (android)
joesleiman
em 24 mai. 2017
@AmitMY eu resolvi assim:
html [dir = "rtl"] .alert-md .alert-radio-icon {
esquerda: 0px;
direita: 13px;
}
joesleiman
em 24 mai. 2017
Acho que você não está usando a versão noturna como sugeri ( 3.2.1-201705231529 ), e se estiver usando, é um caso de estilo substituído e está corrigido aqui https://github.com/driftyco / iônico / pull / 11635
AmitMY
em 24 mai. 2017
@AmitMY você pode completar a discussão aqui porque estou encontrando mais e mais bugs:
https://forum.ionicframework.com/t/how-can-i-change-the-back-button-in-header-arrow-to-the-right/91591
joesleiman
em 24 mai. 2017
Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não são relevantes ao problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e verifique se o modelo está totalmente preenchido.
![ionitron-bot[bot] picture](https://avatars1.githubusercontent.com/in/8640?v=4&s=40)
ionitron-bot[bot]
em 3 set. 2018
Questões relacionadas
RobFerguson
·
3Comentários
brandyscarney
·
3Comentários
giammaleoni
·
3Comentários
alexbainbridge
·
3Comentários
MrBokeh
·
3Comentários
Comentários muito úteis
Alguma atualização sobre o problema do RTL?