or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animatedimage.mdindex.mdpreview.mdresources.mdsplitpane.md
tile.json

tessl/maven-org-jetbrains-compose-components--components

Additional UI components for Compose Multiplatform including SplitPane layouts, resource loading, animated images, and UI tooling preview support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
mavenpkg:maven/org.jetbrains.compose.components/components@1.8.x

To install, run

npx @tessl/cli install tessl/maven-org-jetbrains-compose-components--components@1.8.0

index.mddocs/

Compose Multiplatform Components

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.

Package Information

  • Package Name: org.jetbrains.compose.components
  • Package Type: Maven (Gradle dependency)
  • Language: Kotlin
  • Platform: Multiplatform (Desktop, Android, iOS, Web)
  • Installation: Add individual components via Compose plugin

Core Imports

Using the Compose Gradle plugin for individual components:

dependencies {
    implementation(compose.components.splitPane)
    implementation(compose.components.resources)
    implementation(compose.components.animatedImage)
    implementation(compose.components.uiToolingPreview)
}

For manual dependency management:

dependencies {
    implementation("org.jetbrains.compose.components:components-splitpane:1.8.2")
    implementation("org.jetbrains.compose.components:components-resources:1.8.2")
    implementation("org.jetbrains.compose.components:components-animatedimage:1.8.2")
    implementation("org.jetbrains.compose.components:components-ui-tooling-preview:1.8.2")
}

Basic Usage

import org.jetbrains.compose.splitpane.*
import org.jetbrains.compose.resources.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.background
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Text
import androidx.compose.material.Image
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalSplitPaneApi::class, ExperimentalResourceApi::class)
@Composable
fun ComponentsDemo() {
    val splitPaneState = rememberSplitPaneState(initialPositionPercentage = 0.3f)
    
    HorizontalSplitPane(
        splitPaneState = splitPaneState,
        modifier = Modifier.fillMaxSize()
    ) {
        first(minSize = 100.dp) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Left Panel")
                Text(stringResource(Res.string.welcome_message))
            }
        }
        
        second(minSize = 200.dp) {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Right Panel")
                // Image from resources
                Image(
                    painter = painterResource(Res.drawable.app_icon),
                    contentDescription = null,
                    modifier = Modifier.size(64.dp)
                )
            }
        }
        
        splitter {
            visiblePart {
                Box(
                    modifier = Modifier
                        .width(4.dp)
                        .fillMaxHeight()
                        .background(Color.Gray)
                )
            }
            handle(SplitterHandleAlignment.AFTER) {
                Box(
                    modifier = Modifier
                        .markAsHandle()
                        .size(16.dp)
                        .background(Color.DarkGray, CircleShape)
                )
            }
        }
    }
}

Architecture

The Compose Components library provides four main component categories:

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

Capabilities

Split Pane Layouts

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

@ExperimentalSplitPaneApi
@Composable
fun HorizontalSplitPane(
    splitPaneState: SplitPaneState,
    modifier: Modifier = Modifier,
    content: SplitPaneScope.() -> Unit
)

@ExperimentalSplitPaneApi 
@Composable
fun VerticalSplitPane(
    splitPaneState: SplitPaneState,
    modifier: Modifier = Modifier,
    content: SplitPaneScope.() -> Unit
)

@ExperimentalSplitPaneApi
@Composable
fun rememberSplitPaneState(
    initialPositionPercentage: Float = 0f,
    moveEnabled: Boolean = true
): SplitPaneState

@ExperimentalSplitPaneApi
class SplitPaneState {
    var positionPercentage: Float
    var moveEnabled: Boolean
    fun dispatchRawMovement(delta: Float)
}

Split Pane Layouts

Resource Loading

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

@ExperimentalResourceApi
@Composable
fun stringResource(resource: StringResource): String

@ExperimentalResourceApi
@Composable
fun stringResource(resource: StringResource, vararg formatArgs: Any): String

@ExperimentalResourceApi
@Composable
fun painterResource(resource: DrawableResource): Painter

@ExperimentalResourceApi
@Composable
fun pluralStringResource(resource: PluralStringResource, quantity: Int): String

@ExperimentalResourceApi
@Composable
fun rememberResourceEnvironment(): ResourceEnvironment

class StringResource
class DrawableResource  
class FontResource
class PluralStringResource
class ResourceEnvironment

Resource Loading

Animated Images

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

expect class AnimatedImage

expect suspend fun loadAnimatedImage(path: String): AnimatedImage

expect suspend fun loadResourceAnimatedImage(path: String): AnimatedImage

@Composable
expect fun AnimatedImage.animate(): ImageBitmap

val ImageBitmap.Companion.Blank: ImageBitmap

Animated Images

UI Tooling Preview

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

@Target(AnnotationTarget.ANNOTATION_CLASS, AnnotationTarget.FUNCTION)
@Repeatable
annotation class Preview

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

expect interface PreviewParameterProvider<T> {
    val values: Sequence<T>
    val count: Int
}

UI Tooling Preview