https://github.com/razaghimahdi/card-drawer
CardDrawer is a library that allows developers to add a custom cool Drawer to their Jetpack Compose apps.
https://github.com/razaghimahdi/card-drawer
android compose drawer jetpack jetpack-compose kotlin modal-drawer navigation navigation-drawer
Last synced: about 1 year ago
JSON representation
CardDrawer is a library that allows developers to add a custom cool Drawer to their Jetpack Compose apps.
- Host: GitHub
- URL: https://github.com/razaghimahdi/card-drawer
- Owner: razaghimahdi
- License: apache-2.0
- Created: 2023-04-03T08:24:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-05-24T07:10:44.000Z (about 3 years ago)
- Last Synced: 2025-04-17T13:30:18.781Z (about 1 year ago)
- Topics: android, compose, drawer, jetpack, jetpack-compose, kotlin, modal-drawer, navigation, navigation-drawer
- Language: Kotlin
- Homepage: https://github.com/razaghimahdi/Card-Drawer
- Size: 2.65 MB
- Stars: 50
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Card Drawer
`CardDrawer` is a library that allows developers to add a custom cool Drawer to their Jetpack
Compose apps. The library provides a customizable drawer that lets users select items.
## Give a Star! ⭐
If you like or are using this project to learn or start your solution, please give it a star. Thanks!
[](https://jitpack.io/#razaghimahdi/Card-Drawer)
| Opened | Closed |
| --- | --- |
| 
| 
|
## Quickstart
Here's a quick example of how to use the library:
1. Add the JitPack repository to your project-level build.gradle or settings.gradle file:
```groovy
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
```
2. Add the library dependency to your app-level build.gradle file:
```groovy
dependencies {
implementation 'com.github.razaghimahdi:Card-Drawer:1.0.0'
}
```
3. Use the CardDrawer in your app:
```kotlin
val drawerState = rememberCardDrawerState(initialValue = CardDrawerValue.Closed)
val coroutineScope = rememberCoroutineScope()
CardDrawer(
drawerState = drawerState,
drawerContent = { DrawerContent(drawerState) }
) {
MainScreen(drawerState)
}
// make it open
coroutineScope.launch { drawerState.open()}
// make it close
coroutineScope.launch { drawerState.close()}
```
4. Customize CardDrawer:
```Kotlin
CardDrawer(
modifier = Modifier,
gesturesEnabled = true,
drawerBackgroundColor = MaterialTheme.colors.surface,
drawerContentColor = contentColorFor(drawerBackgroundColor),
contentCornerSize = 0.dp,
contentBackgroundColor = MaterialTheme.colors.surface,
drawerContent = { DrawerContent(drawerState) },
drawerState = drawerState
) {
MainScreen(drawerState)
}
```
## Example
For a more detailed example, check out
the [example app](https://github.com/razaghimahdi/CardDrawer/blob/master/app/src/main/java/com/razaghimahdi/fullnavigationdrawer/MainActivity.kt)
included in the repository.
## Parameter
CardDrawer has this Parameters:
| Parameter | Description |
| --- | --- |
| `drawerContent` | A Composable function that represents the content inside the drawer. |
| `modifier` | An optional Modifier that can be used to apply additional styling or layout information to the drawer. |
| `drawerState` | A CardDrawerState object that represents the state of the drawer (e.g. open, closed, partially open). |
| `gesturesEnabled` | A Boolean value that determines whether or not the drawer can be interacted with via gestures (e.g. swipe to open/close). |
| `drawerBackgroundColor` | A Color value that specifies the background color to be used for the drawer sheet. |
| `drawerContentColor` | A Color value that specifies the color of the content to be used inside the drawer sheet. Defaults to the contentColorFor function applied to the drawerBackgroundColor. |
| `contentCornerSize` | A Dp value that specifies the size of the shape of the content. |
| `contentBackgroundColor` | A Color value that specifies the background color to be used for the content outside of the drawer. |
| `content` | A Composable function that represents the content outside of the drawer. |
## Screenshots
https://user-images.githubusercontent.com/61207818/230716598-1f08fd4b-3fe4-4d4c-9b44-84174aae00a2.mp4
## Contributing
Contributions are welcome! If you find a bug or would like to create a new feature, please submit a
pull request.
## License
This library is licensed under the MIT License.
See [LICENSE.txt](https://github.com/razaghimahdi/CardDrawer/blob/master/LICENSE)
Developed by Mahdi Razzaghi Ghaleh