ComposeCollapsingTopBar - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #typescript #llm #android #rust #deep-learning #nodejs #cli #kubernetes #vue #pytorch #ios #open-source

ComposeCollapsingTopBar

(★ 69)

The ultimate Compose Multiplatform collapsing toolbar library with dynamic sizing, different scroll modes, and extensive customization options

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
  - publish-release.yml
- - Apache.xml
  - profiles_settings.xml
- - Copyright_Scope.xml
- Run Desktop App.run.xml
- - ComposeCollapsingTopBar.klib.api
- build.gradle.kts
- consumer-rules.pro
- - collapsing_column_full.gif
  - collapsing_column_moving_element.gif
  - collapsing_column_multiple_fixed.gif
  - collapsing_column_partially.gif
  - collapsing_column_reverse.gif
  - collapsing_column_stack.gif
  - collapsing_mode_enter_always_collapsed.gif
  - collapsing_mode_exit.gif
  - collapsing_mode_exit_expand_always.gif
  - collapsing_mode_regular.gif
  - collapsing_mode_regular_expand_always.gif
  - cover_collapsing_column.gif
  - cover_collapsing_stack.gif
  - floating.gif
  - manual.gif
  - parallax.gif
  - scrim.gif
  - shadow.gif
  - snapping.gif
- - gradle-wrapper.jar
  - gradle-wrapper.properties
- gradle-daemon-jvm.properties
- libs.versions.toml
- - build.gradle.kts
  - proguard-rules.pro
- - build.gradle.kts
- - build.gradle.kts
.editorconfig
.gitignore
AGENTS.md
build.gradle.kts
gradle.properties
gradlew
gradlew.bat
LICENSE
README.md
settings.gradle.kts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/flaringapp/ComposeCollapsingTopBar

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ComposeCollapsingTopBar

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Gradle (Java/Kotlin)

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
JDK (Java) Java/Kotlin 프로젝트를 빌드/실행하려면 필요합니다.
Gradle 레포에 포함된 gradlew(Gradle Wrapper)를 쓰면 Gradle을 따로 설치할 필요가 없습니다.

cd ComposeCollapsingTopBar

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

./gradlew build

Gradle로 빌드를 진행합니다.

✅ BUILD SUCCESSFUL 메시지가 뜨면 성공입니다. build/ 폴더에 결과물이 생성됩니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ComposeCollapsingTopBar

[![Maven Central](https://img.shields.io/maven-central/v/io.github.flaringapp/ComposeCollapsingTopBar)](https://central.sonatype.com/artifact/io.github.flaringapp/ComposeCollapsingTopBar)
[![Build Status](https://img.shields.io/github/actions/workflow/status/patrykandpatrick/vico/build.yml?branch=master)](https://github.com/flaringapp/ComposeCollapsingTopBar/actions)
[![Kotlin](https://img.shields.io/badge/Kotlin-2.3.10-slateblue.svg?logo=kotlin)](http://kotlinlang.org)
[![Compose](https://img.shields.io/badge/Compose-1.10.1-dodgerblue.svg?logo=jetpackcompose)](https://www.jetbrains.com/lp/compose-multiplatform)
![API](https://img.shields.io/badge/API-23%2B-forestgreen.svg)
[![ktlint](https://img.shields.io/badge/ktlint%20code--style-%E2%9D%A4-FF4081)](https://pinterest.github.io/ktlint/)
[![Licence](https://img.shields.io/github/license/flaringapp/ComposeCollapsingTopBar)](https://github.com/flaringapp/ComposeCollapsingTopBar/blob/main/LICENSE)

![badge-Android](https://img.shields.io/badge/Platform-Android-forestgreen)
![badge-iOS](https://img.shields.io/badge/Platform-iOS-silver)
![badge-Desktop](https://img.shields.io/badge/Platform-Desktop-dodgerblue)

If you like this project, :star: star and :loudspeaker: share it!

**ComposeCollapsingTopBar** is the ultimate **Compose Multiplatform** library for creating versatile
collapsing header UIs. It provides the capability to build custom top bars with automatic height
adjustment, featuring common scroll modes, snapping, and offering plenty of customization options.
It's designed with ease of use and optimization in mind while providing features similar to
Android `CoordinatorLayout`.

![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/cover_collapsing_stack.gif)
&nbsp;&nbsp;
![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/cover_collapsing_column.gif)

## Download

Add the dependency to your target module's `build.gradle.kts` file:

```kotlin
dependencies {
    implementation("io.github.flaringapp:ComposeCollapsingTopBar:2.2.0")
}
```

Ensure you've configured repositories in `settings.gradle.kts`:

```kotlin
dependencyResolutionManagement {
    repositories {
        mavenCentral()
    }
}
```

## Usage

You need scrollable content for the collapsing header to work. For the sake of optimization, this
library does something similar to `CoordinatorLayout`: by default, body content is measured as if
the top bar were already collapsed, and then simply offset as the top bar expands and
collapses. That's why you need a `Scaffold`-like wrapper.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed(),
    snapBehavior = rememberCollapsingTopBarSnapBehavior(),
    topBar = {
        TopBarImage()
        TopAppBar()
    },
    body = {
        ContentUnderTopBar()
    },
)
```

If a direct body child must resize together with collapse, `CollapsingTopBarScaffold()` has
`Modifier.resizeWithCollapse()`. Use it only as a targeted override: it causes body remeasurement
during collapse, so the default fixed measurement strategy remains preferred for scrollable content.

<details>
<summary>Resize a body child with collapse</summary>

Use `resizeWithCollapse()` for lightweight direct body children such as overlays or panels that
must track the currently visible body height.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        TopBarImage()
        TopAppBar()
    },
    body = {
        ScrollableContent()
        Overlay(
            modifier = Modifier.resizeWithCollapse(),
        )
    },
)
```

</details>

`CollapsingTopBarScaffold()` is flexible enough to cover a variety of use cases. However, there's
some extra room for customization: you can use `CollapsingTopBar()` as the actual collapsing header,
and implement your own mechanism to control header and content positioning. Feel free to take a
look at the `CollapsingTopBarScaffold()` source code if you decide to do so.

### Scroll modes

|                   Collapse                    |             Collapse and exit              |                    Enter always collapsed                    |
|:---------------------------------------------:|:------------------------------------------:|:------------------------------------------------------------:|
| ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_mode_regular.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_mode_exit.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_mode_enter_always_collapsed.gif) |

> [!TIP]
> For most scroll modes you can also specify whether or not to expand anywhere in the list.

Use a required parameter `scrollMode` of `CollapsingTopBarScaffold()`:

```kotlin
CollapsingTopBarScaffold(
    // ...
    scrollMode = CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed(),
    // ...
)
```

<details>
<summary>Regular collapse</summary>

#### Regular collapse

```kotlin
CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false)
```

The top bar will collapse to the height of the smallest child. It has an option `expandAlways` to
control whether or not to expand anywhere in the list.
</details>

<details>
<summary>Collapse and exit</summary>

#### Collapse and exit

```kotlin
CollapsingTopBarScaffoldScrollMode.collapseAndExit(expandAlways = false)
```

The top bar will collapse to the height of the smallest child and then completely exit outside its
bounds. It has an option `expandAlways` to control whether or not to expand anywhere in the list.
</details>

<details>
<summary>Enter always collapsed</summary>

#### Enter always collapsed

```kotlin
CollapsingTopBarScaffoldScrollMode.enterAlwaysCollapsed()
```

The top bar will collapse to the height of the smallest child and then completely exit outside its
bounds. Then it'll enter collapsed anywhere in the list and fully expand only at the top.
</details>

### Snapping

![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/snapping.gif)

Use a `snapBehavior` parameter of `CollapsingTopBarScaffold()`:

```kotlin
CollapsingTopBarScaffold(
    // ...
    snapBehavior = rememberCollapsingTopBarSnapBehavior(),
    // ...
)
```

You can optionally specify a `threshold` fraction of collapse progress to control the bound of
snapping direction:

```kotlin
rememberCollapsingTopBarSnapBehavior(threshold = 0.75f)
```

### Customization

When using `CollapsingTopBarScaffold`, you get access to a `CollapsingTopBarScope` in the `topBar`
block. It offers a few predefined Modifiers to customize element placement and more.

|            Parallax            |            Floating            |          Progress           |
|:------------------------------:|:------------------------------:|:---------------------------:|
| ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/parallax.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/floating.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/scrim.gif) |

See all supported placement customization Modifiers:

<details>
<summary>Align</summary>

#### Align

```kotlin
Modifier.align(Alignment)
```

Aligns an element within the bounds of `CollapsingTopBar`.

Aligned elements still contribute to minimum height resolution. If you want an aligned element to
behave like an overlay and not affect the collapsed height, combine `align(...)` with
`floating()`.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        SampleTopBarImage()
        AlignmentElement(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .floating(),
            text = "Nebula",
        )
    },
    body = {
        SampleContent()
    },
)
```

> In this example the "Nebula" element is aligned to the bottom end of the top bar and kept out of
> minimum height resolution, so it behaves like an overlay.

</details>

<details>
<summary>Parallax</summary>

#### Parallax

```kotlin
Modifier.parallax()
```

Creates a parallax effect by offsetting an element upward by `ratio` as a fraction of the
collapsible height while the top bar collapses.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        SampleTopBarImage(
            modifier = Modifier.parallax(0.25f),
        )
        SampleTopAppBar(
            containerColor = Color.Transparent,
        )
    },
    body = {
        SampleContent()
    },
)
```

> In this example the top bar image is collapsing with a 25% parallax effect.

</details>

<details>
<summary>Pin</summary>

#### Pin

```kotlin
Modifier.pin(stopAtTop = false)
```

Keeps an element at its regular position until its bottom edge reaches the visible bottom of
`CollapsingTopBar`, then makes it ride upward with the collapsing top bar.

By default, a pinned element continues riding past the top edge. Set `stopAtTop = true` to stop
it at `y = 0`.

`pin(...)` affects placement only and does not change minimum height resolution. Combine it with
`floating()` when the pinned element should behave like an overlay and stay out of collapsed height
calculation.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        SampleTopBarImage()
        PinnedElement(
            modifier = Modifier
                .floating()
                .align(Alignment.BottomEnd)
                .pin(),
        )
        SampleTopAppBar(
            containerColor = Color.Transparent,
        )
    },
    body = {
        SampleContent()
    },
)
```

> In this example the bottom-end element is pinned and keeps riding with the top bar, excluded from
> collapsed height calculation.

</details>

<details>
<summary>Floating</summary>

#### Floating

```kotlin
Modifier.floating()
```

Excludes an element from the collapsed height calculation, allowing it to float and position itself
in any way you want (floating button, indicator, etc). Should be used only in the presence of
other non-floating elements in the top bar.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapseAndExit(expandAlways = false),
    topBar = { topBarState ->
        SampleTopBarImage()
        SampleTopAppBar(
            containerColor = Color.Transparent,
        )
        FloatingButton(
            modifier = Modifier.floating(),
            state = topBarState,
        )
    },
    body = {
        SampleContent()
    },
)
```

> In this example there's a floating button with the `floating` modifier implementing its own
> placement logic using `topBarState`.

</details>

<details>
<summary>Progress</summary>

#### Progress

```kotlin
Modifier.progress { totalProgress, itemProgress -> }
```

Allows you to track the current progress of both the top bar and an element to which this modifier
is applied. As a result, you can create your own transformations of any kind.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = {
        var topBarColorProgress by remember { mutableFloatStateOf(1f) }
        SampleTopBarImage(
            modifier = Modifier.progress { _, itemProgress ->
                topBarColorProgress =
                    itemProgress.coerceAtMost(SCRIM_START_FRACTION) / SCRIM_START_FRACTION
            },
        )
        SampleTopAppBar(
            containerColor = MaterialTheme.colorScheme.surface.copy(
                alpha = lerp(1f, 0f, topBarColorProgress),
            ),
        )
    },
    body = {
        SampleContent()
    },
)
```

> In this example the top app bar dynamically changes its color as the top bar image collapses.

</details>

<details>
<summary>Nested collapse</summary>

#### Nested collapse

```kotlin
Modifier.nestedCollapse()
```

Defines a connection between an element with a custom nested collapsing mechanism and the top bar.
Should be used when creating custom complex collapsing elements, e.g.,
[CollapsingTopBarColumn](#CollapsingTopBarColumn).

</details>

### CollapsingTopBarColumn

A `Column`-like layout that creates an amazing stacking collapse effect with predefined placement
customization options and the possibility to build custom transformations based on collapse
progress.

|              Fully collapsible               |               Partially collapsible               |                 Custom transformations                 |
|:--------------------------------------------:|:-------------------------------------------------:|:------------------------------------------------------:|
| ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_column_full.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_column_partially.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_column_moving_element.gif) |

#### Collapse direction

`CollapsingTopBarColumn` supports two collapse directions:

- `CollapsingTopBarColumnDirection.BottomUp` (default) - starts collapsing with the
  bottommost element sliding under the second last and so on;
- `CollapsingTopBarColumnDirection.TopToBottom` - starts collapsing with the
  topmost element sliding up and so on.

|                     BottomUp                      |                   TopToBottom                   |
|:-------------------------------------------------:|:-----------------------------------------------:|
| ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_column_partially.gif) | ![](https://raw.githubusercontent.com/flaringapp/ComposeCollapsingTopBar/main/docs/assets/collapsing_column_reverse.gif) |

Use a parameter `collapseDirection` of `CollapsingTopBarColumn()`:

```kotlin
CollapsingTopBarColumn(
    state = topBarState,
    collapseDirection = CollapsingTopBarColumnDirection.TopToBottom,
) { /* ... */ }
```

#### Customization

See all supported placement customization Modifiers:

<details>
<summary>Align</summary>

#### Align

```kotlin
Modifier.align(Alignment.Horizontal)
```

Aligns an element horizontally within the width of `CollapsingTopBarColumn`.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = { topBarState ->
        CollapsingTopBarColumn(topBarState) {
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
            )
            AlignmentElement(
                modifier = Modifier.align(Alignment.CenterHorizontally),
            )
        }
    },
    body = {
        SampleContent()
    },
)
```

> In this example the element is aligned to the center of the column.

</details>

<details>
<summary>Not collapsible</summary>

#### Not collapsible

```kotlin
Modifier.notCollapsible()
```

Excludes an element from the collapsing process, so that it remains always visible and just slides
up and down with the collapsing movement.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = { topBarState ->
        CollapsingTopBarColumn(topBarState) {
            SampleTopBarBanner()
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
            )
            CollapsingTopBarVerticalFadingEdge()
            SampleFilterChips()
        }
    },
    body = {
        SampleContent()
    },
)
```

> In this example the top app bar is not collapsible, but every other element is.

</details>

<details>
<summary>Pin when collapsed</summary>

#### Pin when collapsed

```kotlin
Modifier.pinWhenCollapsed()
```

Unlike the default placement behavior that stops sliding an element when it is fully collapsed,
this modifier makes the element continue its movement (pin). Useful if you want an element to
slide all the way up under other transparent elements.

```kotlin
CollapsingTopBarScaffold(
    modifier = modifier,
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = { topBarState ->
        CollapsingTopBarColumn(
            state = topBarState,
            collapseDirection = CollapsingTopBarColumnDirection.TopToBottom,
        ) {
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
            )
            InfoBlock(
                modifier = Modifier.pinWhenCollapsed(),
            )
            SearchBar(
                modifier = Modifier.zIndex(1f),
            )
        }
    },
    body = {
        SampleContent()
    },
)
```

> In this example the `InfoBlock` is pinned when collapsed, and it'll slide under the top app bar
> out of the screen bounds.

</details>

<details>
<summary>Clip to collapse</summary>

#### Clip to collapse

```kotlin
Modifier.clipToCollapse()
```

Clips an element to its bounds as it collapses, so that it's not visible under the following
transparent element.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = true),
    topBar = { topBarState ->
        CollapsingTopBarColumn(
            state = topBarState,
        ) {
            SampleFilterChips(
                modifier = Modifier.clipToCollapse(),
            )
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
                containerColor = Color.Transparent,
            )
            SampleFilterChips(
                modifier = Modifier.clipToCollapse(),
            )
        }
    },
    body = {
        SampleContent()
    },
)
```

> In this example all elements but the top app bar clip themselves to collapse bounds.

</details>

<details>
<summary>Column Progress</summary>

#### Column Progress

```kotlin
Modifier.columnProgress()
```

Allows you to track the current progress of both the top bar column and an element to which this
modifier is applied. As a result, you can create your own transformations of any kind.

```kotlin
CollapsingTopBarScaffold(
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBar = { topBarState ->
        CollapsingTopBarColumn(topBarState) {
            SampleTopAppBar(
                modifier = Modifier.notCollapsible(),
                title = "Column Moving Element",
                onBack = onBack,
            )

var textCollapseProgress by remember {
                mutableFloatStateOf(1f)
            }
            Text(
                modifier = Modifier
                    .columnProgress { _, itemProgress -> textCollapseProgress = itemProgress }
                    .graphicsLayer {
                        alpha = textCollapseProgress
                    },
                text = "Collapsible element",
            )
        }
    },
    body = {
        SampleContent()
    },
)
```

> In this example the `Text` element keeps track of its collapse progress and fades out on collapse.

</details>

### Decorations

`ComposeCollapsingTopBar` also provides small decoration composables to improve collapsing visuals
in certain scenarios.

#### Vertical fading edge

```kotlin
CollapsingTopBarVerticalFadingEdge(
    color = MaterialTheme.colorScheme.surface,
)
```

`CollapsingTopBarVerticalFadingEdge()` draws a vertical fading overlay with zero layout height.
It's useful for smoothing visible overlap between stacked top bar elements in
`CollapsingTopBarColumn` and regular top bar layouts.

### React to state changes

You can easily access `CollapsingTopBarScaffoldState` and its nested states to observe state
changes. For convenience, you can also access `CollapsingTopBarState` from within the `topBar`
block of `CollapsingTopBarScaffold()`. Now just use your imagination to figure out what beautiful
effects to create. :wink:

<details>
<summary>Example</summary>

```kotlin
val state = rememberCollapsingTopBarScaffoldState()
val topBarShadowElevation by animateDpAsState(
    label = "ShadowAnimation",
    targetValue = if (state.topBarState.isCollapsed) 12.dp else 0.dp,
)
CollapsingTopBarScaffold(
    state = state,
    scrollMode = CollapsingTopBarScaffoldScrollMode.collapse(expandAlways = false),
    topBarModifier = Modifier.graphicsLayer {
        shadowElevation = topBarShadowElevation.toPx()
    },
    topBar = {
        SampleTopBarImage()
        SampleTopAppBar()
    },
    body = {
        SampleContent()
    },
)
```

> In this example the top bar drops a shadow that appears with animation as soon as the top bar is
> collapsed.

</details>

#### Working with states

<details>
<summary>CollapsingTopBarScaffoldState</summary>

#### CollapsingTopBarScaffoldState

This is a state holder for top bar layout data that also allows some manual control.

You can easily access the current top bar state with `state.isExpanded` and `state.isCollapsed`.
Or you can programmatically toggle one with `state.expand()` and `state.collapse()` inside
`LaunchedEffect` or a custom coroutine.

If you need more detailed layout data, refer to:

- `topBarState` for collapsing progress;
- `exitState` for exiting progress;
    - note that it's empty unless you use a *scroll mode that supports exiting*.

</details>

<details>
<summary>CollapsingTopBarState</summary>

#### CollapsingTopBarState

Contains information about the collapsing state up until top bar starts exiting (if chosen scroll
mode supports that). Offers state data similar to scaffold: `state.isExpanded` and
`state.isCollapsed`, as well as manual controls: `state.expand()` and `state.collapse()`.

This state also exposes `hasMeasured` to indicate whether the top bar has already received
actual layout measurements.

Comprehensive measurement data is available via `layoutInfo`, such as collapse progress
`layoutInfo.collapseProgress`, collapsed height `layoutInfo.collapsedHeight` etc. Before
`hasMeasured` becomes true, `layoutInfo` contains safe placeholder values rather than actual
measured bounds.

</details>

<details>
<summary>CollapsingTopBarExitState</summary>

#### CollapsingTopBarExitState

> This state only makes sense if you use a scroll mode that supports exiting: `collapseAndExit()`,
> `enterAlwaysCollapsed()`.

Contains information about the top bar exiting state up from when top bar is collapsed. Offers state
data: `state.isFullyEntered` and `state.isFullyExited`, as well as manual controls:
`state.expand()` and `state.collapse()`.

This state exposes current exit offset via `exitHeight`.

</details>

## More examples

Feel free to install a demo [Android](/sample/android), [iOS](/sample/ios), or
[Desktop](/sample/desktop) app and try yourself even more samples!

## Known issues

- On Desktop, a Compose Multiplatform nested scroll bug can prevent the top bar from expanding
  with mouse wheel scrolling when using scroll modes with `expandAlways = false`. See
  [CMP-10236](https://youtrack.jetbrains.com/issue/CMP-10236). The sample app includes a
  [temporary workaround](/sample/shared/src/jvmMain/kotlin/com/flaringapp/compose/topbar/sample/shared/ui/samples/desktopfix/DesktopScrollBoundsNestedScrollFix.jvm.kt)
  that can be copied until Compose fixes the issue.

## Contributing

Please contribute! I will gladly review any pull requests.

## License

ComposeCollapsingTopBar is distributed under the terms of the Apache License (Version 2.0).
See the [license](LICENSE) for more information.