<!DOCTYPE html>
<html>

<head>
  <title>Ionic 2 QuickStart</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- 1. Load libraries -->
  <script src='https://unpkg.com/@ionic/core@4.0.0-alpha.2/dist/ionic.js'></script>
  <!--script src='https://unpkg.com/@ionic/core@0.2.2/dist/ionic.js'></script-->
  
  <style>
    body {
       direction: rtl;
    }
  </style>
</head>

<!-- 3. Display the application -->

<body>
  <ion-app>
    <ion-list>
      <ion-item>
        <ion-label>.This page is set to RTL</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>...Slide buttons are placed on the correct (reversed) position</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>.but swiping direction is the same as in LTR...</ion-label>
      </ion-item>
      <ion-item-sliding>
        <ion-item>
          <ion-label>Item with "start" and "end" options</ion-label>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
          <ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
        </ion-item-options>

        <ion-item-options side="end">
          <ion-item-option onClick="unread(item)">Unread</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
      
      <ion-item-sliding>
        <ion-item>
          <ion-label>Item with "start" options only</ion-label>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
          <ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
      
      <ion-item-sliding>
        <ion-item>
          <ion-label>Item with "end" options only</ion-label>
        </ion-item>
        <ion-item-options side="end">
          <ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
          <ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
      
      <ion-item>
        <ion-label>(this demo uses @ionic/core version 4.0.0-alpha.2)</ion-label>
      </ion-item>
    </ion-list>
  </ion-app>
  <script>
  </script>
</body>

</html>