Note: This page starts in RTL (Right-to-Left) by default — it sets dir="rtl" on the HTML element so every component using CSS logical properties mirrors automatically (sidebar, toolbars, split-button toggles, icon sides, etc.). Use the toggle below to switch to LTR for comparison; the choice is remembered for this browsing session and only affects this page (it doesn't change the global demo RTL setting). Note the Hebrew text reads right-to-left even in LTR — that's Unicode bidi, independent of the layout direction.

RTL Toggle / מתג RTL

Current mode: RTL
How it works: Setting dir="rtl" on the HTML element flips all components that use CSS logical properties (margin-inline-start, padding-inline-end, etc.). No extra CSS needed.

מערכת הרשת

עמודות הרשת צריכות לשמור על הסדר שלהן אך להתיישר מימין במצב RTL.

עמודה 1 (25%)
עמודה 2 (25%)
עמודה 3 (50%)

בדיקת היסט

היסט 33%, רוחב 33%

קבוצות קלט

התוספות הקדמיות צריכות להופיע בצד ההתחלה (ימין ב-RTL), התוספות האחוריות בצד הסיום (שמאל ב-RTL).

@example.co.il
https:// .co.il
חיפוש
.co.il

כפתורים עם אייקונים

אייקונים צריכים להופיע בצד הנכון ביחס לטקסט במצב RTL.

כפתורי פיצול בכותרות כרטיסים

הפעולה הראשית והמתג צריכים להתהפך: הפינות המשוטחות בין שני הכפתורים, קו המפריד, ותפריט הנפתח צריכים ליישר לצד הנכון ב-RTL (Floating UI קורא את כיוון הכתיבה וממקם את bottom-end בצד הסיום). מוצג בשלושה טורים (pa-col-lg-1-3) כך שכל כרטיס כבר צר — שנה את רוחב החלון כדי לראות כל סרגל כלים בולע ופולט כפתורי פעולה לתוך תפריט כפתור הפיצול, כל אחד בנקודת השבירה שלו.

לוח ביצועים רבעוני ומעורבות לקוחות

סרגל הפעולות בכותרת נושא את התנהגות הבליעה — צמצם את החלון כדי לראות את הגדר, סנן ורענן מתקפלים לתוך תפריט "הוסף רכיב" בסדר זה (עדיפות נמוכה קודם; ייצוא מוצמד).

משימות מיגרציה — עדכוני סכימה בסביבת ייצור

ללא הצמדה — האחים מתקפלים בסדר ברירת המחדל (הימני ביותר קודם: שחזור ← גיבוי ← אמת).

ניהול חברי צוות והרשאות — קונסולת ארגון

שישה אחים כאן — הזמן מוצמד בעדיפות 5, כך שהוא שורד את הגל הראשון של הקיפולים אך עדיין מתקפל לפני הוסף משתמש. הכותרת נכנעת ראשונה (מתקצרת עד רצפת רוחב מינימלי) כדי שסרגל הפעולות ישמור על כפתוריו.

טבלאות

שם דואר אלקטרוני תפקיד סטטוס פעולות
יוסי כהן yossi@example.co.il מנהל מערכת פעיל
רחל לוי rachel@example.co.il משתמש ממתין
דוד ישראלי david@example.co.il עורך חדש

התראות (ניתנות לסגירה)

כפתור הסגירה צריך להופיע בצד הסיום (שמאל ב-RTL).

הצלחה! הפעולה בוצעה בהצלחה. כפתור הסגירה צריך להתהפך ב-RTL.
שגיאה! משהו השתבש. כפתור הסגירה צריך להיות בשמאל ב-RTL.
אזהרה! שים לב לפרטים הבאים לפני שתמשיך.

לשוניות

תוכן לשונית הבית. הלשוניות צריכות לזרום מימין במצב RTL.

תוכן לשונית הפרופיל.

תוכן לשונית ההגדרות.

לשוניות אנכיות

ללשוניות אנכיות צריך להיות גבול בצד הסיום (שמאל ב-RTL).

תוכן לוח הבקרה. האינדיקטור הפעיל צריך להיות בקצה הימני ב-RTL.

תוכן האנליטיקה.

תוכן הדוחות.

טיפים צפים

טיפים צפים צריכים להופיע בכיוון הנכון בהתאם לקלאס המשנה.

כלי עזר לריווח לוגי

כלים אלה משתמשים ב-CSS logical properties ומתהפכים במצב RTL.

שוליים בהתחלה (ms-*)

ms-lg (margin-inline-start)

ריפוד בהתחלה (ps-*)

ps-xl (padding-inline-start)

שוליים בסיום (me-*)

me-lg (margin-inline-end)

ריפוד בסיום (pe-*)

pe-xl (padding-inline-end)

כלי עזר ליישור טקסט

.text-start
מיושר להתחלה (ימין ב-RTL)
.text-center
תמיד במרכז
.text-end
מיושר לסיום (שמאל ב-RTL)

טפסים

מיקומי הודעות Toast

מיקומי מכולות ה-Toast משתמשים ב-logical properties. לחץ להצגת הודעה במיקומים שונים.

טקסט לדוגמה

זהו פסקה לדוגמה בעברית כדי לבדוק את זרימת הטקסט במצב RTL. הטקסט צריך לזרום מימין לשמאל באופן טבעי.

Pure Admin תומך ב-RTL באמצעות CSS Logical Properties, מה שמאפשר תמיכה אוטומטית בשפות מימין לשמאל כמו עברית וערבית ללא צורך בסגנונות נפרדים.

"הפשטות היא התחכום האולטימטיבי." - לאונרדו דה וינצ'י

רשימה עם נקודות

  • פריט ראשון ברשימה
  • פריט שני ברשימה
  • פריט שלישי ברשימה

רשימה ממוספרת

  1. שלב ראשון
  2. שלב שני
  3. שלב שלישי
Type / for commands, : to search a category, or just start typing

Settings

Body text size. All elements scale proportionally.
👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
  • 📊 Data Grid