Skip to Content
UI Components/Cupertino UI/Cupertino List Section

Cupertino List Section

Grouped list sections with optional header and footer

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

ListSection.tsx
1import {
2  FlutterCupertinoListSection,
3  FlutterCupertinoListSectionHeader,
4  FlutterCupertinoListSectionFooter,
5} from '@openwebf/react-cupertino-ui';
6
7export function ListSectionExample() {
8  return (
9    <FlutterCupertinoListSection insetGrouped>
10      <FlutterCupertinoListSectionHeader>
11        General
12      </FlutterCupertinoListSectionHeader>
13
14      <div>Wi-Fi</div>
15      <div>Bluetooth</div>
16
17      <FlutterCupertinoListSectionFooter>
18        These settings affect connectivity.
19      </FlutterCupertinoListSectionFooter>
20    </FlutterCupertinoListSection>
21  );
22}

API Reference

Props (React)

NameTypeDefaultDescription
insetGroupedbooleanfalseUse inset-grouped iOS list style.
Full type definitions: npm package docs.