FUI Toast JS

Version v1.0.0

View on Github View on Website

Hot by default

Dễ sử dụng

Có thể truy cập

Hỗ trợ biểu tượng cảm xúc

Có thể tùy chỉnh

Promise API

Không chiếm nhiều dung lượng

Tạm dừng khi di chuột

Headless Hooks

Cài Đặt

Thêm FuiToastJs vào trang HTML bằng phương pháp truyền thống

- Để bắt đầu sử dụng FuiToastJs, hãy thêm CSS sau vào trang của bạn.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/lelinh014756/fui-toast-js@master/assets/css/toast@1.0.1/fuiToast.min.css">

- Thêm file JS trước thẻ đóng body

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/lelinh014756/fui-toast-js@master/assets/js/toast@1.0.1/fuiToast.min.js"></script>

- Thêm <div id="fui-toast"></div> vào trong body. Hãy chắc chắn rằng nó được đặt ở trên cùng

<body>
  <div id="fui-toast"></div>
</body>

Demo

Success Toast

FuiToast.success('Success toast message.')

Error Toast

FuiToast.error("Error toast message.")

Info Toast

FuiToast.info('Info toast message.')

Warning Toast

FuiToast.warning("Warning toast message.")

Promise Toast

FuiToast.promise(
      resPromise,
      {
        loading: 'Pending...',
        success: (data) => {
          console.log(data);
          return 'Toast promise completed!';
        },
        error: 'Toast promise error!',
      },
      {
        isClose: true
      }
    );

Multi Line Toast

FuiToast(
      "This toast is super big. I don't think anyone could eat it in one bite.

       It's larger than you expected. You eat it but it does not seem to get smaller.",
      {
        duration: 6000,
      }
    );

Dark Mode

FuiToast("Dark Mode Toast.", {
      className: 'dark-mode'
    })

Custom Icon

FuiToast("Custom Icon Toast.", {
      icon: `😍`
    })

Add ClassName

FuiToast("Add className Toast.", {
      className: 'class-custom'
    })

Add Title

FuiToast("Add title Toast.", {
      title: 'Toast title'
    })

Add button close

FuiToast("Add button close.", {
      isClose: true
    })

Custom style

FuiToast("Toast custom style.", {
      style: {
        backgroundColor: '#ecfeff',
        border: '1px solid #67e8f9',
      },
    })

Custom Duration Toast

// number (ms)
    FuiToast("Custom Duration Toast.", {
      duration: 4000
    })
    
// Infinity 
    FuiToast("Custom Duration Toast.", {
      duration: Infinity
    })

Thay đổi vị trí

toast.config({
            position: 'top-right'
          })

Cấu hình