スポンサー
Support Framework7

RTLレイアウト

Framework7は、アラビア語やヘブライ語などのRTL(右から左へ)言語を完全にサポートしています。RTLモードを有効にするには、通常のスタイルの代わりにRTLスタイルのCSSファイルをインクルードし、html要素にdir="rtl"属性を追加するだけです。

<!DOCTYPE html>
  <html dir="rtl">
    <head>
      ...
      <title>My App</title>
      <!-- Framework7のRTLスタイルシートへのパス -->
      <link rel="stylesheet" href="path/to/framework7-bundle-rtl.min.css">

      <!-- カスタムアプリのスタイルへのパス-->
      <link rel="stylesheet" href="path/to/my-app.css">
      ...

RTLモードにおけるRTLの「ミラー」はすべてCSSのみで作られているので、HTML要素の順番を変えず、LTRのままにしておくことに注意してください。