42 lines
1.2 KiB
TypeScript
Executable File
42 lines
1.2 KiB
TypeScript
Executable File
import { Card, Flex, Typography } from 'antd';
|
|
import { useState } from 'react';
|
|
import type { SampleMeta } from '../../../../../widgets/core';
|
|
import { MultiInputUI } from '../MultiInputUI';
|
|
|
|
const { Paragraph, Text } = Typography;
|
|
|
|
export const sampleMeta: SampleMeta = {
|
|
id: 'multi-input',
|
|
componentId: 'multi-input',
|
|
title: 'Multi Input',
|
|
description: '3자리 / 4자리 / 4자리 입력을 조합하는 기본형 multi input 샘플입니다.',
|
|
category: 'Inputs',
|
|
kind: 'feature',
|
|
variantLabel: 'Showcase',
|
|
order: 30,
|
|
features: ['docs'],
|
|
};
|
|
|
|
export function Sample() {
|
|
const [value, setValue] = useState('01012345678');
|
|
|
|
return (
|
|
<Card title="Multi Input Sample" extra={<Text code>samples/Sample.tsx</Text>}>
|
|
<Paragraph>
|
|
값을 <Text strong>3자리 / 4자리 / 4자리</Text> 입력으로 나누어 조합합니다.
|
|
</Paragraph>
|
|
|
|
<Flex vertical gap="small">
|
|
<MultiInputUI
|
|
value={value}
|
|
onChange={(event) => {
|
|
setValue(event.target.value);
|
|
}}
|
|
/>
|
|
<Text>확정 값: {value}</Text>
|
|
<Text type="secondary">각 칸은 정해진 자리수일 때만 확정되고 다음 칸으로 이동합니다.</Text>
|
|
</Flex>
|
|
</Card>
|
|
);
|
|
}
|