Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(Sheet): update README #1522

Merged
merged 6 commits into from
Apr 18, 2024
Merged

chore(Sheet): update README #1522

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8c09348
chore(Sheet): update readme for landing
mournfulCoroner Apr 17, 2024
7c4313e
fix: description
mournfulCoroner Apr 18, 2024
b208e9d
fix: properties table
mournfulCoroner Apr 18, 2024
491bec8
fix: description
mournfulCoroner Apr 18, 2024
595fbda
fix: example in usage
mournfulCoroner Apr 18, 2024
59b7f05
Merge branch 'main' into chore-update-sheet-landing-readme
mournfulCoroner Apr 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 45 additions & 15 deletions src/components/Sheet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,50 @@
<!--GITHUB_BLOCK-->

# Sheet

Sheet component for mobile devices

## PropTypes

| Name | Type | Required | Default | Description |
| :----------------------- | :--------- | :------: | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | `boolean` | ✓ | | Show/hide sheet |
| allowHideOnContentScroll | `boolean` | | `true` | Enable the behavior in which you can close the sheet window with a swipe down if the content is scrolled to its top (`contentNode.scrollTop === 0`) or has no scroll at all |
| hideTopBar | `boolean` | | | Hide top bar with resize handle |
| id | `string` | | `modal` | ID of the sheet, used as hash in URL. It's important to specify different `id` values if there can be more than one sheet on the page |
| title | `string` | | `undefined` | Title of the sheet window |
| className | `string` | | `undefined` | Class name for the sheet window |
| contentClassName | `string` | | `undefined` | Class name for the sheet content |
| swipeAreaClassName | `string` | | `undefined` | Class name for the swipe area |
| onClose | `function` | | `undefined` | Function called when the sheet is closed (when `visible` sets to `false`) |
<!--/GITHUB_BLOCK-->

```tsx
import {Sheet} from '@gravity-ui/uikit';
```

`Sheet` is a component designed to be used in a mobile context as an information or interactive element. You can place content of any size in it - internal scrolling and dynamic resizing are supported.

On mobile devices, you can move `Sheet` by pulling on its main part or the swipe area. To close it, swipe down or touch the area outside the `Sheet`.

## Usage

```tsx
import React from 'react';
import {Button, Sheet} from '@gravity-ui/uikit';

const SheetExample = () => {
const [visible, setVisible] = React.useState(false);

return (
<React.Fragment>
<Button onClick={() => setVisible(true)}>Open Sheet</Button>
<Sheet visible={visible} onClose={() => setVisible(false)} title="Content Sheet">
Content
</Sheet>
</React.Fragment>
);
};
```

## Properties

| Name | Description | Type | Default |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------: | :---------: |
| visible | Manages `Sheet` visibility | `boolean` | `false` |
| allowHideOnContentScroll | Enable the behavior of the sheet window closing by swiping down if the content is scrolled to its top (`content Node.scrollTop === 0`) or has no scroll at all | `boolean` | `true` |
| hideTopBar | Hide top bar with resize handle | `boolean` | |
| id | ID of the sheet, used as hash in URL. It's important to specify different `id` values if there can be more than one sheet on the page | `string` | `modal` |
| title | Title of the sheet window | `string` | `undefined` |
| className | HTML `class` attribute | `string` | `undefined` |
| contentClassName | HTML `class` attribute for the sheet content | `string` | `undefined` |
| swipeAreaClassName | HTML `class` attribute for the swipe area | `string` | `undefined` |
| onClose | Handler for close event | `function` | `undefined` |

## CSS API

Expand Down
Loading