パッケージの詳細

@react-md/sheet

mlaursen5.3kMIT5.1.6

A package for making temporary sheets of material (normally for navigation or details).

react-md, material design, react, sheet

readme

@react-md/sheet

A sheet is an extension of the Dialog component that allows for creating a fixed element that appears inline with other content fixed to the viewport borders. Sheets are great for:

  • containing a persistent navigation tree on desktop
  • containing a temporary navigation tree on any device size
  • creating dropdown menus on mobile

Installation

npm install --save @react-md/sheet

It is also recommended to install these other packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/list \
  @react-md/dialog \
  @react-md/icon \
  @react-md/material-icons

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import type { ReactElement } from "react";
import { Button } from "@react-md/button";
import { List, ListItem } from "@react-md/list";
import { Sheet } from "@react-md/sheet";
import { useToggle } from "@react-md/utils";

export default function Example(): ReactElement {
  const [visible, show, hide] = useToggle(false);

  return (
    <>
      <Button
        id="show-sheet-position"
        onClick={show}
        theme="secondary"
        themeType="contained"
      >
        Show
      </Button>
      <Sheet
        id="example-sheet-1"
        aria-label="Example Sheet"
        visible={visible}
        onRequestClose={hide}
        position={position}
      >
        <List onClick={hide}>
          <ListItem id="example-sheet-item-1">Item 1</ListItem>
          <ListItem id="example-sheet-item-2">Item 2</ListItem>
          <ListItem id="example-sheet-item-3">Item 3</ListItem>
          <ListItem id="example-sheet-item-4">Item 4</ListItem>
          <ListItem id="example-sheet-item-5">Item 5</ListItem>
        </List>
      </Sheet>
    </>
  );
}

更新履歴

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

5.1.6 (2023-12-11)

Note: Version bump only for package @react-md/sheet

5.1.3 (2022-05-07)

Note: Version bump only for package @react-md/sheet

5.1.2 (2022-04-02)

Note: Version bump only for package @react-md/sheet

5.1.1 (2022-04-01)

Bug Fixes

  • @react-md/sheet: Animate correctly in React 18 (ca27b19)

5.1.0 (2022-03-18)

Other Internal Changes

  • run lint-scripts --fix for consistent-type-imports (42d839d)

5.0.0 (2022-01-31)

Documentation

  • @react-md/sheet: Move tsdoc around for easier sharing (83fcaac)

4.0.3 (2021-12-31)

Other Internal Changes

  • Updated all packages' peerDependenciesMeta (60fcd71), closes #1319

4.0.1 (2021-11-27)

Bug Fixes

  • @react-md/sheet: Added fixes required for Concurrent Rendering (75663e4)

4.0.0 (2021-11-24)

Bug Fixes

  • sass: Do not use legacy global functions (6159e16)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)
  • @react-md/transition: No longer use findDOMNode for transitions (cb952da)

Other Internal Changes

  • always skip lib check (229cef1)
  • react-md: Remove prop-types package and usage (2637a6f)
  • stylelint: Updated to use stylelint (22d1598)

Breaking Changes

  • Minimum React version is now 16.14 instead of 16.8
  • react-md: There will no longer be run-time prop validation with the prop-types package.

3.1.0 (2021-09-10)

Other Internal Changes

  • ran yarn format to include new files (48d3d7f)

3.0.1 (2021-08-15)

Bug Fixes

  • Updated peerDependencies to fix yarn berry peer requirements (250efcd), closes #1224

3.0.0 (2021-08-13)

Other Internal Changes

  • @react-md/dev-utils: updated sassdoc and variables to use everything.scss (a0f0699)
  • @react-md/dev-utils: updated variables command to work with sass (5376be1)

2.9.1 (2021-07-27)

Other Internal Changes

  • install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/sheet

2.8.5 (2021-07-03)

Note: Version bump only for package @react-md/sheet

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/sheet

2.8.3 (2021-05-18)

Documentation

  • react-md.dev: updated tsdoc to work with typedoc (cf54c35)

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/sheet

2.8.0 (2021-04-22)

Other Internal Changes

  • tsconfig: separate tsconfig by package instead of a single root (b278230)

2.7.1 (2021-03-23)

Other Internal Changes

  • ts: stopped using FC type (c5daa47)

2.7.0 (2021-02-28)

Bug Fixes

  • @react-md/sheet: fixed sheet color when dark theme elevation is enabled (0abe05e), closes #1075

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)

Other Internal Changes

  • updated test coverage to not include conditional component PropTypes (24e5df1)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/sheet

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/sheet

2.5.4 (2021-01-27)

Note: Version bump only for package @react-md/sheet

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/sheet

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/sheet

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/sheet

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/sheet

2.3.0 (2020-09-10)

Features

  • a11y: improved LabelRequiredForA11y type definition (b7aa4fa)

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/sheet

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/sheet

2.2.0 (2020-08-11)

Note: Version bump only for package @react-md/sheet

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/sheet

2.1.1 (2020-07-21)

Note: Version bump only for package @react-md/sheet

2.1.0 (2020-07-12)

Features

  • Improved Dark Mode using Raising Elevation (547877c), closes #860

2.0.2 (2020-06-30)

Bug Fixes

  • LICENSE: Removed the time range from license since it was incorrect (50c9021)
  • Added sideEffects field to package.json (31820b9)
  • sideEffects formatting (78a7b6b)

v2.0.1

No changes.

v2.0.0

This package is the new version of the Drawer component from v1 that is no longer really used for layout and app size.

New Features / Behavior

  • relies on the AppSizeListener from @react-md/utils to determine the app size
  • fixed the accessibility issues and now handles automatic focus changes when changing visibility
  • fixed the accessibility issues and now defaults to being rendered as a dialog, but can also be rendered as a menu or none
  • supports being rendered at the top, right, bottom, and left of the page instead of only right and left
  • new sizing behavior that can be configured horizontally or vertically
  • no longer needs to be unmounted while invisible to create a persistent sheet off-screen
  • renders as a <div> instead of an <aside> since that was the wrong element anyways
  • the width will be the same when rendered to the left or right of the viewport
  • added the ability to theme the width and height with CSS variables and mixins

Breaking Changes

  • no longer supports the mini variants but will be added in a later release
  • no longer has the getCurrentMedia and matchesMedia static methods
  • no longer handles controlling the current app size
  • no longer renders as the Paper component since it was removed and has no zDepth prop
  • no longer renders navItems

New SCSS Variables, Functions, and Mixins

  • $rmd-sheet-z-index: 5 - The z-index for a sheet that appears inline with other content
  • $rmd-sheet-overlay-z-index: $rmd-sheet-raised-z-index - 1 !default (16) - The z-index for the sheet's overlay
  • $rmd-sheet-elevation: 2 !default - The elevation to use for the sheet when rendered inline with other content
  • $rmd-sheet-elevation: 16 !default - The elevation to use for the sheet when rendered as a temporary element
  • $rmd-sheet-touch-width: calc(100vw - #{$rmd-sheet-touch-margin}) !default - The width for a sheet on touch devices that should fill up as much space as possible
  • $rmd-sheet-static-width: 16rem !default - The width for a sheet that does not change size based on content. This is kind of like the new $md-drawer-tablet-width and $md-drawer-desktop-width
  • $rmd-sheet-max-height: 100% !default - the max height for a sheet rendered to the top or bottom of the viewport
  • $rmd-sheet-touchable-max-height: calc(100% - #{$rmd-sheet-touch-margin}) !default - The max height for a sheet that has a "touchable" area that can be clicked to close
  • $rmd-sheet-recommended-max-height: 50% !default - The material design recommended max-height for a sheet rendered at the top or bottom of the viewport
  • $rmd-sheet-enabled-positions: top right bottom left !default - A list of the positions that should generate styles. You can maybe save a few bytes by removing the positions that aren't used in your app
  • $rmd-sheet-scrollable-padding: 3.25rem !default - The amount of padding tp use before the first tab when the scrollable prop is enabled on the sheet component
  • @function rmd-sheet-theme - gets one of the theme values and validates that the theme name is valid
  • @function rmd-sheet-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
  • @mixin rmd-sheet-theme - applies one of the theme values to a css property as a css variable
  • @mixin rmd-sheet-theme-update-var - updates one of the theme values as a css variable

Renamed SCSS Variables, Functions, and Mixins

  • renamed $md-sheet-z-index to $rmd-sheet-raised-z-index and changed the
  • $md-sheet-transition-time was split into two variables $rmd-sheet-enter-duration and $rmd-sheet-leave-duration and changed the default duration from 0.3s to 0.2s and 0.15s
  • renamed $md-sheet-mobile-margin to $rmd-sheet-touch-margin and changed the default value from 56px to 3.5rem

Removed SCSS Variables and Mixins

  • removed $md-drawer-mobile-max-width
  • removed $md-drawer-mobile-mini-width, $md-drawer-desktop-mini-width, $md-drawer-mobile-mini-item-padding, and $md-drawer-desktop-mini-item-padding since mini drawers aren't supported again yet
  • removed $md-drawer-desktop-left-max-width since there is no difference when rendering at the left or right anymore