-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deployed 5b80b21 with MkDocs version: 1.6.1
- Loading branch information
Showing
4 changed files
with
17 additions
and
10 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| {"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Composables","text":"<p>Please note, this is an experimental repository. It is a Kotlin multiplatform experiment that makes no guarantees about API stability or long term support. None of the works presented here are production tested, and should not be taken as anything more than its face value.</p>"},{"location":"#introduction","title":"Introduction","text":"<p>Composables are a collection of utility methods that build on the Jetpack Compose UI and Foundation packages.</p> <p>They offer APIs for common UI interactions that make UI more delightful. They are summarize below</p> Composable Sticky Headers Collapsing Headers and Scrollbars Pointer Offset Scroll Drag To Dismiss Alignment / ContentScale Interpolation <p>Please see the documentation for more details.</p>"},{"location":"#license","title":"License","text":"<pre><code>Copyright 2023 Adetunji Dahunsi\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n</code></pre>"},{"location":"implementation/collapsing_headers/","title":"Collapsing Headers","text":"<p># Collapsing Header</p> <p>Collapsing headers in the library are achieved with a wrapping Composable enclosing a scrollable layout.</p> <pre><code>@Composable\nfun CollapsingHeader(\n state: CollapsingHeaderState,\n headerContent: @Composable () -> Unit,\n body: @Composable () -> Unit,\n) {\n ...\n}\n</code></pre> <p>It works with any layout in the body composable that supports nested scrolling.</p> Composable Collapsing Headers"},{"location":"implementation/drag_to_dismiss/","title":"Drag To Dismiss","text":"<p># Drag To Dismiss</p> <p>Used for easily implementing the drag to dismiss pattern for media.</p> <pre><code>@Composable\nfun ParentLayout() {\n Child(\n modifier = Modifier\n .dragToDismiss(\n state = dragToDismissState,\n dragThresholdCheck = { offset, _ ->\n offset.getDistanceSquared() > with(density) {\n 240.dp.toPx().let { it * it }\n }\n },\n onDismissed = {\n ...\n },\n )\n )\n ...\n}\n</code></pre> Composable Drag To Dismiss"},{"location":"implementation/interpolation/","title":"Alignment / Content Scale Interpolation","text":"<p># Interpolation</p> <p><code>Alignment</code> and <code>ContentScale</code> are used to help in the layout of composables, however it can be necessary to interpolate between them when they change. <code>interpolate()</code> Composable extension methods are added to help create a seamless transition.</p> <pre><code>@Composable\nfun ParentLayout(\n contentScale: ContentScale,\n alignment: Alignment,\n) {\n Image(\n painter = painter,\n contentScale = contentScale.interpolate(),\n alignment = alignment.interpolate(),\n )\n ...\n}\n</code></pre> Composable Alignment / ContentScale Interpolation"},{"location":"implementation/pointer_offset/","title":"Pointer Offset Scroll","text":"<p># Pointer Offset Scroll Header</p> <p>Pointer offsets are useful for manually scrolling containers with [ScrollableState], when the pointer is already involved in another interaction. For example drag and drop or a long press.</p> <pre><code>@Composable\nfun Modifier.pointerOffsetScroll(\n state: PointerOffsetScrollState,\n) {\n ...\n}\n</code></pre> Composable Pointer Offset Scroll"},{"location":"implementation/scrollbars/","title":"Scrollbars","text":"<p>Scrollbars enable tracking a user's position in the list and fast scrolling through it.</p> <p>For lazy containers, the easiest way to use them is via the <code>scrollbarState</code> extension method:</p> <pre><code>@Composable\nfun Lazy_State.scrollbarState(\n itemsAvailable: Int,\n itemIndex: (Lazy_ItemInfo) -> Int = Lazy_ItemInfo::index,\n): ScrollbarState {\n ...\n}\n</code></pre> <p>Use of the scroll bar follows the following pattern:</p> <pre><code>@Composable\nfun FastScrollbar(\n modifier: Modifier = Modifier,\n state: ScrollbarState,\n scrollInProgress: Boolean,\n orientation: Orientation,\n onThumbMoved: (Float) -> Unit,\n) {\n val interactionSource = remember { MutableInteractionSource() }\n Scrollbar(\n modifier = modifier,\n orientation = orientation,\n interactionSource = interactionSource,\n state = state,\n thumb = {\n FastScrollbarThumb(\n scrollInProgress = scrollInProgress,\n interactionSource = interactionSource,\n orientation = orientation,\n )\n },\n onThumbMoved = onThumbMoved,\n )\n}\n</code></pre> <p>They are implemented for scrollable containers with [ScrollState], lists, grids and staggered grids.</p> Composable Collapsing Headers and Scrollbars"},{"location":"implementation/sticky_headers/","title":"Sticky Headers","text":"<p>Sticky headers in the library are achieved with a wrapping Composable enclosing the lazy layout.</p> <pre><code>@Composable\nfun StickyHeader_(\n state: Lazy_State,\n modifier: Modifier = Modifier,\n isStickyHeaderItem: @DisallowComposableCalls (Lazy_ItemInfo) -> Boolean,\n stickyHeader: @Composable (key: Any?, contentType: Any?) -> Unit,\n content: @Composable () -> Unit\n) {\n ...\n}\n</code></pre> <p>They are implemented for lists, grids and staggered grids.</p> Composable Sticky Headers"}]} | ||
| {"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Composables","text":"<p>Please note, this is an experimental repository. It is a Kotlin multiplatform experiment that makes no guarantees about API stability or long term support. None of the works presented here are production tested, and should not be taken as anything more than its face value.</p>"},{"location":"#introduction","title":"Introduction","text":"<p>Composables are a collection of utility methods that build on the Jetpack Compose UI and Foundation packages.</p> <p>They offer APIs for common UI interactions that make UI more delightful. They are summarize below</p> Composable Sticky Headers Collapsing Headers and Scrollbars Pointer Offset Scroll Drag To Dismiss Alignment / ContentScale Interpolation"},{"location":"#license","title":"License","text":"<pre><code>Copyright 2023 Adetunji Dahunsi\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n</code></pre>"},{"location":"implementation/collapsing_headers/","title":"Collapsing Headers","text":"<p># Collapsing Header</p> <p>Collapsing headers in the library are achieved with a wrapping Composable enclosing a scrollable layout.</p> <pre><code>@Composable\nfun CollapsingHeader(\n state: CollapsingHeaderState,\n headerContent: @Composable () -> Unit,\n body: @Composable () -> Unit,\n) {\n ...\n}\n</code></pre> <p>It works with any layout in the body composable that supports nested scrolling.</p> Composable Collapsing Headers"},{"location":"implementation/drag_to_dismiss/","title":"Drag To Dismiss","text":"<p># Drag To Dismiss</p> <p>Used for easily implementing the drag to dismiss pattern for media.</p> <pre><code>@Composable\nfun ParentLayout() {\n Child(\n modifier = Modifier\n .dragToDismiss(\n state = dragToDismissState,\n dragThresholdCheck = { offset, _ ->\n offset.getDistanceSquared() > with(density) {\n 240.dp.toPx().let { it * it }\n }\n },\n onDismissed = {\n ...\n },\n )\n )\n ...\n}\n</code></pre> Composable Drag To Dismiss"},{"location":"implementation/interpolation/","title":"Alignment / Content Scale Interpolation","text":"<p># Interpolation</p> <p><code>Alignment</code> and <code>ContentScale</code> are used to help in the layout of composables, however it can be necessary to interpolate between them when they change. <code>interpolate()</code> Composable extension methods are added to help create a seamless transition.</p> <pre><code>@Composable\nfun ParentLayout(\n contentScale: ContentScale,\n alignment: Alignment,\n) {\n Image(\n painter = painter,\n contentScale = contentScale.interpolate(),\n alignment = alignment.interpolate(),\n )\n ...\n}\n</code></pre> Composable Alignment / ContentScale Interpolation"},{"location":"implementation/pointer_offset/","title":"Pointer Offset Scroll","text":"<p># Pointer Offset Scroll Header</p> <p>Pointer offsets are useful for manually scrolling containers with [ScrollableState], when the pointer is already involved in another interaction. For example drag and drop or a long press.</p> <pre><code>@Composable\nfun Modifier.pointerOffsetScroll(\n state: PointerOffsetScrollState,\n) {\n ...\n}\n</code></pre> Composable Pointer Offset Scroll"},{"location":"implementation/scrollbars/","title":"Scrollbars","text":"<p>Scrollbars enable tracking a user's position in the list and fast scrolling through it.</p> <p>For lazy containers, the easiest way to use them is via the <code>scrollbarState</code> extension method:</p> <pre><code>@Composable\nfun Lazy_State.scrollbarState(\n itemsAvailable: Int,\n itemIndex: (Lazy_ItemInfo) -> Int = Lazy_ItemInfo::index,\n): ScrollbarState {\n ...\n}\n</code></pre> <p>Use of the scroll bar follows the following pattern:</p> <pre><code>@Composable\nfun FastScrollbar(\n modifier: Modifier = Modifier,\n state: ScrollbarState,\n scrollInProgress: Boolean,\n orientation: Orientation,\n onThumbMoved: (Float) -> Unit,\n) {\n val interactionSource = remember { MutableInteractionSource() }\n Scrollbar(\n modifier = modifier,\n orientation = orientation,\n interactionSource = interactionSource,\n state = state,\n thumb = {\n FastScrollbarThumb(\n scrollInProgress = scrollInProgress,\n interactionSource = interactionSource,\n orientation = orientation,\n )\n },\n onThumbMoved = onThumbMoved,\n )\n}\n</code></pre> <p>They are implemented for scrollable containers with [ScrollState], lists, grids and staggered grids.</p> Composable Collapsing Headers and Scrollbars"},{"location":"implementation/sticky_headers/","title":"Sticky Headers","text":"<p>Sticky headers in the library are achieved with a wrapping Composable enclosing the lazy layout.</p> <pre><code>@Composable\nfun StickyHeader_(\n state: Lazy_State,\n modifier: Modifier = Modifier,\n isStickyHeaderItem: @DisallowComposableCalls (Lazy_ItemInfo) -> Boolean,\n stickyHeader: @Composable (key: Any?, contentType: Any?) -> Unit,\n content: @Composable () -> Unit\n) {\n ...\n}\n</code></pre> <p>They are implemented for lists, grids and staggered grids.</p> Composable Sticky Headers"}]} |