Skip to content
On this page

Drawer

Informs users while preserving the current page state.

API

ts
import {drawer} from '@akrc/ringo';
import '@akrc/ringo/style/drawer/ant.css';

drawer({
    title: 'Test',
    content: lorem,
    primaryButton: {
        text: 'Primary',
        onClick: () => {},
        close: true,
    },
    secondaryButton: {
        text: 'Secondary',
        onClick: (close) => {
            if (1 === 1) close();
        },
    },
});
ts
export interface DrawerProperties {
    width?: number;
    zIndex?: number;
    withBackdrop?: boolean;
    position?: 'left' | 'right';
    transitionDuration?: number;
    title?: string;
    showClose?: boolean;
    onClose?(): void;
    content?: string;
    buttons: Button[];
    clickBackdropClose?: boolean;
    model?: typeof DrawerModel;
}

export type Button = {
    text: string;
    onClick?: (closeFunction: () => void) => any;
    close?: boolean;
    primary?: boolean;
    type?: 'info' | 'warning' | 'error' | 'success';
};