@blueprintjs/core/lib/esm/components/section/section.d.ts

Core styles & components

import * as React from "react";
import { IconName } from "@blueprintjs/icons";
import { Elevation } from "../../common";
import { HTMLDivProps, MaybeElement, Props } from "../../common/props";
import { CollapseProps } from "../collapse/collapse";
/**
 * Subset of {@link Elevation} options which are visually supported by the {@link Section} component.
 *
 * Note that an elevation greater than 1 creates too much visual clutter/noise in the UI, especially when
 * multiple Sections are shown on a single page.
 */
export type SectionElevation = typeof Elevation.ZERO | typeof Elevation.ONE;
export interface SectionCollapseProps extends Pick<CollapseProps, "className" | "isOpen" | "keepChildrenMounted" | "transitionDuration"> {
    /**
     * Whether the component is initially open or closed.
     *
     * This prop has no effect if `collapsible={false}` or the component is in controlled mode,
     * i.e. when `isOpen` is **not** `undefined`.
     *
     * @default true
     */
    defaultIsOpen?: boolean;
    /**
     * Whether the component is open or closed.
     *
     * Passing a boolean value to `isOpen` will enabled controlled mode for the component.
     */
    isOpen?: boolean;
    /**
     * Callback invoked in controlled mode when the collapse toggle element is clicked.
     */
    onToggle?: () => void;
}
export interface SectionProps extends Props, Omit<HTMLDivProps, "title">, React.RefAttributes<HTMLDivElement> {
    /**
     * Whether this section's contents should be collapsible.
     *
     * @default false
     */
    collapsible?: boolean;
    /**
     * Subset of props to forward to the underlying {@link Collapse} component, with the addition of a
     * `defaultIsOpen` option which sets the default open state of the component when in uncontrolled mode.
     */
    collapseProps?: SectionCollapseProps;
    /**
     * Whether this section should use compact styles.
     *
     * @default false
     */
    compact?: boolean;
    /**
     * Visual elevation of this container element.
     *
     * @default Elevation.ZERO
     */
    elevation?: SectionElevation;
    /**
     * Name of a Blueprint UI icon (or an icon element) to render in the section's header.
     * Note that the header will only be rendered if `title` is provided.
     */
    icon?: IconName | MaybeElement;
    /**
     * Element to render on the right side of the section header.
     * Note that the header will only be rendered if `title` is provided.
     */
    rightElement?: JSX.Element;
    /**
     * Sub-title of the section.
     * Note that the header will only be rendered if `title` is provided.
     */
    subtitle?: JSX.Element | string;
    /**
     * Title of the section.
     * Note that the header will only be rendered if `title` is provided.
     */
    title?: JSX.Element | string;
}
/**
 * Section component.
 *
 * @see https://blueprintjs.com/docs/#core/components/section
 */
export declare const Section: React.FC<SectionProps>;