Divider
Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.
Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Text>Above</Text>
<Divider />
<Text>Below</Text>
</VStack>In HStack
Preview unavailable for this example in the static docs build.
Show code
<HStack spacing={10}>
<Text>Left</Text>
<Divider />
<Text>Right</Text>
</HStack>In VStack
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Text>First</Text>
<Divider />
<Text>Second</Text>
<Divider />
<Text>Third</Text>
</VStack>Multiple Dividers
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Text>Section 1</Text>
<Divider />
<Text>Section 2</Text>
<Divider />
<Text>Section 3</Text>
<Divider />
<Text>Section 4</Text>
</VStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Button>First Action</Button>
<Divider />
<Button>Second Action</Button>
<Divider />
<Button>Third Action</Button>
</VStack>In List
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={0}>
<div style={{ padding: '15px' }}><Text>Item 1</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 2</Text></div>
<Divider />
<div style={{ padding: '15px' }}><Text>Item 3</Text></div>
</VStack>Custom Styling
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={10}>
<Text>Above</Text>
<Divider style={{ borderWidth: '2px', borderColor: '#007AFF' }} />
<Text>Below</Text>
</VStack>API
This component currently relies on inherited element props.
Inherits additional props from Omit<IBaseComponent, 'children'>.
Overview
Divider is a visual element that can be used to separate other content. Dividers are commonly used in Lists to separate items and create visual hierarchy.
SwiftUI Correspondence: Similar to SwiftUI's Divider.
Custom Styling
Apply custom styles to Divider:
Notes
- Dividers automatically adapt to their container's orientation
- Dividers are commonly used in Lists to separate items
- Custom styles can be applied via the
styleprop - Dividers provide visual separation without taking up significant space
Best Practices
- Consistent usage: Use dividers consistently throughout your app
- Visual hierarchy: Use dividers to create clear visual separation
- Spacing: Ensure appropriate spacing around dividers
- Accessibility: Dividers are decorative and don't need special accessibility considerations
- Performance: Dividers are lightweight and don't impact performance