update docs

coreui · Sep 4, 2024 · 0921bfe · 0921bfe
1 parent e785399
commit 0921bfe
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/bootstrap/docs/getting-started/introduction/index.html b/bootstrap/docs/getting-started/introduction/index.html
@@ -1328,7 +1328,9 @@ <h2 id="starter-template">Starter template <a class="anchor-link" href="#starter
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-yoEOGIfJg9mO8eOS9dgSYBXwb2hCCE+AMiJYavhAofzm8AoyVE241kjON695K1v5&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 2: CoreUI PRO for Bootstrap Bundle with Popper --&gt;</span>
-</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-+Ug5YaEFOtOtIaZG8WkBSUnbFWwZrEkpXgJT1icRSEYUg3uBSsWiA8HHIVUvGzKv&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!--
+</span></span></span><span class="line"><span class="cl"><span class="c">    &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js&#34; integrity=&#34;sha384-+Ug5YaEFOtOtIaZG8WkBSUnbFWwZrEkpXgJT1icRSEYUg3uBSsWiA8HHIVUvGzKv&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
+</span></span></span><span class="line"><span class="cl"><span class="c">    --&gt;</span>
 </span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 3: Separate Popper and CoreUI/CoreUI PRO  for Bootstrap JS --&gt;</span>
 </span></span><span class="line"><span class="cl">    <span class="c">&lt;!--

diff --git a/bootstrap/docs/getting-started/rtl/index.html b/bootstrap/docs/getting-started/rtl/index.html
@@ -1071,8 +1071,34 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
 <li>Add an appropriate <code>lang</code> attribute, like <code>lang=&quot;ar&quot;</code>, on the <code>&lt;html&gt;</code> element.</li>
 </ol>
 <p>From there, you&rsquo;ll need to include an RTL version of our CSS. For example, here&rsquo;s the stylesheet for our compiled and minified CSS with RTL enabled:</p>
-<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
-</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>
+
+
+<ul class="nav nav-underline-border docs-code-tabs" role="tablist">
+
+  <li class="nav-item mb-0" role="presentation">
+    <button class="nav-link active" data-coreui-toggle="tab" data-coreui-target="#rtl-css-coreui" type="button" role="tab">CoreUI</button>
+  </li>
+
+  <li class="nav-item mb-0" role="presentation">
+    <button class="nav-link " data-coreui-toggle="tab" data-coreui-target="#rtl-css-coreui-pro" type="button" role="tab">CoreUI PRO</button>
+  </li>
+
+</ul>
+<div class="tab-content docs-code-tab-content">
+
+  <div class="tab-pane fade show active" id="rtl-css-coreui" role="tabpanel" aria-labelledby="CoreUI-tab" tabindex="0">
+    <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
+</span></span></code></pre></div>
+  </div>
+
+  <div class="tab-pane fade " id="rtl-css-coreui-pro" role="tabpanel" aria-labelledby="CoreUI PRO-tab" tabindex="0">
+    <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-Ckx+YwzO2ZiMlnEKmz7fXDaJYTIVcg4gjzN2E+KWwVfoaaS8vJDLE3Dt7NJ/p+66&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
+</span></span></code></pre></div>
+  </div>
+
+</div>
+
+<h3 id="starter-template">Starter template <a class="anchor-link" href="#starter-template" aria-label="Link to this section: Starter template"></a></h3>
 <p>You can see the above requirements reflected in this modified RTL starter template.</p>
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!doctype html&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;ar&#34;</span> <span class="na">dir</span><span class="o">=</span><span class="s">&#34;rtl&#34;</span><span class="p">&gt;</span>
@@ -1081,9 +1107,12 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width, initial-scale=1&#34;</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- CoreUI for Bootstrap CSS --&gt;</span>
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 1: CoreUI for Bootstrap CSS --&gt;</span>
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-p5xWx+E6LUOS14PKjUpsRN3Nqr8VkgwOU6aqb5904LfV33ikgoSZnFqkucmc9ejA&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 2: CoreUI PRO for Bootstrap CSS --&gt;</span>
+</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.rtl.min.css&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-Ckx+YwzO2ZiMlnEKmz7fXDaJYTIVcg4gjzN2E+KWwVfoaaS8vJDLE3Dt7NJ/p+66&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;</span>
+</span></span><span class="line"><span class="cl">
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>مرحبا بالعالم!<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
@@ -1094,7 +1123,12 @@ <h2 id="required-html">Required HTML <a class="anchor-link" href="#required-html
 </span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 1: CoreUI for Bootstrap Bundle with Popper --&gt;</span>
 </span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js&#34;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&#34;sha384-yoEOGIfJg9mO8eOS9dgSYBXwb2hCCE+AMiJYavhAofzm8AoyVE241kjON695K1v5&#34;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&#34;anonymous&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">
-</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 2: Separate Popper and CoreUI for Bootstrap JS --&gt;</span>
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 2: CoreUI PRO for Bootstrap Bundle with Popper --&gt;</span>
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!--
+</span></span></span><span class="line"><span class="cl"><span class="c">    &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js&#34; integrity=&#34;sha384-+Ug5YaEFOtOtIaZG8WkBSUnbFWwZrEkpXgJT1icRSEYUg3uBSsWiA8HHIVUvGzKv&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
+</span></span></span><span class="line"><span class="cl"><span class="c">    --&gt;</span>
+</span></span><span class="line"><span class="cl">
+</span></span><span class="line"><span class="cl">    <span class="c">&lt;!-- Option 3: Separate Popper and CoreUI for Bootstrap JS --&gt;</span>
 </span></span><span class="line"><span class="cl">    <span class="c">&lt;!--
 </span></span></span><span class="line"><span class="cl"><span class="c">    &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js&#34; integrity=&#34;sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;
 </span></span></span><span class="line"><span class="cl"><span class="c">    &lt;script src=&#34;https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.min.js&#34; integrity=&#34;sha384-kiD3MgQ2eSqSjSfkoKS7/ipCvMvkfmpWHk3WRppeqnYxCVF0wQ+7gHzkXfJyvHbQ&#34; crossorigin=&#34;anonymous&#34;&gt;&lt;/script&gt;