Components
OutlineGroup
OutlineGroup renders hierarchical content as an expandable outline, aligned with SwiftUI's tree presentation.
Example
Requires React 18.2+ or 19 and shared styles. See setup.
Default
Loading preview…
Code
'use client';
import { OutlineGroup } from '@swiftuijs/ui';
type Node = {
id: string;
title: string;
children?: Node[];
};
const tree: Node[] = [
{
id: 'design',
title: 'Design',
children: [
{ id: 'assets', title: 'Assets' },
{ id: 'reviews', title: 'Reviews' },
],
},
{
id: 'engineering',
title: 'Engineering',
children: [{ id: 'ios', title: 'iOS' }],
},
];
export default function Example() {
return ((<OutlineGroup data={tree} getChildren={(item) => item.children} getKey={(item) => item.id} renderItem={(item) => item.title}/>));
}API reference
| Prop | Type | Required | Description |
|---|---|---|---|
data | Item[] | Yes | Top-level tree nodes. |
getChildren | (item: Item) => Item[] | undefined | Yes | Returns child nodes for a given item. |
getKey | (item: Item) => string | Yes | Stable key extractor. |
renderItem | (item: Item) => ReactNode | Yes | Renderer for each tree item label. |
Inherits additional props from IBaseComponent.