Overview
Rotate is a custom component used to rotate an element with a spesific angle when it's parent assigned with
.active class.
This component can be useful to change a buttons icon direction when it's .active class is toggled.
Basic
Use
.rotate class on a button and .rotate-{degree} class on a icon to rotate it to following degree options:
-
90- for classes that rotates to90 deg -
180- for classes that rotates to180 deg -
270- for classes that rotates to270 deg -
n90- for classes that rotates to negative-90 deg -
n180- for classes that rotates to negative-180 deg -
n270- for classes that rotates to negative-270 deg
<button type="button" class="btn btn-primary">
Default <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
90 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
180 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
270 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
-90 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
-180 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-primary rotate">
-270 deg <i class="ki-duotone ki-black-right-line fs-2 ms-3 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>Toggle
Use
data-kt-rotate="true" attribute to automatically toggle the button active state or use Javascript code to toggle programmatically:
<button type="button" class="btn btn-primary me-5 rotate" data-kt-rotate="true">
90 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-danger me-5 rotate" data-kt-rotate="true">
180 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>
<button type="button" class="btn btn-success me-5 rotate" id="kt_button_toggle">
270 deg <i class="ki-duotone ki-black-right-line fs-2 rotate-90 ms-3"><span class="path1"></span><span class="path2"></span></i>
</button>// Element to indecate
var button = document.querySelector("#kt_button_toggle");
// Handle button click event
button.addEventListener("click", function() {
button.classList.toggle("active");
});Collapse
Use Rotate with
.collapsible and .collapsed classes to toggle a block using Bootstrap Collapse
and display:
Toggle block
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<!--begin::Toggle link-->
<a data-bs-toggle="collapse" href="#kt_toggle_block" class="btn btn-link btn-color-muted btn-active-color-primary rotate collapsible collapsed">
Toggle block
<span class="d-flex flex-center rotate-n180 ms-3">
<i class="ki-duotone ki-down fs-3"></i>
</span>
</a>
<!--end::Toggle link-->
<!--begin::Toggle block-->
<div id="kt_toggle_block" class="collapse">
<div class="rounded bg-light p-10">
.....
</div>
</div>
<!--end::Toggle block-->
2024©
Keenthemes
