mithril-materialized/dist/option.d.ts

A materialize library for mithril.

import { Vnode, FactoryComponent, Attributes, Component } from 'mithril';
export interface InputCheckboxAttrs extends Attributes {
    /** Optional event handler when a checkbox is clicked */
    onchange?: (checked: boolean) => void;
    /** Label of the checkbox, can be a string or Vnode */
    label?: string | Vnode<any, any>;
    /** If true, the checkbox is checked */
    checked?: boolean;
    /** If true, the checkbox is disabled */
    disabled?: boolean;
    /** Optional input id for the checkbox */
    inputId?: string;
}
/** Component to show a check box */
export declare const InputCheckbox: FactoryComponent<InputCheckboxAttrs>;
export interface InputOption<T extends string | number> {
    /** Option ID */
    id: T;
    /** Displayed label */
    label: string;
    /** Optional title, often used to display a tooltip - will only work when choosing browser-defaults */
    title?: string;
    /** Is the option disabled? */
    disabled?: boolean;
    /** Select image */
    img?: string;
    /** Select group label */
    group?: string;
    /** Optional class name */
    className?: string;
    /** Optional description */
    description?: string;
}
export interface OptionsAttrs<T extends string | number> extends Attributes {
    /** Element ID */
    id?: string;
    /** Optional title or label */
    label?: string;
    /** The options that you have */
    options: InputOption<T>[];
    /** Event handler that is called when an option is changed */
    onchange?: (checkedIds: T[]) => void;
    /** Currently selected ids. This property controls the component state and should be updated externally to change selection programmatically. */
    checkedId?: T | T[];
    /** Optional description */
    description?: string;
    /** Optional CSS that is added to the input checkbox, e.g. if you add col s4, the items will be put inline */
    checkboxClass?: string;
    /** If true, start on a new row */
    newRow?: boolean;
    /** If true, add a mandatory '*' after the label */
    isMandatory?: boolean;
    /** If true, disable the options. */
    disabled?: boolean;
    /** Layout for the options: 'vertical' (default) or 'horizontal' */
    layout?: 'vertical' | 'horizontal';
    /** If true, show select all/none buttons */
    showSelectAll?: boolean;
    /** Text for select all button */
    selectAllText?: string;
    /** Text for select none button */
    selectNoneText?: string;
}
/** Reusable layout component for rendering options horizontally or vertically */
export declare const OptionsList: Component<{
    options: Array<{
        component: any;
        props: any;
        key: string | number;
    }>;
    layout: 'vertical' | 'horizontal';
}>;
/** A list of checkboxes */
export declare const Options: <T extends string | number>() => Component<OptionsAttrs<T>>;