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 to 90 deg
180
- for classes that rotates to 180 deg
270
- for classes that rotates to 270 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
Default
90 deg
180 deg
270 deg
-90 deg
-180 deg
-270 deg
copy < 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:
copy < 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>
var button = document. querySelector ( "#kt_button_toggle" ) ;
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.
copy
< 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>
< div id = " kt_toggle_block" class = " collapse" >
< div class = " rounded bg-light p-10" >
.....
</ div>
</ div>