feat(tabs): add the dynamicHeight and keepContent option

A-l-y-l-e · Feb 24, 2020 · 8554a35 · 8554a35
1 parent abec23a
commit 8554a35
Show file tree

Hide file tree

Showing 23 changed files with 416 additions and 62 deletions.
diff --git a/src/api/docs/components/tabs.html b/src/api/docs/components/tabs.html
@@ -9,6 +9,11 @@ <h2 lyTyp="headline" gutter>Tabs with asynchronously loading</h2>
 <demo-view path="docs/layout/tabs-demo/tabs-with-asynchronously-loading">
   <aui-tabs-with-asynchronously-loading></aui-tabs-with-asynchronously-loading>
 </demo-view>
+<h2 id="dynamic-height">Dynamic Height</h2>
+<p>The tab content will animate its height according to the height of the active tab.</p>
+<demo-view path="docs/layout/tabs-demo/tabs-dynamic-height">
+  <aui-tabs-dynamic-height></aui-tabs-dynamic-height>
+</demo-view>
 <h2 lyTyp="headline" gutter>Icon</h2>
 <demo-view path="docs/layout/tabs-demo/tabs-with-icon">
   <aui-tabs-with-icon></aui-tabs-with-icon>
@@ -24,4 +29,9 @@ <h2 lyTyp="headline" gutter>Label alignment</h2>
 <h2 lyTyp="headline" gutter>Placement</h2>
 <demo-view path="docs/layout/tabs-demo/tabs-placement">
   <aui-tabs-placement></aui-tabs-placement>
-</demo-view>
+</demo-view>
+<h2 id="limitations">Limitations</h2>
+<ul>
+<li><p>When using <code class="ttm ttx">keepContent</code> attribute with <code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> you must explicitly set a height to <code class="ttm ttx">ly-tabs</code> for it to work properly.</p></li>
+<li><p><code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> does not work with <code class="ttm ttx">dynamicHeight</code>.</p></li>
+</ul>
diff --git a/src/api/docs/customization/color.html b/src/api/docs/customization/color.html
@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._e768kzgb{background:rgb(255,255,0);opacity:1;}._e768kzgb *{color:#202020 !important;}</style><span class="_e768kzgb"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._iah23h32{background:rgb(0,0,0);opacity:1;}._iah23h32 *{color:white !important;}</style><span class="_iah23h32"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._cvdpar7n{background:rgb(255,255,255);opacity:1;}._cvdpar7n *{color:#202020 !important;}</style><span class="_cvdpar7n"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._4lsqa82k{background:rgba(0,0,0,0.87);opacity:0.87;}._4lsqa82k *{color:white !important;}</style><span class="_4lsqa82k"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._9oehs6ms{background:rgb(255,255,0);opacity:1;}._9oehs6ms *{color:#202020 !important;}</style><span class="_9oehs6ms"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._4wb11x1w{background:rgb(0,0,0);opacity:1;}._4wb11x1w *{color:white !important;}</style><span class="_4wb11x1w"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._2wv7lu4e{background:rgb(255,255,255);opacity:1;}._2wv7lu4e *{color:#202020 !important;}</style><span class="_2wv7lu4e"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._injin6ao{background:rgba(0,0,0,0.87);opacity:0.87;}._injin6ao *{color:white !important;}</style><span class="_injin6ao"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._9rafp2h4{background:rgb(255,255,255);opacity:1;}._9rafp2h4 *{color:#202020 !important;}</style><span class="_9rafp2h4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._ibvtcd5k{background:rgb(0,15,255);opacity:1;}._ibvtcd5k *{color:white !important;}</style><span class="_ibvtcd5k"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._9xqi98tl{background:rgb(255,255,255);opacity:1;}._9xqi98tl *{color:#202020 !important;}</style><span class="_9xqi98tl"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._fuanqegr{background:rgb(0,15,255);opacity:1;}._fuanqegr *{color:white !important;}</style><span class="_fuanqegr"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._6mumfp3u{background:rgb(255,255,0);opacity:1;}._6mumfp3u *{color:#202020 !important;}</style><span class="_6mumfp3u"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._5uh1wvp4{background:rgb(255,255,0);opacity:1;}._5uh1wvp4 *{color:#202020 !important;}</style><span class="_5uh1wvp4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._cv5edk9f{background:rgb(255,255,0);opacity:1;}._cv5edk9f *{color:#202020 !important;}</style><span class="_cv5edk9f"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._dhbvrbm4{background:rgb(255,255,0);opacity:1;}._dhbvrbm4 *{color:#202020 !important;}</style><span class="_dhbvrbm4"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._c8rfnknx{background:rgb(255,255,255);opacity:1;}._c8rfnknx *{color:#202020 !important;}</style><span class="_c8rfnknx"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._8f13o5ad{background:rgb(255,255,255);opacity:1;}._8f13o5ad *{color:#202020 !important;}</style><span class="_8f13o5ad"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._jpwajm1x{background:rgb(255,255,255);opacity:1;}._jpwajm1x *{color:#202020 !important;}</style><span class="_jpwajm1x"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._4wfm1wh6{background:rgb(255,255,255);opacity:1;}._4wfm1wh6 *{color:#202020 !important;}</style><span class="_4wfm1wh6"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>