실행 미리 보기

실시간

수명 주기 배지

행과 메타데이터에 사용하는 간결한 상태 표시입니다.

NxStatusBadge

활성대기 중실패

지속 알림

심각도를 명시하는 페이지 수준 피드백입니다.

NxAlert

연동 오프라인

연결이 복구될 때까지 새 레코드를 대기열에 보관합니다.

누락된 참조

App 소유 생성 액션으로 복구할 수 있는 선행 조건입니다.

NxMissingRequiredReferencesAlert

필수 참조 데이터가 없습니다

사업장

로딩 자리 표시자

조회 중 콘텐츠 형태를 유지하는 진행 상태입니다.

NxLoadingBlock

모달 확인

다른 상태와 합치지 않고 액션으로 여는 대화상자입니다.

NxModalDialog

복사 가능한 소스

코드 예시

TSX

import { useState } from "react";

import {
    NxAlert,
    NxButton,
    NxLoadingBlock,
    NxMissingRequiredReferencesAlert,
    NxModalDialog,
    NxStatusBadge,
} from "@nexia/sdk/host";

export function StatusAndFeedbackExample() {
    const [dialogOpen, setDialogOpen] = useState(false);

    return (
        <div className="grid gap-6">
            <div className="flex flex-wrap gap-2">
                <NxStatusBadge variant="success">Active</NxStatusBadge>
                <NxStatusBadge variant="warning">Pending</NxStatusBadge>
                <NxStatusBadge variant="error">Failed</NxStatusBadge>
            </div>
            <NxAlert variant="warning" title="Integration offline">
                New records will be queued until the connection returns.
            </NxAlert>
            <NxMissingRequiredReferencesAlert
                title="Required reference data is missing"
                items={[
                    {
                        key: "plant",
                        label: "Plant",
                        createLabel: "Create plant",
                        onCreate: () => undefined,
                    },
                ]}
            />
            <NxLoadingBlock shape="text" lines={3} label="Loading records" />
            <NxButton variant="secondary" onClick={() => setDialogOpen(true)}>
                Open dialog
            </NxButton>
            <NxModalDialog
                open={dialogOpen}
                onClose={() => setDialogOpen(false)}
                title="Archive record"
                description="The record remains available in history."
                footer={
                    <NxButton onClick={() => setDialogOpen(false)}>
                        Confirm
                    </NxButton>
                }
            >
                Review the record before continuing.
            </NxModalDialog>
        </div>
    );
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455