@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
38 lines • 1.89 kB
TypeScript
import React from 'react';
import { DefaultProps, MantineNumberSize, MantineSize } from '../../theme';
import useStyles from './SegmentedControl.styles';
interface SegmentedControlItem {
value: string;
label: React.ReactNode;
}
export declare type SegmentedControlStylesNames = keyof ReturnType<typeof useStyles>;
export interface SegmentedControlProps extends DefaultProps<SegmentedControlStylesNames>, Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {
/** Data based on which controls are rendered */
data: SegmentedControlItem[];
/** Current selected value */
value?: string;
/** Called when value changes */
onChange?(value: string): void;
/** Name of the radio group, default to random id */
name?: string;
/** True if component should have 100% width */
fullWidth?: boolean;
/** Active control color from theme, defaults to white in light color scheme and theme.colors.dark[9] in dark */
color?: string;
/** Controls font-size, paddings and height */
size?: MantineSize;
/** Border-radius from theme or number to set border-radius in px */
radius?: MantineNumberSize;
/** Transition duration in ms, set to 0 to turn off transitions */
transitionDuration?: number;
/** Transition timing function for all transitions, defaults to theme.transitionTimingFunction */
transitionTimingFunction?: string;
/** Default value for uncontrolled component */
defaultValue?: string;
}
export declare function SegmentedControl({ className, style, themeOverride, data, name, value, onChange, color, fullWidth, radius, size, transitionDuration, transitionTimingFunction, classNames, styles, defaultValue, ...others }: SegmentedControlProps): JSX.Element;
export declare namespace SegmentedControl {
var displayName: string;
}
export {};
//# sourceMappingURL=SegmentedControl.d.ts.map