website/plasma-web-docs/docs/components/Dropzone.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/Dropzone.mdx

57 строк1 KB

TitanKuzmich

docs: add Dropzone docs

26 ноя 2024, 14:45

26 ноя 2024, 14:45148bdd7

---
id: dropzone
title: Dropzone
---

import { PropsTable, Description } from '@site/src/components';

<Description name="Dropzone" />
<PropsTable name="Dropzone"  exclude={['css']} />

# Dropzone
Компонент для загрузки файлов, без отображения индикации загрузки. 
Компонент не предполагает наличия валиации, так как является частью Upload. 
Но валидацию можно задать с помощью callback `validator`.

# Пример

```tsx live
import React from 'react';
import { Dropzone } from '@salutejs/plasma-web';

export function App() {
    const onDragEnter = () => {
        console.log("onDragEnter")
    }

    const onDragLeave = () => {
        console.log("onDragLeave")
    }

    const onDrop = () => {
        console.log("onDrop")
    }

    const onChange = () => {
        console.log("onChange")
    }

    const onChoseFiles = () => {
        console.log("onChoseFiles")
    }

    return (
        <Dropzone
            iconPlacement="top"
            width="240"
            title="Click to upload"
            description="or drag and drop files here"
            onDragEnter={onDragEnter}
            onDragLeave={onDragLeave}
            onDrop={onDrop}
            onChange={onChange}
            onChoseFiles={onChoseFiles}
        />
    );
}
```