OCOnboardingCard and OCOnboardingCardSlider

These are composable functions from Jetpack Compose used in creating Onboarding Cards for our application.

OCOnboardingCard Usage

• data: An OCOnboardingCardModelConfig data model.
• modifier: A Modifier to apply to the card. Default is Modifier.
• onClick: A callback function triggered when buttons in a card are clicked.
• cardCornerRadius: Corner radius of the card. Default is null.
• isTitleColorChange: A boolean to determine if title color should change. Default is false.

OCOnboardingCardSlider Usage

• modifier: A Modifier to apply to the CardSlider. Default is Modifier.
• pageState: A PagerState object representing current page state.
• focused: A boolean to set if the page is focused. Default is false.
• itemsList: A list of OCOnboardingCardModelConfig items.
• doneButtonText: A string for the text of done button. Default is null.
• content: A composable (item, index, pagerHeight, action) lambda function that provides its content.

Usage

 @Composable
 fun OCOnboardingScreen() {
    val pagerState = rememberPagerState(pageCount = onboardingItemsList.size)

     OCOnboardingCardSlider(
         modifier = Modifier,
         pageState = pagerState,
         itemsList = onboardingItemsList,
         doneButtonText = "Done",
     ) { item, index, pagerHeight, action -> 
         OCOnboardingCard(
            data = item,
            modifier = Modifier,
            onClick = action,
        )
     }
}

Details

OCOnboardingCard creates a card for onboarding with a title, description and buttons designed with provided style. On button click, the onClick function is called with an Action indicating which button was clicked (Next, Back or Done).

OCOnboardingCardSlider works with a list of OCOnboardingCard Models and provides a slider functionality to navigate through them. It uses a PagerState to control the current page in view. focused adds some additional styling to the page indicator when the page is in focus.

The content parameter receives a composable function that should be used to populate each page on the slider. The getUpdatedItemModel() function generates the data model for each page in the card slider with custom configurations. The doneButtonText parameter receives a string to set the text on the Done button. If doneButtonText is not provided, Done button is not displayed.