دکمه های ریسپانیو و متنوع

این دکمه ها به همراه انیمیشن هستند و شما می‌توانید از آنها به عنوان دکمه های CTA استفاده کنید. این دکمه ها نیز به همراه رنگ بندی و استایل های متفاوت موجود هستند.

المان ها و ظاهر بندی

در اینجا می‌توانید کدهای HTML مربوط به المان ها را ببینید و آنها را با استفاده از CSS شخصی سازی کنید. با این حال، ممکن است برخی از این عناصر در داشبورد استفاده شده باشند اما در مستندات وجود نداشته باشند، ممکن است به دلایل مشخص موجود نباشند، برای مثال ممکن است به طور موقت از دسترس خارج شده باشند و یا توصیه می‌شود که از آنها استفاده نکنید. درصورت نیاز با صلاحدید خودتان می‌توانید با مراجعه به منابع موجود از آن المان ها استفاده کنید و کد های آنها را استخراج کنید.

دکمه معمولی

این استایل معمولا برای لینک ها و دکمه های call to action یا همان CTA استفاده می‌شوند.

<button class="btn">روی من کلیک کن!</button>

دکمه متنی

دکمه های متنی دکمه های ثانویه هستند، از آنها معمولا برای دکمه های «لغو عملیات» و لینک ها استفاده می‌شود.

<button class="btn btn-text">روی من کلیک کن!</button>

دکمه متنی با پس زمینه کمرنگ

درصورتی که می‌خواهید از چند دکمه در یک خط استفاده کنید می‌توانید از این دکمه به عنوان یک دکمه کم اهمیت تر استفاده کنید.

<button class="btn btn-text --low">روی من کلیک کن!</button>

دکمه های رنگی

دکمه های رنگی برای تفکیک عملیات های مختلف استفاده می‌شوند، مثل دکمه های «حذف»، «افزودن آیتم» و دکمه های «اطلاعات بیشتر».

<button class="btn --red">قرمز</button>
<button class="btn --green">سبز</button>
<button class="btn --blue">آبی</button>
<button class="btn --orange">نارنجی</button>

دکمه های حاوی متن رنگی

این دکمه ها نسبت به دکمه های رنگی توجه کمتری جلب می‌کنند. از آنها معمولا در دکمه های call to action و دکمه های ثانویه استفاده می‌شود.

<button class="btn btn-text --red">قرمز</button>
<button class="btn btn-text --green">سبز</button>
<button class="btn btn-text --blue">آبی</button>
<button class="btn btn-text --orange">نارنجی</button>

عملیات ها و اسکریپت ها

این المان ها می‌توانند با استفاده از JavaScript و یا jQuery مدیریت شوند. در ادامه راهنما ها و نکاتی که لازم است در این باره بدانید توضیح داده خواهد شد.

فعالسازی و غیرفعال سازی دکمه ها

پس از اینکه کاربر روی یک دکمه کلیک می‌کند، ممکن است اجرای درخواست کاربر مدتی طول بکشد، برای جلوگیری اجرای مجدد درخواست با کلیک بر روی آن دکمه، می‌توانید هنگام اجرای درخواست آن را به این صورت غیرفعال کنید:

let $button = $("#button");

$button.setWaiting(true); // Disable button (waiting mode on)
$button.setWaiting(); // Disable button
$button.setWaiting(false); // Enable button (waiting mode off)

تغییر وضعیت و متن دکمه

برای تجربه کاربری بهتر، ممکن است نیاز داشته باشید متن دکمه را هنگام غیرفعال کردن آن تغییر دهید. این کار می‌تواند به کاربر کمک کند تا به طور کامل متوجه شود که در حال حاضر چه اتفاقی می‌افتد. در ادامه یک مثال نوشته شده است:

let $button = $("#button");

$button.click(function(){

    // Disable button and set the text to a custom string:
    $button.waitHold("Please wait...");

    // ...
    // Save settings
    // ...

    // Enable button and set the text back to normal after settings saved:
    $button.waitRelease();

});

دوبار کلیک کردن

این تابع در هسته این افزونه وجود دارد، اجازه می‌دهد کلیک‌های دوتایی را بر روی یک عنصر مانند دکمه مدیریت کنید. توصیه می‌شود این رویداد را در دستگاه‌های تلفن همراه استفاده کنید، هم در موبایل و هم در دسکتاپ کار می‌کند.

let $button = $("#button");

$button.onDoubleClick(function(){
    // Do something
});

کلیک طولانی

این تابع مشابه تابع قبل است با این که این تابع زمانی کار می‌کند که کاربر روی یک دکمه کلیک و نگه دارد. این تابع در هر دو مرورگر های موبایل و دسکتاپ کار می‌کند.

let $btn_1 = $("#button-1");
let $btn_2 = $("#button-2");

// Long click for 0.5 second (500ms)
$btn_1.onLongClick(function(){
    // Do something
}, 500);

// Long click for 2 seconds (2000ms)
$btn_2.onLongClick(function(){
    // Do something
}, 2000);