Media slot

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

MediaSlot

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

MediaSlot

MediaSlot 속성
Prop	Type	필수 여부
`aria-label` Defines a string value that labels the current element.	`string`	필수
`onClick`	`MouseEventHandler<HTMLButtonElement>`	선택
`shape`	`'round' \| 'square'`	선택
`size`	`'lg' \| 'md' \| 'sm'`	선택
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	조건부
`disabled`	`boolean`	조건부
`errorMessage`	`string`	조건부
`state`	`"empty" \| "filled" \| "error" \| "uploading"`	조건부
`uploadLabel`	`string`	조건부
`onRemove`	`MouseEventHandler<HTMLButtonElement>`	조건부
`removeLabel`	`string`	조건부

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ButtonHTMLAttributes, type MouseEventHandler, type ReactElement } from 'react';

export type MediaSlotShape = 'round' | 'square';

export type MediaSlotSize = 'lg' | 'md' | 'sm';

export type MediaSlotState = 'empty' | 'error' | 'filled' | 'uploading';

type MediaSlotBaseProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled' | 'onClick' | 'size' | 'type'> & {
    'aria-label': string;
    onClick?: MouseEventHandler<HTMLButtonElement>;
    shape?: MediaSlotShape;
    size?: MediaSlotSize;
};

type RemoveProps = {
    onRemove: MouseEventHandler<HTMLButtonElement>;
    removeLabel: string;
} | {
    onRemove?: never;
    removeLabel?: never;
};

export type MediaSlotProps = MediaSlotBaseProps & (({
    children?: never;
    disabled?: boolean;
    errorMessage?: never;
    state?: 'empty';
    uploadLabel?: never;
} & {
    onRemove?: never;
    removeLabel?: never;
}) | ({
    children: ReactElement;
    disabled?: boolean;
    errorMessage?: never;
    state: 'filled';
    uploadLabel?: never;
} & RemoveProps) | ({
    children?: never;
    disabled?: never;
    errorMessage: string;
    state: 'error';
    uploadLabel?: never;
} & RemoveProps) | {
    children?: never;
    disabled?: never;
    errorMessage?: never;
    onRemove?: never;
    removeLabel?: never;
    state: 'uploading';
    uploadLabel: string;
});

export declare const MediaSlot: import("react").ForwardRefExoticComponent<MediaSlotProps & import("react").RefAttributes<HTMLButtonElement>>;