0
# Compose Multiplatform Components
1

2
Additional UI components for Compose Multiplatform including SplitPane layouts, resource loading, animated images, and UI tooling preview support. These components extend the core Compose Multiplatform functionality with specialized widgets and utilities.
3

4
## Package Information
5

6
- **Package Name**: org.jetbrains.compose.components
7
- **Package Type**: Maven (Gradle dependency)
8
- **Language**: Kotlin
9
- **Platform**: Multiplatform (Desktop, Android, iOS, Web)
10
- **Installation**: Add individual components via Compose plugin
11

12
## Core Imports
13

14
Using the Compose Gradle plugin for individual components:
15

16
```kotlin
17
dependencies {
18
    implementation(compose.components.splitPane)
19
    implementation(compose.components.resources)
20
    implementation(compose.components.animatedImage)
21
    implementation(compose.components.uiToolingPreview)
22
}
23
```
24

25
For manual dependency management:
26

27
```kotlin
28
dependencies {
29
    implementation("org.jetbrains.compose.components:components-splitpane:1.8.2")
30
    implementation("org.jetbrains.compose.components:components-resources:1.8.2")
31
    implementation("org.jetbrains.compose.components:components-animatedimage:1.8.2")
32
    implementation("org.jetbrains.compose.components:components-ui-tooling-preview:1.8.2")
33
}
34
```
35

36
## Basic Usage
37

38
```kotlin
39
import org.jetbrains.compose.splitpane.*
40
import org.jetbrains.compose.resources.*
41
import androidx.compose.foundation.layout.*
42
import androidx.compose.foundation.background
43
import androidx.compose.foundation.shape.CircleShape
44
import androidx.compose.material.Text
45
import androidx.compose.material.Image
46
import androidx.compose.runtime.*
47
import androidx.compose.ui.Modifier
48
import androidx.compose.ui.graphics.Color
49
import androidx.compose.ui.unit.dp
50

51
@OptIn(ExperimentalSplitPaneApi::class, ExperimentalResourceApi::class)
52
@Composable
53
fun ComponentsDemo() {
54
    val splitPaneState = rememberSplitPaneState(initialPositionPercentage = 0.3f)
55
    
56
    HorizontalSplitPane(
57
        splitPaneState = splitPaneState,
58
        modifier = Modifier.fillMaxSize()
59
    ) {
60
        first(minSize = 100.dp) {
61
            Column(modifier = Modifier.padding(16.dp)) {
62
                Text("Left Panel")
63
                Text(stringResource(Res.string.welcome_message))
64
            }
65
        }
66
        
67
        second(minSize = 200.dp) {
68
            Column(modifier = Modifier.padding(16.dp)) {
69
                Text("Right Panel")
70
                // Image from resources
71
                Image(
72
                    painter = painterResource(Res.drawable.app_icon),
73
                    contentDescription = null,
74
                    modifier = Modifier.size(64.dp)
75
                )
76
            }
77
        }
78
        
79
        splitter {
80
            visiblePart {
81
                Box(
82
                    modifier = Modifier
83
                        .width(4.dp)
84
                        .fillMaxHeight()
85
                        .background(Color.Gray)
86
                )
87
            }
88
            handle(SplitterHandleAlignment.AFTER) {
89
                Box(
90
                    modifier = Modifier
91
                        .markAsHandle()
92
                        .size(16.dp)
93
                        .background(Color.DarkGray, CircleShape)
94
                )
95
            }
96
        }
97
    }
98
}
99
```
100

101
## Architecture
102

103
The Compose Components library provides four main component categories:
104

105
- **Split Pane System**: Resizable split layouts with customizable splitters and handles
106
- **Resource Management**: Multiplatform resource loading with localization and qualification support
107
- **Animated Images**: Cross-platform animated image display with automatic format detection
108
- **UI Tooling**: Development-time preview support and parameter providers for IDE integration
109

110
## Capabilities
111

112
### Split Pane Layouts
113

114
Resizable split panel layouts with horizontal and vertical orientations, customizable splitters, and state management for creating flexible UI layouts.
115

116
```kotlin { .api }
117
@ExperimentalSplitPaneApi
118
@Composable
119
fun HorizontalSplitPane(
120
    splitPaneState: SplitPaneState,
121
    modifier: Modifier = Modifier,
122
    content: SplitPaneScope.() -> Unit
123
)
124

125
@ExperimentalSplitPaneApi 
126
@Composable
127
fun VerticalSplitPane(
128
    splitPaneState: SplitPaneState,
129
    modifier: Modifier = Modifier,
130
    content: SplitPaneScope.() -> Unit
131
)
132

133
@ExperimentalSplitPaneApi
134
@Composable
135
fun rememberSplitPaneState(
136
    initialPositionPercentage: Float = 0f,
137
    moveEnabled: Boolean = true
138
): SplitPaneState
139

140
@ExperimentalSplitPaneApi
141
class SplitPaneState {
142
    var positionPercentage: Float
143
    var moveEnabled: Boolean
144
    fun dispatchRawMovement(delta: Float)
145
}
146
```
147

148
[Split Pane Layouts](./splitpane.md)
149

150
### Resource Loading
151

152
Multiplatform resource loading system with support for strings, images, fonts, and pluralization, including localization and resource qualification.
153

154
```kotlin { .api }
155
@ExperimentalResourceApi
156
@Composable
157
fun stringResource(resource: StringResource): String
158

159
@ExperimentalResourceApi
160
@Composable
161
fun stringResource(resource: StringResource, vararg formatArgs: Any): String
162

163
@ExperimentalResourceApi
164
@Composable
165
fun painterResource(resource: DrawableResource): Painter
166

167
@ExperimentalResourceApi
168
@Composable
169
fun pluralStringResource(resource: PluralStringResource, quantity: Int): String
170

171
@ExperimentalResourceApi
172
@Composable
173
fun rememberResourceEnvironment(): ResourceEnvironment
174

175
class StringResource
176
class DrawableResource  
177
class FontResource
178
class PluralStringResource
179
class ResourceEnvironment
180
```
181

182
[Resource Loading](./resources.md)
183

184
### Animated Images  
185

186
Cross-platform animated image support with automatic format detection and platform-optimized loading for GIFs and other animated formats.
187

188
```kotlin { .api }
189
expect class AnimatedImage
190

191
expect suspend fun loadAnimatedImage(path: String): AnimatedImage
192

193
expect suspend fun loadResourceAnimatedImage(path: String): AnimatedImage
194

195
@Composable
196
expect fun AnimatedImage.animate(): ImageBitmap
197

198
val ImageBitmap.Companion.Blank: ImageBitmap
199
```
200

201
[Animated Images](./animatedimage.md)
202

203
### UI Tooling Preview
204

205
Development-time preview support with parameter providers for IDE integration and composable function previewing during development.
206

207
```kotlin { .api }
208
@Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION)
209
@Repeatable
210
annotation class Preview
211

212
@Target(AnnotationTarget.VALUE_PARAMETER)
213
annotation class PreviewParameter(
214
    val provider: KClass<out PreviewParameterProvider<*>>,
215
    val limit: Int = Int.MAX_VALUE
216
)
217

218
expect interface PreviewParameterProvider<T> {
219
    val values: Sequence<T>
220
    val count: Int
221
}
222
```
223

224
[UI Tooling Preview](./preview.md)
225

226