Note: This page demonstrates RTL (Right-to-Left) layout support. To properly view RTL mode, either enable it via the Settings panel (gear icon in the sidebar) or use the toggle button below. The toggle sets dir="rtl" on the HTML element โ€” all components using CSS logical properties will mirror automatically.

RTL Toggle / ืžืชื’ RTL

Current mode: LTR
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.

ื˜ื‘ืœืื•ืช

ืฉื ื“ื•ืืจ ืืœืงื˜ืจื•ื ื™ ืชืคืงื™ื“ ืกื˜ื˜ื•ืก ืคืขื•ืœื•ืช
ื™ื•ืกื™ ื›ื”ืŸ 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
โ†‘โ†“ Navigate
โ†ต Select
Esc Close

Settings

Body text size. All elements scale proportionally.
๐Ÿ‘ค

John Doe

Administrator
  • ๐Ÿ“Š Dashboard
  • ๐Ÿ“ Forms
  • ๐Ÿ“‹ Tables
  • ๐Ÿ“Š Data Grid