diff --git a/README.md b/README.md index e69de29..29ee299 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,17 @@ +# Tabs # + +There are two options of tabs, firstly choose your version, with the scrollbar or vertical tabs for mobile. + +### How to use ### + +When styling an element, call the .skeleton() mixin with required arguments: + +1. Copy less, js and xslt code from index.xslt and src directory into your component in .Composer +2. Leave only necessary sections id in index.xslt. [data-tab] attribute is responsible for the tab that will be displayed after click. The id goes the same as in relevant component in .Composer +3. Leave only required sectionIds in main.js +4. Leave only required section ids in style.less +5. Do not forget to show required components in .Composer + +--- + +Created by • **[IdoMods](https://idomods.pl/)** • 2025 \ No newline at end of file diff --git a/mobile-scrollbar/src/style.less b/mobile-scrollbar/src/style.less index d45a053..b03918b 100644 --- a/mobile-scrollbar/src/style.less +++ b/mobile-scrollbar/src/style.less @@ -1,18 +1,17 @@ -@keyframes slide-in { - from { - transform: scaleX(0); - } - to { - transform: scaleX(1); - } -} - -@keyframes slide-in-opacity { - from { - opacity: 0; - } - to { - opacity: 1; +// Leave only necessary sections id +#projector_longdescription, +#projector_dictionary, +#projector_enclosures, +#projector_warranty, +#product_questions_list, +#opinions_section, +#projector_blog, +#products_associated_zone1 { + display: none; + animation: slide-in-opacity .3s ease; + padding-top: 5rem; + &.idm-active { + display: block; } } @@ -94,19 +93,20 @@ } } -// Leave only necessary sections id -#projector_longdescription, -#projector_dictionary, -#projector_enclosures, -#projector_warranty, -#product_questions_list, -#opinions_section, -#projector_blog, -#products_associated_zone1 { - display: none; - animation: slide-in-opacity .3s ease; - padding-top: 5rem; - &.idm-active { - display: block; +@keyframes slide-in { + from { + transform: scaleX(0); + } + to { + transform: scaleX(1); + } +} + +@keyframes slide-in-opacity { + from { + opacity: 0; + } + to { + opacity: 1; } } \ No newline at end of file diff --git a/mobile-tabs /src/style.less b/mobile-tabs /src/style.less index dc82720..7371d3b 100644 --- a/mobile-tabs /src/style.less +++ b/mobile-tabs /src/style.less @@ -1,9 +1,18 @@ -@keyframes slide-in-opacity { - from { - opacity: 0; - } - to { - opacity: 1; +// Leave only necessary sections id +#projector_longdescription, +#projector_dictionary, +#projector_enclosures, +#projector_warranty, +#product_questions_list, +#opinions_section, +#projector_blog, +#products_associated_zone1 { + display: none; + animation: slide-in-opacity .3s ease; + padding-top: 5rem; + + &.idm-active { + display: block; } } @@ -94,20 +103,11 @@ } } -// Leave only necessary sections id -#projector_longdescription, -#projector_dictionary, -#projector_enclosures, -#projector_warranty, -#product_questions_list, -#opinions_section, -#projector_blog, -#products_associated_zone1 { - display: none; - animation: slide-in-opacity .3s ease; - padding-top: 5rem; - - &.idm-active { - display: block; +@keyframes slide-in-opacity { + from { + opacity: 0; + } + to { + opacity: 1; } } \ No newline at end of file