UNPKG

gd-bs

Version:

Bootstrap JavaScript, TypeScript and Web Components library.

79 lines (73 loc) 2.1 kB
/** * <div id="demo"></div> * <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gd-sprest-bs/5.0.3/gd-sprest-bs.min.js"></script> * <script type="text/javascript"> * // Wait for the window to be loaded * window.addEventListener("load", function() { * // Render the progressGroup * $REST.Components.ProgressGroup({ * el: document.querySelector("#demo"), * progressbars: [ * { * size: 25, * isStriped: true, * label: "25%" * }, * { * size: 50, * isAnimated: true, * isStriped: true, * label: "50%" * } * ] * }); * }); * </script> */ /** * ### Progress Group * * ```ts * import { Components } from "gd-sprest-bs"; * * // Create the progress group * let el = document.querySelector("#progressGroup"); * let progressGroup = Components.ProgressGroup({ * el: el, * progressbars: [ * { * size: 25, * isStriped: true, * label: "25%" * }, * { * size: 50, * isAnimated: true, * isStriped: true, * label: "50%" * } * ] * }); * ``` */ export const ProgressGroup: (props: IProgressGroupProps, template?: string, progressTemplate?: string) => IProgressGroup; import { IBaseProps } from "../types"; import { IProgressProps } from "../progress/types"; /** * Progress Group */ export interface IProgressGroup { /** The element. */ el: HTMLElement; /** Hides the progress group. */ hide: () => void; /** Shows the progress group. */ show: () => void; } /** * Progress Group Properties */ export interface IProgressGroupProps extends IBaseProps<IProgressGroup> { isMultiple?: boolean; progressbars?: Array<IProgressProps>; }