vueless/ui.text-notify/storybook/docs.mdx

Vue Styleless UI Component Library, powered by Tailwind CSS.

import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/addon-docs/blocks";
import { getSource } from "../../utils/storybook";

import * as stories from "./stories";
import defaultConfig from "../config?raw"

<Meta of={stories} />
<Title of={stories} />
<Subtitle of={stories} />
<Description of={stories} />
<Primary of={stories}  />
<Controls of={stories.Default} />
<Stories of={stories} />

## Default config
<Source code={getSource(defaultConfig)} language="jsx" dark />

## Triggering notification
You can trigger notification using `notify` method.
Use `notifySuccess`, `notifyWarning`, `notifyError` shortcut methods to trigger notification of a specific type.

<Source code={`
import {
    notify,
    notifySuccess,
    notifyWarning,
    notifyError,
} from "vueless";

notify({
    type: "success", // @values: success, warning, error
    label: "Hurray!",
    description: "The file successfully downloaded.",
    duration: 1000, // in milliseconds
    ignoreDuplicates: false // ignore notifications with the same 'description'
});

notifySuccess({ description: "The file successfully downloaded." });
notifyWarning({ description: "The file has been downloaded, but some data is missing." });
notifyError({ description: "The file can't be downloaded, please check the fields and try again." });
`} language="jsx" dark />

## Clear notifications
Use `clearNotifications` method to clear active notifications.

<Source code={`
import { clearNotifications, notifySuccess } from "vueless";

notifySuccess({ description: "The file successfully downloaded." });

// and somewhere below
clearNotifications();
`} language="jsx" dark />

## Delayed notifications
You can create a delayed notification which you can trigger any time later.

<Source code={`
import { setDelayedNotify, getDelayedNotify } from "vueless";

setDelayedNotify({
    type: "success", // @values: success, warning, error
    label: "Hurray!",
    description: "The file successfully downloaded.",
    duration: 1000, // in milliseconds
    ignoreDuplicates: false // ignore notifications with the same 'description'
});

// and somewhere below
getDelayedNotify();
`} language="jsx" dark />

## Align notification relatively to the layout
Use `positionClasses` in UNotify config to align a notification component related to layout.
* `page` – align UNotify inside an element with provided class (UNotifyPage is a default class name).
* `aside` – add shift for aside width (UNotifyAside is a default class name).

<Source code={`
{
  ...
  UNotify: {
    positionClasses: {
      page: "UNotifyPage",
      aside: "UNotifyAside",
    },
  }
}
`} language="jsx" dark />