Skip to main content
Version: Next

OCSwipeCard: UI component

The OCSwipeCard is a customizable card views for displaying swipe content card OCSwipeCardContent details. It can include a image, title, subTitle and information item. The appearance of the card can be customized using different swipeCard list, height and background color.

Features​

  • User can pass the desired details to show number of swipeContentCard like image, title and information items
  • In style, user can change cards style properties, background color, height and other content style properties
  • state like swipe left and swipe right
  • OCSwipeCard top item will be move to last item of the list when state become left or right swiping

Card Swipe:​

  • Left
  • Right

How to use OCSwipeCard​

  1. Add the necessary imports:

    import your.package.name.OCSwipeCard

  2. Use the OCSwipeCard within your Composable:

// creating configuration object as per the requirement
val list = mutableListOf(
        OCSwipeCardContentModel(
            id = 1,
            icon = 1,
            title = "Vorsorge1",
            subTitle = "Did you have a Vorsorge regarding your skin? 1",
            buttonText = "Mehr informationen 1"
        ),
        OCSwipeCardContentModel(
            id = 2,
            icon = 2,
            title = "Vorsorge2",
            subTitle = "Did you have a Vorsorge regarding your skin? 2",
            buttonText = "Mehr informationen 2"
        ),
        OCSwipeCardContentModel(
            id = 3,
            icon = 3,
            title = "Vorsorge3",
            subTitle = "Did you have a Vorsorge regarding your skin? 3",
            buttonText = "Mehr informationen 3"
        )
    )

//calling the composable with all the required inputs
@Composable
internal fun OCSwipeCardContentPreview() {
    OCTheme {
        Box(
            modifier = Modifier
                .width(328.dp)
                .height(300.dp),
        ) {
            OCSwipeCard(
                modifier = Modifier,
                itemsList = list,
                styleConfig = OCSwipeCardConfig(),
                onSwipeLeft = {
                    println("Swipe LEFt")
                }
            ) { dataModel ->
                OCSwipeCardContent(
                    modifier = Modifier,
                    item = dataModel,
                    config = OCSwipeCardContentConfig(backgroundColor = OCTheme.colors.cardsInfoCardOnBackgroundDefault)
                )
            }
        }
    }
}

OCSwipeCardContentConfig Parameters:​

  • backgroundColor : backgroundColor can changes for swipe content card
  • titleStyle : Title style of the swipe content card
  • subTitleStyle : SubTitle style of the swipe content card
  • titleColor : Title color of the swipe content card
  • subTitleColor: SubTitleColor of the swipe content card
  • buttonTextStyle: ButtonTextStyle of the swipe content card

OCSwipeCardContentModel Parameters:​

  • icon : Image dispalay on swipe content card
  • title : Title of the swipe content card
  • subTitle : SubTitle of the swipe content card
  • buttonText : button text of the swipe content card
  • buttonLink: button link text of the swipe content card