メインコンテンツへスキップ

ドキュメント

右から左へのサポート

UIkitは右から左へ記述する言語をサポートしており、すべてのデザイン要素の向きを切り替えることができます。

RTLバージョンは、フロート、テキスト配置、位置座標、背景の影の方向などのプロパティを含む、UIkitデザイン要素の向きを切り替えます。ただし、明示的に*-leftまたは*-rightという名前が付けられているすべてのクラスは、RTLバージョンでは同じままです。

使用方法

RTLモードでUIkitを使用するには、dist/フォルダに含まれているuikit.rtl.min.cssを使用します。ウェブサイトの<html>タグにdir="rtl"属性を追加してください。 JavaScriptはデフォルトでRTLをサポートしているため、何も変更せずに通常のJSファイルを含めることができます。

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <title></title>
        <link rel="stylesheet" href="css/uikit.rtl.min.css" />
        <script src="js/uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>

利用可能なコンポーネントを確認し、通常どおりマークアップを作成してください。RTLバージョンで作業する場合、違いはありません。

ソースからのコンパイル

GitHubソースからUIkitをセットアップする場合は、UIkitのRTLバージョンを自分でコンパイルすることもできます。これには、custom/ディレクトリに作成したカスタムUIkitテーマが含まれます。

pnpm install
pnpm compile-rtl

結果のファイルは、dist/フォルダに配置され、*.rtl.cssで終わります。 JavaScriptファイルは、デフォルトのLTRバージョンと同じままです。