import Props from '@ionic-internal/component-api/v8/list/props.md'; import Events from '@ionic-internal/component-api/v8/list/events.md'; import Methods from '@ionic-internal/component-api/v8/list/methods.md'; import Parts from '@ionic-internal/component-api/v8/list/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/list/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/list/slots.md';

import EncapsulationPill from '@components/page/api/EncapsulationPill';

Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.

Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.

import Basic from '@site/static/usage/v8/list/basic/index.md';

Adding the inset property to a list will apply margin around the list. In ios mode it will also add rounded corners to the list.

import Inset from '@site/static/usage/v8/list/inset/index.md';

Adding the lines property to a list will adjust the bottom borders of all of the items in the list. Setting it to "full" will display full width borders, "inset" will display borders adjusted with left padding, and "none" will show no borders. If the lines property is set on an item in a list, that will take priority over the property on the list.

import Lines from '@site/static/usage/v8/list/lines/index.md';