vueless/ui.loader-overlay/storybook/docs.mdx

Vue Styleless UI Component Library, powered by Tailwind CSS.

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

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

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

## Using loader
To control the loader state in Vue components use `useLoaderOverlay` composable.

<Source code={`
import { useLoaderOverlay } from "vueless";

const { isLoading, loaderOverlayOn, loaderOverlayOff } = useLoaderOverlay();

// get loader state
console.log(isLoading.value);

// show loader
loaderOverlayOn();

// hide loader
loaderOverlayOff();
`} language="jsx" dark />

## Using loader outside Vue components
To control the loader state outside Vue components, use the following methods.

<Source code={`
import { loaderOverlayOn, loaderOverlayOff } from "vueless";

// show loader
loaderOverlayOn();

// hide loader
loaderOverlayOff();
`} language="jsx" dark />

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