@gitlab/ui/dist/components/base/toast/toast.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# Toast\n\n<!-- STORY -->\n\n## Usage\n\nToasts are used to display system messages. The messages are short and straightforward. It may contain a dismiss button, and an action button depending on the situation.\n\n**Using the plugin**\n\nIn order to use the plugin, it needs to be included in your application with `Vue.use`.\n\n```js\n// myApp.js\n\nimport { GlToast } from '@gitlab/ui';\n\n// Note, this has to be done before `Vue.new()`\nVue.use(GlToast);\n```\n\nOnce included in your application, the toast plugin is globally available.\n\n```js\n// myComponent.vue\n\nthis.$toast.show('Hello GitLab!');\n```\n\nBelow is an example with options\n\n```js\n// myComponent.vue\n\nthis.$toast.show('This is a toast with an option.', {\n  action: {\n      text: 'Undo',\n      onClick: () => { ... },\n    },\n});\n```\n\n### Options\n\nBelow are the options you can pass to create a toast\n\n| **Option**     | **Type**       | **Default**       | **Description**                                                                                                                  |\n| -------------- | -------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |\n| position       | String         | 'bottom-left'     | Position of the toast container <br> **['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']** |\n| duration       | Number         | 5000              | Display time of the toast in millisecond                                                                                         |\n| action         | Object         | close             | Add single actions to toast                                                                   |\n| fullWidth      | Boolean        | false             | Enable Full Width                                                                                                                |\n| fitToScreen    | Boolean        | false             | Fits to Screen on Full Width                                                                                                     |\n| className      | String, Array  | 'gl-toast'        | Custom css class name of the toast                                                                                               |\n| containerClass | String, Array  | null              | Custom css classes for toast container                                                                                           |\n| iconPack       | String         | 'custom-class'    | Icon pack type to be used <br> **['material', 'fontawesome', 'mdi', 'custom-class', 'callback']**                                |\n| Icon           | String, Object | null              | Material icon name as string                                                                      |\n| type           | String         | 'default'         | Type of the Toast **['success', 'info', 'error']**                                                                               |\n| theme          | String         | 'toasted-primary' | Theme of the toast you prefer<br> **['toasted-primary', 'outline', 'bubble']**                                                   |\n| onComplete     | Function       | null              | Trigger when toast is completed                                                                                                  |\n| closeOnSwipe   | Boolean        | true              | Closes the toast when the user swipes it                                                                                         |\n| keepOnHover    | Boolean        | true              | Prevents toast from closing on hover                                                                                             |\n| singleton      | Boolean        | true              | Only allows one toast at a time                                                                                                 |\n\n## Under the hood\n\nToast uses [`vue-toasted`] internally. So please take a look at their extensive documentation for more information.\n\n[`vue-toasted`]: https://github.com/shakee93/vue-toasted\n";

var toast_documentation = {
  followsDesignSystem: true,
  description: description,
  examples: examples
};

export default toast_documentation;