npm i ronimation
import Ronimation from 'ronimation';
Ronimation.watchOutside({ size: "1px", color: "blue", style: "solid" }, false).run();
-
Method
watchOutside()
adalah opsional. Jika anda mengatur parameter kedua-nya menjadiTrue
, maka anda dapat melihat sesuatu yang menarik di belakang layar. -
Method
run()
wajib ada.
- Menerapkan class bernama
Ronimation
akan membuat button anda mengikuti default style yang telah kami tanamkan di dalamnya.
<button class="Ronimation">Hello, Damenjo</button>
-
Jika anda memiliki style property
Padding
yang ditanamkan ke dalam button yang telah ditambahkan kelasRonimation
, selama anda tidak memilikidata-attribute
berjenisPadding
yang ditambahkan ke dalamnya, maka style propertyPadding
itulah yang akan digunakan. -
Semua jenis properti yang berhubungan langsung dengan size memiliki mekanisme yang sama dengan
Padding Property
ini. -
Anda dapat mengukuran satuan
Unit
sepertiCss Unit
pada umumnya seperti: cm, mm, in, px, pt, pc, em, ex, ch, rem, vw, vh, vmin, vmax, %. -
Default properti
Padding
adalah semua sisi bernilai10
dengan satuan unitpx
. Anda bebas melakukan kustomisasi dengan semuadata-attribute
yang akan kami jabarkan di bawah ini.
<!-- Full Padding adalah padding yang berefek terhadap semua sisi -->
<button class="Ronimation" data-p="25">Hello, Damenjo</button> <!-- Memasukkan angka saja berarti menggunakan satuan unit (px) sebagai defaultnya -->
<button class="Ronimation" data-p="25px">Hello, Damenjo</button>
<button class="Ronimation" data-p="25em">Hello, Damenjo</button>
<!-- Padding X berpengaruh terhadap perubahan ukuran secara horizontal, sedangkan Padding Y berpengaruh terhadap perubahan ukuran secara vertikal -->
<button class="Ronimation" data-px="25" data-py="100cm">Hello, Damenjo</button>
<!-- Seharusnya anda sudah bisa menebaknya -->
<button class="Ronimation" data-pt="10" data-pr="25cm" data-pb="6em" data-pl="2px">Hello, Damenjo</button>
<button class="Ronimation" data-px="25" data-pt="5em" data-pb="10px">Hello, Damenjo</button>
<button class="Ronimation" data-py="10em" data-pr="20px" data-pl="30px">Hello, Damenjo</button>
<!-- Jika di dalam button terdapat data-px atau data-py, sedangkan data-p juga terdaftar di dalamnya, maka ukuran data-p yang akan dipakai -->
<button class="Ronimation" data-p="25px" data-px="60em" data-py="100cm">Hello, Damenjo</button>
<!-- Jika di dalam button terdapat data-pl, sedangkan data-px juga terdaftar di dalamnya, maka ukuran data-px yang akan di ambil -->
<button class="Ronimation" data-px="60em" data-pl="100em">Hello, Damenjo</button>
-
Jika anda memasukkan input aneh seperti huruf atau semacamnya di dalam
data-attribute
padding yang tersedia, maka besar ukuran akan mengambilsize default
: 10 px. -
Hal ini berlaku untuk properti-properti yang identik dengannya.