|
- import {NextPage} from 'next';
- import {DefaultLayout} from '@/components/DefaultLayout';
- import {Section, Subsection} from '@/components/Section';
- import * as TesseractBlob from '@tesseract-design/web-blob-react';
-
- const BlobPage: NextPage = () => {
- return (
- <DefaultLayout title="Blob">
- <Section title="FileSelectBox">
- <Subsection title="Default">
- <TesseractBlob.FileSelectBox
- label="File"
- name="file"
- border
- placeholder="Select a file"
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
- />
- </Subsection>
- <Subsection title="Default Multiple">
- <TesseractBlob.FileSelectBox
- label="File"
- name="file"
- border
- multiple
- placeholder="Select a file"
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
- />
- </Subsection>
- <Subsection title="Enhanced">
- <TesseractBlob.FileSelectBox
- label="File"
- name="file"
- border
- enhanced
- placeholder="Select a file"
- style={{
- height: 256,
- }}
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
- />
- </Subsection>
- <Subsection title="Enhanced Multiple">
- <TesseractBlob.FileSelectBox
- label="File"
- name="file"
- border
- enhanced
- placeholder="Select a file"
- multiple
- style={{
- height: 256,
- }}
- onChange={(e) => { console.log('change', e.currentTarget.name, e.currentTarget, e.currentTarget.files)}}
- />
- </Subsection>
- </Section>
- </DefaultLayout>
- )
- }
-
- export default BlobPage;
|