パッケージの詳細

@react-md/list

mlaursen5.7kMIT5.1.6

This package is used to create lists with the material design specs.

accessibility, a11y, react-md, material design

readme

@react-md/list

Create lists of content that can have optional supplementary icons, avatars, or images placed with the text.

Installation

npm install --save @react-md/list

It is also recommended to install the following packages as they normally work together well with lists:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/divider \
  @react-md/avatar \
  @react-md/icon \
  @react-md/media

Documentation

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

Usage

import { render } from "react-dom";
import { Divider } from "@react-md/divider";
import { List, ListItem } from "@react-md/list";
import { FontIcon } from "@react-md/icon";

const App = () => (
  <List>
    <ListItem id="item-1">Item 1</ListItem>
    <ListItem id="item-2" secondaryText="This is secondary text">
      Item 2 Primary Text
    </ListItem>
    <ListItem id="item-3" disabled>
      Item 3 Disabled
    </ListItem>
    <Divider />
    <ListSubheader>Sub actions</ListSubheader>
    <ListItem id="item-4" leftAddon={<FontIcon>close</FontIcon>}>
      Close
    </ListItem>
    <ListItem
      id="item-5"
      leftAddon={
        <Avatar
          src="https://picsum.photos/40?random"
          alt="A random image from https://picsum.photos"
        />
      }
      leftAddonType="avatar"
    >
      With Avatar
    </ListItem>
  </List>
);

render(<App />, document.getElementById("root"));

更新履歴

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/list

5.1.3 (2022-05-07)

Documentation

  • fix typos throughout codebase (725d1a2)

5.1.2 (2022-04-02)

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

5.1.0 (2022-03-18)

Other Internal Changes

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

5.0.0 (2022-01-31)

Bug Fixes

  • @react-md/list: Pass disableEnterClick in ListItem (b5e8b69)

Features

  • @react-md/list: Created rmd-list-unstyled utility class from the mixin (6c9b7f4)

4.0.3 (2021-12-31)

Other Internal Changes

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

4.0.1 (2021-11-27)

Other Internal Changes

  • Updated imports to use import type when possible (ba96bb6)

4.0.0 (2021-11-24)

Features

  • Update to use new JSX Transform and latest eslint (8111cd3)

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)

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

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/list

2.8.5 (2021-07-03)

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

2.8.4 (2021-06-10)

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

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/list

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)

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

2.7.0 (2021-02-28)

Documentation

  • tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)
  • tsdoc: fixed some tsdoc annotations and styling (0449b86)
  • tsdoc: updated \@since annotations (c62027e)

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/list

2.5.5 (2021-01-30)

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

2.5.4 (2021-01-27)

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

2.5.1 (2020-12-16)

Bug Fixes

2.5.0 (2020-12-15)

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

2.4.3 (2020-11-14)

Bug Fixes

2.4.2 (2020-10-23)

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

2.4.1 (2020-10-17)

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

2.4.0 (2020-10-17)

Features

2.3.1 (2020-09-15)

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

2.3.0 (2020-09-10)

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

2.2.2 (2020-09-02)

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

2.2.1 (2020-09-02)

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

2.2.0 (2020-08-11)

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

2.1.2 (2020-08-01)

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

2.1.1 (2020-07-21)

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

2.1.0 (2020-07-12)

Bug Fixes

  • ListItem disabled states (7b37292)

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 has a lot of changes from the v1 API that should hopefully make it easier to use. There are also new components to help with styling and positioning of addons that can be used without a ListItem/List component.

New Behavior and Features

  • all components now correctly forward the ref to the DOM element
  • introduced a new dense spec instead of using mobile/desktop which is enabled by default once desktop media matches but can be disabled by setting $rmd-utils-auto-dense: false
  • added a ListItemChildren component that allows you to get all the styling of the children within a ListItem without requiring the use of the ListItem
  • added a ListItemAddon component that can be used to add spacing between the children and an addon with the ListItem spacing styles
  • added a SimpleListItem component if you don't want to create a clickable ListItem but honestly shouldn't be used too much due to how screen readers read <li> elements
  • added a ListItemText component that allows you to render the primary and optional secondary text that is normally stacked
  • added a ListItemLink component that allows you to render a link with the ListItem styles
  • the ListItem no longer renders as an AccessibleFakeButton and has a simpler HTML structure
  • the ListItem now supports rendering images with two different sizes
  • the ListItem now renders children to the left and/or right of the text/children with the new leftAddon, leftAddonType, rightAddon, and rightAddonType props
  • the ListItem now supports rendering the addons in different vertical positions by default with the leftAddonPosition and rightAddonPosition props
  • the ListItem now supports rendering the children as the primaryText when enabling the textChildren prop
  • added built-in support for right-to-left languages with the list item addons
  • the Subheader component was renamed to ListSubheader
  • the ListSubheader now renders children instead of using a primaryText prop
  • updated all of the sizing and padding values of the list item to be configurable with CSS variables along with the new theming API available through mixins

Breaking Changes

  • removed the ListItemControl component and built-in functionality for rendering checkbox, radio, or switch elements within a ListItem
  • the List component renamed the inline prop to horizontal
  • the List component now renders with role="none" by default
  • the ListSubheader component no longer supports styling text with the primary theme color out of the box
  • removed the ability to render nested list items but added a new @react-md/tree to handle those use-cases
  • basically everything about the ListItem component is a breaking change

New SCSS Variables, Functions, and Mixins

  • $rmd-list-dense-horizontal-padding: 0 !default - a new variable if you want to add left/right padding to the List component
  • $rmd-list-dense-horizontal-padding: $rmd-list-horizontal-padding !default - a new variable if you want to add left/right padding to the List component when using the dense spec
  • $rmd-list-item-vertical-padding: 0.5rem !default - the amount of padding to add to the top and bottom of each list item
  • $rmd-list-item-horizontal-padding: 1rem !default - the amount of padding to add to the left and right of each list item
  • $rmd-list-item-extra-large-height: 4.5rem !default - the height for a list item that has a single line of text with an image or two lines of text with an addon that is not an image
  • $rmd-list-item-dense-extra-large-height: 4.5rem !default - the height for a list item that has a single line of text with an image or two lines of text with an addon that is not an image when using the dense spec
  • $rmd-list-item-secondary-text-line-height: 1.42857 !default - the line-height to use for the secondary text within a list item
  • $rmd-list-item-secondary-text-three-line-max-height: 3rem !default - the max height allowed for a list item's secondary text so that the line-clamp functionality works correctly
  • $rmd-list-item-dense-secondary-text-three-line-max-height: 2.25rem !default -the max height allowed for a list item's secondary text so that the line-clamp functionality works correctly with the dense spec
  • $rmd-list-item-media-size: 3.5rem !default - the horizontal size to use for a media item within a list item
  • $rmd-list-item-media-large-size: 6.25rem !default - the horizontal size to use for a large media item within a list item
  • $rmd-list-item-media-spacing: 1rem !default - the amount of spacing to place between a media addon and the main content within a list item
  • @function rmd-list-theme - gets one of the list's theme values
  • @function rmd-list-theme-var - gets one of the list's theme values as a css variable
  • @mixin rmd-list-theme - applies one of the list's theme values as a css property
  • @mixin rmd-list-theme-update-var - updates one of the list's theme css variables
  • @mixin rmd-list-unstyled - a new mixin that can be used to disable the list styles quickly
  • @mixin rmd-list-dense-theme - applies styles to implement a dense theme for the List component
  • @mixin rmd-list-item-dense-theme - applies styles to implement a dense theme for the ListItem component

Renamed SCSS Variables, Functions, and Mixins

  • renamed $md-list-mobile-padding to $rmd-list-vertical-padding and changed the default value from 8px to 0.5rem
  • renamed $md-list-mobile-primary-font-size to $rmd-list-font-size and changed the default value from 16px to 1rem
  • renamed $md-list-mobile-height to $rmd-list-item-height and changed the default value from 48px to 3rem
  • renamed $md-list-mobile-avatar-height to $rmd-list-item-medium-height and changed the default value from 56px to 3.5rem
  • renamed $md-list-mobile-two-lines-height to $rmd-list-item-large-height and changed the default value from 72px to 4rem
  • renamed $md-list-mobile-three-lines-height to $rmd-list-item-three-line-height and changed the default value from 88px to 5.5rem
  • renamed $md-list-desktop-padding to $rmd-list-dense-vertical-padding and changed the default value from 4px to 0.25rem
  • renamed $md-list-desktop-primary-font-size to $rmd-list-dense-font-size and changed the default value from 13px to 0.8125rem
  • renamed $md-list-desktop-height to $rmd-list-item-dense-height and changed the default value from 40px to 2.5rem
  • renamed $md-list-desktop-avatar-height to $rmd-list-item-dense-medium-height and changed the default value from 48px to 3rem
  • renamed $md-list-desktop-two-lines-height to $rmd-list-item-dense-large-height and changed the default value from 60px to 3.5rem
  • renamed $md-list-desktop-three-lines-height to $rmd-list-item-dense-three-line-height and changed the default value from 76px to 5rem
  • renamed $md-list-left-padding to $rmd-list-item-text-keyline and changed the default value from 72px to 4.5rem

Removed SCSS Variables Placeholders, and Mixins

  • removed $md-list-inline-padding
  • removed $md-list-include-icon, $md-list-include-avatar, md-list-include-two-lines, $md-list-include-three-lines, $md-list-include-controls, $md-list-include-inline, and $md-list-include-unstyled-class-name variables
  • removed $md-list-divider-margin since it is no longer needed
  • removed the $md-list-nested-items-depth, $md-list-nested-items-increment, and $md-list-nested-items-initial-padding variables since the functionality for nested items was removed
  • removed $md-list-desktop-secondary-font-size, $md-list-padding, $md-list-primary-font-size, $md-list-secondary-font-size, $md-list-height, $md-list-avatar-height, $md-list-two-lines-height, $md-list-three-lines-height, and $md-list-three-lines-addon-margin-top since primary and secondary text now have the same font size by default
  • removed $md-list-addon-line-height, $md-list-mobile-three-lines-addon-margin-top, $md-list-desktop-three-lines-addon-margin-top since it is no longer needed
  • removed %md-list-unstyled placeholder since placeholders are considered bad practice
  • removed the react-md-theme-lists mixin since the background colors now are inherited with the --rmd-theme-background/--rmd-theme-surface css variables