@@ -1071,8 +1071,34 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
10711071< li > Add an appropriate < code > lang</ code > attribute, like < code > lang="ar"</ code > , on the < code > <html></ code > element.</ li >
10721072</ ol >
10731073< p > From there, you’ll need to include an RTL version of our CSS. For example, here’s the stylesheet for our compiled and minified CSS with RTL enabled:</ p >
1074- < div class ="
highlight "
> < pre tabindex ="
0 "
class ="
chroma "
> < code class ="
language-html "
data-lang ="
html "
> < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> link
</ span > < span class ="
na "
> rel
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "stylesheet"
</ span > < span class ="
na "
> href
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/css/coreui.rtl.min.css"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> >
</ span > 1075- </ span > </ span > </ code > </ pre > </ div > < h3 id ="starter-template "> Starter template < a class ="anchor-link " href ="#starter-template " aria-label ="Link to this section: Starter template "> </ a > </ h3 >
1074+
1075+
1076+ < ul class ="nav nav-underline-border docs-code-tabs " role ="tablist ">
1077+
1078+ < li class ="nav-item mb-0 " role ="presentation ">
1079+ < button class ="nav-link active " data-coreui-toggle ="tab " data-coreui-target ="#rtl-css-coreui " type ="button " role ="tab "> CoreUI</ button >
1080+ </ li >
1081+
1082+ < li class ="nav-item mb-0 " role ="presentation ">
1083+ < button class ="nav-link " data-coreui-toggle ="tab " data-coreui-target ="#rtl-css-coreui-pro " type ="button " role ="tab "> CoreUI PRO</ button >
1084+ </ li >
1085+
1086+ </ ul >
1087+ < div class ="tab-content docs-code-tab-content ">
1088+
1089+ < div class ="tab-pane fade show active " id ="rtl-css-coreui " role ="tabpanel " aria-labelledby ="CoreUI-tab " tabindex ="0 ">
1090+ < div class ="
highlight "
> < pre tabindex ="
0 "
class ="
chroma "
> < code class ="
language-html "
data-lang ="
html "
> < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> link
</ span > < span class ="
na "
> rel
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "stylesheet"
</ span > < span class ="
na "
> href
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/css/coreui.rtl.min.css"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> >
</ span > 1091+ </ span > </ span > </ code > </ pre > </ div >
1092+ </ div >
1093+
1094+ < div class ="tab-pane fade " id ="rtl-css-coreui-pro " role ="tabpanel " aria-labelledby ="CoreUI PRO-tab " tabindex ="0 ">
1095+ < div class ="
highlight "
> < pre tabindex ="
0 "
class ="
chroma "
> < code class ="
language-html "
data-lang ="
html "
> < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> link
</ span > < span class ="
na "
> rel
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "stylesheet"
</ span > < span class ="
na "
> href
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/css/coreui.rtl.min.css"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-Ckx+YwzO2ZiMlnEKmz7fXDaJYTIVcg4gjzN2E+KWwVfoaaS8vJDLE3Dt7NJ/p+66"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> >
</ span > 1096+ </ span > </ span > </ code > </ pre > </ div >
1097+ </ div >
1098+
1099+ </ div >
1100+
1101+ < h3 id ="starter-template "> Starter template < a class ="anchor-link " href ="#starter-template " aria-label ="Link to this section: Starter template "> </ a > </ h3 >
10761102< p > You can see the above requirements reflected in this modified RTL starter template.</ p >
10771103< div class ="highlight "> < pre tabindex ="0 " class ="chroma "> < code class ="language-html " data-lang ="html "> < span class ="line "> < span class ="cl "> < span class ="cp "> <!doctype html></ span >
10781104</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> <</ span > < span class ="nt "> html</ span > < span class ="na "> lang</ span > < span class ="o "> =</ span > < span class ="s "> "ar"</ span > < span class ="na "> dir</ span > < span class ="o "> =</ span > < span class ="s "> "rtl"</ span > < span class ="p "> ></ span >
@@ -1081,9 +1107,12 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
10811107</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> <</ span > < span class ="nt "> meta</ span > < span class ="na "> charset</ span > < span class ="o "> =</ span > < span class ="s "> "utf-8"</ span > < span class ="p "> ></ span >
10821108</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> <</ span > < span class ="nt "> meta</ span > < span class ="na "> name</ span > < span class ="o "> =</ span > < span class ="s "> "viewport"</ span > < span class ="na "> content</ span > < span class ="o "> =</ span > < span class ="s "> "width=device-width, initial-scale=1"</ span > < span class ="p "> ></ span >
10831109</ span > </ span > < span class ="line "> < span class ="cl ">
1084- </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- CoreUI for Bootstrap CSS --></ span >
1110+ </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 1: CoreUI for Bootstrap CSS --></ span >
10851111</ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> link
</ span > < span class ="
na "
> rel
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "stylesheet"
</ span > < span class ="
na "
> href
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/css/coreui.rtl.min.css"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> >
</ span > 10861112</ span > </ span > < span class ="line "> < span class ="cl ">
1113+ </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 2: CoreUI PRO for Bootstrap CSS --></ span >
1114+ </ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> link
</ span > < span class ="
na "
> rel
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "stylesheet"
</ span > < span class ="
na "
> href
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/css/coreui.rtl.min.css"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-Ckx+YwzO2ZiMlnEKmz7fXDaJYTIVcg4gjzN2E+KWwVfoaaS8vJDLE3Dt7NJ/p+66"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> >
</ span > 1115+ </ span > </ span > < span class ="line "> < span class ="cl ">
10871116</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> <</ span > < span class ="nt "> title</ span > < span class ="p "> ></ span > مرحبا بالعالم!< span class ="p "> </</ span > < span class ="nt "> title</ span > < span class ="p "> ></ span >
10881117</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> </</ span > < span class ="nt "> head</ span > < span class ="p "> ></ span >
10891118</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="p "> <</ span > < span class ="nt "> body</ span > < span class ="p "> ></ span >
@@ -1094,7 +1123,12 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
10941123</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 1: CoreUI for Bootstrap Bundle with Popper --></ span >
10951124</ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
p "
> <
</ span > < span class ="
nt "
> script
</ span > < span class ="
na "
> src
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/js/coreui.bundle.min.js"
</ span > < span class ="
na "
> integrity
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "sha384-yoEOGIfJg9mO8eOS9dgSYBXwb2hCCE+AMiJYavhAofzm8AoyVE241kjON695K1v5"
</ span > < span class ="
na "
> crossorigin
</ span > < span class ="
o "
> =
</ span > < span class ="
s "
> "anonymous"
</ span > < span class ="
p "
> ></
</ span > < span class ="
nt "
> script
</ span > < span class ="
p "
> >
</ span > 10961125</ span > </ span > < span class ="line "> < span class ="cl ">
1097- </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 2: Separate Popper and CoreUI for Bootstrap JS --></ span >
1126+ </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 2: CoreUI PRO for Bootstrap Bundle with Popper --></ span >
1127+ </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!--
1128+ </ span > </ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
c "
> <script src="https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/js/coreui.bundle.min.js" integrity="sha384-+Ug5YaEFOtOtIaZG8WkBSUnbFWwZrEkpXgJT1icRSEYUg3uBSsWiA8HHIVUvGzKv" crossorigin="anonymous"></script>
1129+ </ span > </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> --></ span >
1130+ </ span > </ span > < span class ="line "> < span class ="cl ">
1131+ </ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!-- Option 3: Separate Popper and CoreUI for Bootstrap JS --></ span >
10981132</ span > </ span > < span class ="line "> < span class ="cl "> < span class ="c "> <!--
10991133</ span > </ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
c "
> <script src="https://cdn.jsdelivr.net/npm/@popperjs/
[email protected] /dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
11001134</ span > </ span > </ span > < span class ="
line "
> < span class ="
cl "
> < span class ="
c "
> <script src="https://cdn.jsdelivr.net/npm/@coreui/
[email protected] /dist/js/coreui.min.js" integrity="sha384-kiD3MgQ2eSqSjSfkoKS7/ipCvMvkfmpWHk3WRppeqnYxCVF0wQ+7gHzkXfJyvHbQ" crossorigin="anonymous"></script>
0 commit comments