nutui/src/packages/__VUE/toast/doc.en-US.md

Toast

Intro

for light tips.

Install

import { createApp } from 'vue';
import { Toast } from '@nutui/nutui';

const app = createApp();
app.use(Toast);

Usage

Global Usage

:::demo

<template>
</template>
<script>
import { getCurrentInstance } from 'vue';
export default {
  setup() {
   const { proxy } = getCurrentInstance();
    proxy.$toast.text('global usage');
    return {};
  }
}
</script>

:::

Text

:::demo

<template>
  <nut-cell title="Text" is-link @click="textToast('text message~')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.text(msg);
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Title

:::demo

<template>
  <nut-cell title="Toast Title" is-link @click="textToast('title message~')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.text(msg, {
        title: 'title'
      });
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Success

:::demo

<template>
  <nut-cell title="Toast Success" is-link @click="textToast('Success')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
       Toast.success(msg);
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Fail

:::demo

<template>
  <nut-cell title="Toast Fail" is-link @click="textToast('Fail')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.fail(msg);
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Warn

:::demo

<template>
  <nut-cell title="Toast Warn" is-link @click="textToast('Warn')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.warn(msg);
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Loading

:::demo

<template>
  <nut-cell title="Toast Loading" is-link @click="textToast('Loading')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.loading(msg);
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Not Disappear

:::demo

<template>
  <nut-cell title="Toast Not Disappear" is-link @click="textToast('Toast Not Disappear')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
     Toast.text(msg, {
        duration: 0
      });
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Custom Bottom Height

:::demo

<template>
  <nut-cell title="Custom Bottom Height" is-link @click="textToast('Custom Bottom Height')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
      Toast.text(msg, {
        center: false,
        bottom: '10%'
      });
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Loading with transparent cover

:::demo

<template>
  <nut-cell title="Loading with transparent cover" is-link @click="textToast('Loading')"></nut-cell>
</template>
<script>
import { Toast } from '@nutui/nutui';
export default {
  setup() {
     const textToast = (msg) => {
       Toast.loading(msg, {
        cover: true
      });
    };
    return {
      textToast,
    };
  }
}
</script>

:::

Support import and use in JS modules

import { Toast } from "@nutui/nutui";
Toast.text('use in js module');
// Return the instance, you can manually call the hide method in the instance to close the prompt
const toast = Toast.loading('use in js module');
toast.hide();

API

Methods	Description	Attribute	Return value
Toast.text	Show text toast	message｜ options	toast instance(message support incoming HTML)
Toast.success	Show success toast	message｜ options	toast instance
Toast.fail	Show fail toast	message｜ options	toast instance
Toast.warn	Show warn toast	message｜ options	toast instance
Toast.hide	Close toast	clearAll: boolean	void
Toast.loading	Show loading toast	message｜ options	toast instance

Options

字段	说明	类型	默认值
id	Identifier, share one instance at the same time, default to multiple instances	String/Number	-
duration	Toast duration(ms), won't disappear if value is 0	Number	2000
title	title	String	-
center	Whether to display in the middle of the page (display at the bottom when false)	Boolean	true
bottom	The distance from the bottom of the page (px or %), which takes effect when option.center is false	String	30px
textAlignCenter	Whether the multi-line copy is centered	Boolean	true
bgColor	background color (transparency)	String	rgba(0, 0, 0, 0.8)
customClass	Custom Class	String	-
icon	Custom Icon	String	-
iconSize	Custom iconSize	String	20
size	Text Size small/base/large	String	base
cover	Whether to show the mask layer	Boolean	false
cover-color	Cover Color	String	rgba(0,0,0,0)
loadingRotate	Whether the loading icon is rotated, only valid for the loading type	Boolean	true
close	Callback function after close	function	null
close-on-click-overlay	Whether to close when overlay is clicked	Boolean	false
custom-class	Custom Class	String	-