nativescript-rtl / ui

Add right-to-left support to the NativeScript framework
MIT License
24 stars 3 forks source link

Does not work at all #7

Closed Izrab closed 5 years ago

Izrab commented 5 years ago

This plugin does not have any effect at all, I use NativeScript 6.1, my app is TypeScript Core Vanilla (not Angular or Vue). Here is my code

<Page 
    navigatingTo="onNavigatingTo" 
    class="page" 
    actionBarHidden="true"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:rtl="@nativescript-rtl/ui"
>

    <rtl:GridLayout rows="auto, auto, *" isRtl="false" style ="direction: rtl">

        <GridLayout 
            row="0"
            class="list-group-item" 
            columns="auto, auto" 
            rows="auto, auto"
            class="fas loginBtn"
        >
            <Label col="0" row="0" text="&#xf2f6;" class="signIn signInIcon" tap="onSignInTap" />
            <Label col="0" row="1" text="Sign In" class="signIn" tap="onSignInTap"/>
            <Label col="1" row="0" text="&#xf234;" class="signUp signUpIcon" tap="onSignUpTap" />
            <Label col="1" row="1" text="Sign up" class="signUp" tap="onSignUpTap" />
        </GridLayout>

        <StackLayout row="1" class="hair"></StackLayout>

        <ListView 
            row="2"
            items="{{ myTitles }}" 
            itemTap="onItemTap" 
            loaded="{{ onListViewLoaded }}" 
            separatorColor="transparent" 
            class="list-group" 
            id="listView" 
            itemTemplateSelector="$index !== 4 ? 'even' : 'odd'"
        >
            <ListView.itemTemplates>
                <!-- The item template can only have a single root view container (e.g. GriLayout, StackLayout, etc.) -->
            <template key="even">
                <GridLayout class="list-group-item" columns="auto, *">
                    <Label col="0" text="{{ fontIcon }}" class="fas circleIcon" id="{{ iconIdentity }}" />
                    <Label col="1" text="{{ title }}" />
                </GridLayout>
            </template>

            <template key="odd">
                <GridLayout columns="auto, auto, *">
                    <Label col="0" text="{{ fontIcon }}" class="fas circleIcon" id="{{ iconIdentity }}" />
                    <Label col="1" text="Night Mode"/>
                    <Switch col="2" checked="true" isEnabled="true" id="my-switch"/>

                </GridLayout>
            </template>
            </ListView.itemTemplates>
        </ListView>

    </rtl:GridLayout>
</Page>
xlmnxp commented 5 years ago

@Izrab make isRtl true isRtl="true"

Izrab commented 5 years ago

@xlmnxp , I tried both, no effect saw.

xlmnxp commented 5 years ago

@Izrab rtl layout change direction in columns add rtl: to second GridLayout and remove it from first one

Izrab commented 5 years ago

@xlmnxp, Works very well now. Thanks a lot جزاك اللهُ خيرًا

xlmnxp commented 5 years ago

@Izrab nice :+1: , you too