Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an example of using window size classes with ChildPanelsMode #804

Merged
merged 3 commits into from
Nov 8, 2024
Merged

Add an example of using window size classes with ChildPanelsMode #804

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
281319d
Updated docs for Child Panels
AJIEKCX Nov 3, 2024
0c31dc6
Fixed review discussions about child-panels docs
AJIEKCX Nov 5, 2024
f2fe2f3
Changed docs about ChildPanels
AJIEKCX Nov 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions docs/extensions/compose.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,12 +294,37 @@ The default `HorizontalChildPanelsLayout` layout places child components (panels
- If the `mode` is `DUAL`, the Main panel is always displayed on the left side, and then the Details and the Extra panels are displayed in a stack on the right side (next to the Main panel).
- If the `mode` is `TRIPLE`, all panels are displayed horizontally side by side.

You can use window size classes from the `material3-window-size-class` package to determine which `ChildPanelsMode` should be used.

```kotlin title="WindowSizeClass example"
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass.Companion.Expanded
import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
import com.arkivanov.decompose.router.panels.ChildPanelsMode
import com.arkivanov.decompose.router.panels.ChildPanelsMode.SINGLE
import com.arkivanov.decompose.router.panels.ChildPanelsMode.DUAL

@Composable
fun ChildPanelsModeChangedEffect(onModeChanged: (ChildPanelsMode) -> Unit) {
val windowSize = calculateWindowSizeClass()
val mode = if (windowSize.widthSizeClass < Expanded) SINGLE else DUAL

DisposableEffect(mode) {
onModeChanged(mode)
onDispose {}
}
}
```

```kotlin title="Basic example"
import androidx.compose.runtime.Composable
import com.arkivanov.decompose.extensions.compose.experimental.panels.ChildPanels
import com.arkivanov.decompose.router.panels.ChildPanelsMode

@Composable
fun PanelsContent(component: PanelsComponent) {
ChildPanelsModeChangedEffect(component::setMode)

ChildPanels(
panels = component.panels,
mainChild = { MainContent(it.instance) },
Expand Down Expand Up @@ -327,9 +352,12 @@ import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.f
import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.plus
import com.arkivanov.decompose.extensions.compose.experimental.stack.animation.scale
import com.arkivanov.decompose.extensions.compose.stack.animation.predictiveback.materialPredictiveBackAnimatable
import com.arkivanov.decompose.router.panels.ChildPanelsMode

@Composable
fun PanelsContent(component: PanelsComponent) {
ChildPanelsModeChangedEffect(component::setMode)

ChildPanels(
panels = component.panels,
mainChild = { MainContent(it.instance) },
Expand Down