نان تست بوت استرپ اسنک بار

نان تست بوت استرپ

اولیه

<button id="toast-btn" class="btn btn-primary">بازکردن تست</button>

<!-- Toast Element -->

<div style="position: absolute; top: 0; right: 22px;left: 22px;z-index: 9999;">
    <div class="toast toast-primary fade hide" role="alert" data-delay="6000" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="mr-auto">Bootstrap</strong>
            <small class="meta-time">just now</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="toast-body">
            لورم ایپسوم متن ساختگی با تولید
        </div>
    </div>
</div>

// Get the Toast button
var toastButton = document.getElementById("toast-btn");
// Get the Toast element
var toastElement = document.getElementsByClassName("toast")[0];

toastButton.onclick = function() {
    $('.toast').toast('show');
}

اسنک بار

اولیه

<button class="btn btn-primary default">Default</button>

$('.default').click(function() {
   Snackbar.show({text: 'Example notification text.', duration: 100000});
});

بالا سمت چپ 

<button class="btn btn-success top-left">Top چپ</button>

$('.top-left').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'top-left'
    });
});

بالا وسط

<button class="btn btn-info top-center">بالا وسط</button>

$('.top-center').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'top-center'
    });
});

بالا راست

<button class="btn btn-danger top-right">Top Right</button>

$('.top-right').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'top-right'
    });
});

پایین چپ

<button class="btn btn-warning bottom-left">Bottom چپ</button>

$('.bottom-left').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'bottom-left'
    });
});

پایین وسط

<button class="btn btn-secondary bottom-center">پایین وسط</button>

$('.bottom-center').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'bottom-center'
    });
});

پایین راست

<button class="btn btn-dark bottom-right">پایین راست</button>

$('.bottom-right').click(function() {
    Snackbar.show({
        text: 'Example notification text.',
        pos: 'bottom-right'
    });
});

بدون عمل

<button class="btn btn-default no-action">بدون عمل</button>

$('.no-action').click(function() {
    Snackbar.show({
        showAction: false
    });
});

عمل متن 

<button class="btn btn-button-2 action-text">Action Text</button>

$('.action-text').click(function() {
    Snackbar.show({
        actionText: 'Thanks!'
    });
});

رنگ متن

<button class="btn btn-button-3 text-color">Text Color</button>

$('.text-color').click(function() {
    Snackbar.show({
        actionTextColor: '#e2a03f',
    });
});

بر روی پاسخگویی کلیک کنید 

<button class="btn btn-button-4 click-callback">Click Callback</button>

$('.click-callback').click(function() {
    Snackbar.show({
        text: 'Custom callback when action button is clicked.',
        width: 'auto',
        onActionClick: function(element) {
            //Set opacity of element to 0 to close Snackbar 
            $(element).css('opacity', 0);
            Snackbar.show({
                text: 'Thanks for clicking the  Dismiss  button!',
                showActionButton: false
            });
        }
    });
});

مدت زمان

<button class="btn btn-button-5 duration">Duration</button>

$('.duration').click(function() {
    Snackbar.show({
        text: 'Duration set to 5s',
        duration: 5000,
    });
});

Background Color

============= 
   اولیه
=============

<button class="btn btn-primary snackbar-bg-primary">اولیه</button>

$('.snackbar-bg-primary').click(function() {
    Snackbar.show({
        text: 'Primary',
        actionTextColor: '#fff',
        backgroundColor: '#1b55e2'
    });
});

============= 
   اطلاعات
=============

<button class="btn btn-info snackbar-bg-info">اطلاعات</button>

$('.snackbar-bg-info').click(function() {
    Snackbar.show({
        text: 'Info',
        actionTextColor: '#fff',
        backgroundColor: '#2196f3'
    });
});

============= 
  موفقیت
=============

<button class="btn btn-success snackbar-bg-success">موفقیت</button>

$('.snackbar-bg-success').click(function() {
    Snackbar.show({
        text: 'Success',
        actionTextColor: '#fff',
        backgroundColor: '#8dbf42'
    });
});

============= 
  خطا
=============

<button class="btn btn-warning snackbar-bg-warning">خطا</button>

$('.snackbar-bg-warning').click(function() {
    Snackbar.show({
        text: 'Warning',
        actionTextColor: '#fff',
        backgroundColor: '#e2a03f'
    });
});

============= 
  خطر
=============

<button class="btn btn-danger snackbar-bg-danger">خطر</button>

$('.snackbar-bg-danger').click(function() {
    Snackbar.show({
        text: 'Danger',
        actionTextColor: '#fff',
        backgroundColor: '#e7515a'
    });
});

============= 
  تاریک
=============

<button class="btn btn-dark snackbar-bg-dark">دارک</button>

$('.snackbar-bg-dark').click(function() {
    Snackbar.show({
        text: 'Dark',
        actionTextColor: '#fff',
        backgroundColor: '#3b3f5c'
    });
});

© کپی رایت

بومی سازی شده توسط : طراح سفید