"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1651],{3905:function(e,t,a){a.d(t,{Zo:function(){return c},kt:function(){return p}});var n=a(7294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function s(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?s(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):s(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function r(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},s=Object.keys(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(n=0;n<s.length;n++)a=s[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var l=n.createContext({}),d=function(e){var t=n.useContext(l),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},c=function(e){var t=d(e.components);return n.createElement(l.Provider,{value:t},e.children)},h={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,s=e.originalType,l=e.parentName,c=r(e,["components","mdxType","originalType","parentName"]),m=d(a),p=i,u=m["".concat(l,".").concat(p)]||m[p]||h[p]||s;return a?n.createElement(u,o(o({ref:t},c),{},{components:a})):n.createElement(u,o({ref:t},c))}));function p(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var s=a.length,o=new Array(s);o[0]=m;var r={};for(var l in t)hasOwnProperty.call(t,l)&&(r[l]=t[l]);r.originalType=e,r.mdxType="string"==typeof e?e:i,o[1]=r;for(var d=2;d<s;d++)o[d]=a[d];return n.createElement.apply(null,o)}return n.createElement.apply(null,a)}m.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return r}});var n=a(7462),i=a(3366),s=a(7294),o=["isBad","isGood","children","disableFullscreen","limitWidth"];function r(e){var t=e.isBad,a=e.isGood,r=e.children,l=e.disableFullscreen,d=e.limitWidth,c=(0,i.Z)(e,o),h=(0,s.useState)(!1),m=h[0],p=h[1];return s.createElement("div",{className:"preview-box-wrapper",style:d?{width:d,display:"table",margin:"0 auto"}:{}},!l&&s.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),p(!m)}},m?s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},s.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):s.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},s.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&s.createElement("div",{className:"is-bad-example style-red"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},s.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),a&&s.createElement("div",{className:"is-good-example style-green"},s.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},s.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),s.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:r},c)))}},7584:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return l},contentTitle:function(){return d},metadata:function(){return c},toc:function(){return h},default:function(){return p}});var n=a(7462),i=a(3366),s=(a(7294),a(3905)),o=a(2695),r=["components"],l={title:"Tabs"},d=void 0,c={unversionedId:"components/tabs",id:"components/tabs",isDocsHomePage:!1,title:"Tabs",description:"With Tabs we can have different layers of content in the same place, users can choose which layer they want to see. To use tabs, it is necessary to load the JavaScript file of FlatifyCSS, so without this file, you just have the component which does not work on click.",source:"@site/docs/components/tabs.mdx",sourceDirName:"components",slug:"/components/tabs",permalink:"/docs/components/tabs",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/tabs.mdx",tags:[],version:"current",frontMatter:{title:"Tabs"},sidebar:"tutorialSidebar",previous:{title:"Search bar",permalink:"/docs/components/search-bar"},next:{title:"Mockups",permalink:"/docs/mockups/intro"}},h=[{value:"A simple tabs component",id:"a-simple-tabs-component",children:[{value:"Change line position",id:"change-line-position",children:[],level:3},{value:"Centered tabs",id:"centered-tabs",children:[],level:3},{value:"Bordered tabs",id:"bordered-tabs",children:[],level:3},{value:"Scrollable tabs",id:"scrollable-tabs",children:[],level:3}],level:2},{value:"Animations",id:"animations",children:[{value:"Predefined animations",id:"predefined-animations",children:[],level:3},{value:"Custom animations",id:"custom-animations",children:[],level:3},{value:"Animations example",id:"animations-example",children:[],level:3},{value:"Animations for reduced motion users",id:"animations-for-reduced-motion-users",children:[],level:3}],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Colors",id:"colors",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:h};function p(e){var t=e.components,a=(0,i.Z)(e,r);return(0,s.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"With Tabs we can have different layers of content in the same place, users can choose which layer they want to see. To use tabs, it is necessary to load the JavaScript file of FlatifyCSS, so without this file, you just have the component which does not work on click."),(0,s.kt)("h2",{id:"a-simple-tabs-component"},"A simple tabs component"),(0,s.kt)("p",null,"Each tabs component is wrapped with ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-wrapper")," (which is not necessary), there is a header and content area. Inside the header area buttons are represented, they have target tab panel selectors that are inside the content area."),(0,s.kt)(o.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero <span class="badge">256</span> </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Accessibility matters!")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Try to apply guides for a perfect tab component, first read ",(0,s.kt)("a",{parentName:"p",href:"https://www.w3.org/TR/wai-aria-practices/#tabpanel"},"W3C Working Groups Notes about tabs"),". The code of the example above has done the things that you should do, for example, the active tab button will get ",(0,s.kt)("inlineCode",{parentName:"p"},'aria-selected="true"')," automatically, you just need to determine the basics ",(0,s.kt)("inlineCode",{parentName:"p"},"aria-")," HTML attributes."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="tabs-wrapper">\n  <div class="tabs-header" role="tablist">\n    <button role="tab" class="tab-button active" aria-controls="panel-kafka" aria-selected="true">Kafka</button>\n    <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false">Werther</button>\n    <button\n      role="tab"\n      class="tab-button"\n      aria-controls="panel-cicero"\n      data-tab-target=".cicero-tab-panel"\n      aria-selected="false"\n    >\n      Cicero\n    </button>\n  </div>\n  <div class="tabs-content">\n    <div id="panel-kafka" class="tab-panel show">1 ...</div>\n    <div id="panel-werther" class="tab-panel">2 ...</div>\n    <div id="panel-cicero" class="tab-panel cicero-tab-panel">3 ...</div>\n  </div>\n</div>\n')),(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Determine the target panel")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"A tab button should determine the target tab panel that will be displayed when the tab button is clicked.",(0,s.kt)("br",{parentName:"p"}),"\n","It can be defined with both ",(0,s.kt)("inlineCode",{parentName:"p"},"data-tab-target")," and ",(0,s.kt)("inlineCode",{parentName:"p"},"aria-controls")," HTML attributes.",(0,s.kt)("br",{parentName:"p"}),"\n","Note that ",(0,s.kt)("inlineCode",{parentName:"p"},"data-tab-target")," has more priority and it accepts any kind of selectors like ",(0,s.kt)("inlineCode",{parentName:"p"},'data-tab-target=".my-panel"')," so you should determine if the selector is class or ID.",(0,s.kt)("br",{parentName:"p"}),"\n","On the other hand, ",(0,s.kt)("inlineCode",{parentName:"p"},'aria-controls="my-panel"')," is an HTML attribute for accessibility purposes it should have the ID of the target panel so it can be used to determine the target as well (when ",(0,s.kt)("inlineCode",{parentName:"p"},"data-tab-target")," is not set)."))),(0,s.kt)("h3",{id:"change-line-position"},"Change line position"),(0,s.kt)("p",null,"You can add ",(0,s.kt)("inlineCode",{parentName:"p"},".line-at-top")," class to the ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-header")," to change tab indicator line from bottom to top."),(0,s.kt)(o.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper"> <div class="tabs-header line-at-top" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("h3",{id:"centered-tabs"},"Centered tabs"),(0,s.kt)("p",null,"By adding ",(0,s.kt)("inlineCode",{parentName:"p"},".flex-center")," class to the ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-header")," element, tabs will be center aligned."),(0,s.kt)(o.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper"> <div class="tabs-header flex-center" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("h3",{id:"bordered-tabs"},"Bordered tabs"),(0,s.kt)("p",null,"It is also possible to have a bordered tabs component, add ",(0,s.kt)("inlineCode",{parentName:"p"},".bordered")," class to the ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-wrapper"),"."),(0,s.kt)(o.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper bordered"> <div class="tabs-header flex-center" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("h3",{id:"scrollable-tabs"},"Scrollable tabs"),(0,s.kt)("p",null,"All of a sudden you might have a lot of tabs and you do not want them to break into multiple lines, so you can add the ",(0,s.kt)("inlineCode",{parentName:"p"},".scrollable")," class to the ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-header"),", it will put the tabs in a scrollable container as long as the tabs are wider than the container."),(0,s.kt)(o.Z,{height:"310px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="tabs-wrapper bordered"> <div class="tabs-header scrollable" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Long tab </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Longer tab </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Longest tab </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> The long long tab </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> The longest tab in the world </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("h2",{id:"animations"},"Animations"),(0,s.kt)("p",null,"Tabs by default has blow in/out animation, however you can add ",(0,s.kt)("inlineCode",{parentName:"p"},".slide-animation"),", ",(0,s.kt)("inlineCode",{parentName:"p"},".fade-animation"),", ",(0,s.kt)("inlineCode",{parentName:"p"},".no-animation")," to ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-content"),".",(0,s.kt)("br",{parentName:"p"}),"\n","By the way, it is possible to use a brand new animation to show/hide tabs, you can use CSS variables \u2014 that are defined for this purpose \u2014 to create your gorgeous animation."),(0,s.kt)("h3",{id:"predefined-animations"},"Predefined animations"),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},".slide-animation"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},".fade-animation"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},".no-animation")),(0,s.kt)("h3",{id:"custom-animations"},"Custom animations"),(0,s.kt)("p",null,"To change current animations duration:",(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-show-duration"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-hide-duration")),(0,s.kt)("p",null,"Or set custom animations:",(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-show"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-hide")),(0,s.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"Do not use ",(0,s.kt)("inlineCode",{parentName:"h5"},"none")," for animations!")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Never use ",(0,s.kt)("inlineCode",{parentName:"p"},"none")," for these kinds of animations, because FlatifyCSS JavaScript listens to ",(0,s.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event"},"animationend event"),", so if you set ",(0,s.kt)("inlineCode",{parentName:"p"},"none")," there won't be an animation, it means ",(0,s.kt)("inlineCode",{parentName:"p"},"animationend")," is not going to be triggered. If you want to disable an animation just set ",(0,s.kt)("inlineCode",{parentName:"p"},"animation-duration")," to ",(0,s.kt)("inlineCode",{parentName:"p"},"0s"),".",(0,s.kt)("br",{parentName:"p"}),"\n","The example could be:"),(0,s.kt)("pre",{parentName:"div"},(0,s.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".no-animation-accordion {\n  --flatify__tab-animation-show: flatify-fade-in 0s;\n  --flatify__tab-animation-hide: flatify-fade-out 0s;\n}\n")))),(0,s.kt)("h3",{id:"animations-example"},"Animations example"),(0,s.kt)("p",null,"Check out the examples below to understand use cases:"),(0,s.kt)(o.Z,{height:"1630px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <style> @keyframes my-asteroid-anim-show{ from{ opacity: 0; transform: scale(3) rotate(180deg); } to{ opacity: 1; transform: scale(1) rotate(0); } } .my-custom-asteroid-animation{ --flatify__tab-animation-show: my-asteroid-anim-show 1s cubic-bezier(0.59, -0.39, 0.36, 1.38); --flatify__tab-animation-hide: flatify-fade-out 0s; } @keyframes my-slide-top-anim-show{ from{ opacity: 0; transform: translateY(-50%); } to{ opacity: 1; transform: translateY(0); } } @keyframes my-slide-bottom-anim-hide{ from{ opacity: 1 transform: translateY(0); } to{ opacity: 0; transform: translateY(50%); } } .my-custom-slide-animation{ --flatify__tab-animation-show: my-slide-top-anim-show 0.2s linear; --flatify__tab-animation-hide: my-slide-bottom-anim-hide 0.2s linear; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <h3>Slide animation</h3> <div class="tabs-wrapper bordered"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content slide-animation"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> <h3>Fade animation</h3> <div class="tabs-wrapper bordered"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka-2" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-2" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-2" data-tab-target=".cicero-tab-panel-2" aria-selected="false"> Cicero </button> </div> <div class="tabs-content fade-animation"> <div id="panel-kafka-2" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther-2" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero-2" class="tab-panel cicero-tab-panel-2"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> <h3>No animation</h3> <div class="tabs-wrapper bordered"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka-3" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-3" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-3" data-tab-target=".cicero-tab-panel-3" aria-selected="false"> Cicero </button> </div> <div class="tabs-content no-animation"> <div id="panel-kafka-3" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther-3" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero-3" class="tab-panel cicero-tab-panel-3"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> <h3>Custom: Asteroid animation</h3> <div class="tabs-wrapper bordered"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka-4" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-4" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-4" data-tab-target=".cicero-tab-panel-4" aria-selected="false"> Cicero </button> </div> <div class="tabs-content my-custom-asteroid-animation"> <div id="panel-kafka-4" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther-4" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero-4" class="tab-panel cicero-tab-panel-4"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> <h3>Custom: Y axis slide animation</h3> <div class="tabs-wrapper bordered"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka-5" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-5" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-5" data-tab-target=".cicero-tab-panel-5" aria-selected="false"> Cicero </button> </div> <div class="tabs-content my-custom-slide-animation"> <div id="panel-kafka-5" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What is happened to me?" he thought. It was not a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. </div> <div id="panel-werther-5" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. </div> <div id="panel-cicero-5" class="tab-panel cicero-tab-panel-5"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"HTML")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"The examples above has the same HTML for different types, ",(0,s.kt)("strong",{parentName:"p"},"the only point is that animation classes should be added to the ",(0,s.kt)("inlineCode",{parentName:"strong"},".tabs-content")," element"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"/* Asteroid animation */\n@keyframes my-asteroid-anim-show {\n    from {\n            opacity: 0;\n            transform: scale(3) rotate(180deg);\n    }\n    to {\n            opacity: 1;\n            transform: scale(1) rotate(0);\n    }\n}\n\n.my-custom-asteroid-animation {\n    --flatify__tab-animation-show: my-asteroid-anim-show 1s cubic-bezier(0.59, -0.39, 0.36, 1.38);\n    --flatify__tab-animation-hide: flatify-fade-out 0s;\n}\n\n/* Y asix slide animation */\n@keyframes my-slide-top-anim-show {\n    from {\n        opacity: 0;\n        transform: translateY(-50%);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n@keyframes my-slide-bottom-anim-hide {\n    from {\n        opacity: 1\n        transform: translateY(0);\n    }\n    to {\n        opacity: 0;\n        transform: translateY(50%);\n    }\n}\n\n.my-custom-slide-animation {\n    --flatify__tab-animation-show: my-slide-top-anim-show 0.2s linear;\n    --flatify__tab-animation-hide: my-slide-bottom-anim-hide 0.2s linear;\n}\n")),(0,s.kt)("h3",{id:"animations-for-reduced-motion-users"},"Animations for reduced motion users"),(0,s.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Accessibility matters!")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"For ",(0,s.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"},"reduced motion users"),", all animations will be fade in/out."),(0,s.kt)("div",{class:"flex-center comparison-gifs"},(0,s.kt)("figure",null,(0,s.kt)("img",{src:"/img/docs/tabs/original-tab-animation.gif"}),(0,s.kt)("figcaption",null,"Original")),(0,s.kt)("figure",null,(0,s.kt)("img",{src:"/img/docs/tabs/reduced-motion-tab-animation.gif"}),(0,s.kt)("figcaption",null,"Reduced motion"))))),(0,s.kt)("h2",{id:"sizes"},"Sizes"),(0,s.kt)("p",null,"To change tabs size use ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,s.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,s.kt)(o.Z,{height:"510px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="tabs-wrapper bordered size-xs"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> <div class="tabs-wrapper bordered size-md"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active" aria-controls="panel-kafka-2" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-2" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-2" data-tab-target=".cicero-tab-panel-2" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka-2" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther-2" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero-2" class="tab-panel cicero-tab-panel-2"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> <div class="tabs-wrapper bordered size-2x"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active" aria-controls="panel-kafka-3" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-3" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-3" data-tab-target=".cicero-tab-panel-3" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka-3" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther-3" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero-3" class="tab-panel cicero-tab-panel-3"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="tabs-wrapper bordered size-xs">...</div>\n<div class="tabs-wrapper bordered size-md">...</div>\n<div class="tabs-wrapper bordered size-2x">...</div>\n')),(0,s.kt)("h2",{id:"colors"},"Colors"),(0,s.kt)("p",null,"There are helper classes for styling elements like tabs, first read about ",(0,s.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),". Note that you should add classes to the ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-wrapper")," or ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-header")," and ",(0,s.kt)("inlineCode",{parentName:"p"},".tabs-content")," separately."),(0,s.kt)(o.Z,{height:"500px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper bordered style-dark-light"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> <div class="tabs-wrapper bordered style-blue-light"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active" aria-controls="panel-kafka-2" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-2" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-2" data-tab-target=".cicero-tab-panel-2" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka-2" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther-2" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero-2" class="tab-panel cicero-tab-panel-2"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> <div class="tabs-wrapper bordered style-pink"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active" aria-controls="panel-kafka-3" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther-3" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero-3" data-tab-target=".cicero-tab-panel-3" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka-3" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther-3" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero-3" class="tab-panel cicero-tab-panel-3"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="tabs-wrapper bordered style-dark">...</div>\n<div class="tabs-wrapper bordered style-blue-light">...</div>\n<div class="tabs-wrapper bordered style-pink">...</div>\n')),(0,s.kt)("h2",{id:"customization"},"Customization"),(0,s.kt)("p",null,"FlatifyCSS has some CSS variables for customizing tabs, as we talked earlier about animations you can also change the colors of tabs with these variables."),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-txt-color"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-bg-color"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-border-color"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__color-accent-primary")," (to customize active tab color)"),(0,s.kt)("p",null,"and also animation CSS variables as ",(0,s.kt)("a",{parentName:"p",href:"#animations"},"we talked about them above"),":"),(0,s.kt)("p",null,(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-show-duration"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-hide-duration"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-show"),(0,s.kt)("br",{parentName:"p"}),"\n",(0,s.kt)("inlineCode",{parentName:"p"},"--flatify__tab-animation-hide")),(0,s.kt)(o.Z,{height:"200px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Tabs</title> <style> .my-custom-tabs{ --flatify__tab-txt-color: #F5F7FA; --flatify__tab-bg-color: #AA8E69; --flatify__tab-border-color: #BAA286; --flatify__color-accent-primary: #FFCE54; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body class="flex-column-center"> <div class="tabs-wrapper bordered my-custom-tabs"> <div class="tabs-header" role="tablist"> <button role="tab" class="tab-button active"  aria-controls="panel-kafka" aria-selected="true"> Kafka </button> <button role="tab" class="tab-button" aria-controls="panel-werther" aria-selected="false"> Werther </button> <button role="tab" class="tab-button" aria-controls="panel-cicero" data-tab-target=".cicero-tab-panel" aria-selected="false"> Cicero </button> </div> <div class="tabs-content"> <div id="panel-kafka" class="tab-panel show"> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. </div> <div id="panel-werther" class="tab-panel"> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. </div> <div id="panel-cicero" class="tab-panel cicero-tab-panel"> But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system. </div> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}))}p.isMDXComponent=!0}}]);