Skip to content

Latest commit

 

History

History
428 lines (331 loc) · 18.2 KB

README.md

File metadata and controls

428 lines (331 loc) · 18.2 KB
Raw

KotStep

material API Kotlin Jetpack Compose Hits

💜 KotStep is a Jetpack Compose library that simplifies the creation of customizable step-by-step UI components in your Android applications. It allows you to easily integrate vertical and horizontal stepper components with icons, titles, and various customization options.

Features

  • Multiple stepper styles:
    • Horizontal Numbered Stepper
    • Horizontal Tab Stepper
    • Horizontal Icon Stepper
    • Horizontal Dashed Stepper
    • Vertical Icon Stepper
    • Vertical Tab Stepper
    • Vertical Numbered Stepper
    • Vertical Icon Stepper with Label
    • Vertical Tab Stepper with Label
    • Vertical Numbered Stepper with Label
  • Easy integration with Jetpack Compose
  • Optional checkmark icons for completed steps.
  • Highly customizable appearance and behavior

Installation

Downloads

To get started with KotStep in your Android Jetpack Compose project, Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
	    maven { url 'https://jitpack.io' }
    }
}

Lastly, add the following dependency to your app's build.gradle.kts (Kotlin) or build.gradle (Groovy) file:

Kotlin 
dependencies {
    implementation("com.github.binayshaw7777:KotStep:$currentVersion")
}
Groovy 
dependencies {
    implementation 'com.github.binayshaw7777:KotStep:$currentVersion'
}

Usage

Horizontal Stepper - Tab

HorizontalStepper(
    style = tabHorizontal(
        totalSteps = 3,
        currentStep = 1
    )
) {
	// Do something...
}

tabHorizontal Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Horizontal Stepper - Tab

Horizontal Stepper - Icon

HorizontalStepper(
    style = iconHorizontal(
	currentStep = 1,
        icons = listOf(
            Icons.Default.AccountCircle,
	    ...
            Icons.Default.DateRange
        )
    )
) {
	// Do something...
}

iconHorizontal Parameters

Parameter Description Default Value
icons A list of ImageVectors. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Horizontal Stepper - Icon

Horizontal Stepper - Numbered

HorizontalStepper(
  style = numberedHorizontal(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}

numberedHorizontal Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Horizontal Stepper - Numbered

Horizontal Stepper - Dashed

HorizontalStepper(
  style = dashed(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}

dashed Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Horizontal Stepper - Dashed

Vertical Stepper - Tab

VerticalStepper(
  style = tabVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}

tabVertical Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Tab

Vertical Stepper - Tab with Label

VerticalStepper(
  style = tabVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}

tabVerticalWithLabel Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Tab with Label

Vertical Stepper - Icon

VerticalStepper(
  style = iconVertical(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      ...
      Icons.Default.DateRange
    )
  )
) {
	// Do something...
}

iconVertical Parameters

Parameter Description Default Value
icons A list of ImageVectors. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Icon

Vertical Stepper - Icon with label

VerticalStepper(
  style = iconVerticalWithLabel(
    currentStep = 1,
    icons = listOf(
      Icons.Default.AccountCircle,
      Icons.Default.DateRange
    ),
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}

iconVerticalWithLabel Parameters

Parameter Description Default Value
icons A list of ImageVectors. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Icon

Vertical Stepper - Numbered

VerticalStepper(
  style = numberedVertical(
    totalSteps = 5,
    currentStep = 1
  )
) {
	// Do something...
}

numberedVertical Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Numbered

Vertical Stepper - Numbered with Label

VerticalStepper(
  style = numberedVerticalWithLabel(
    totalSteps = 2,
    currentStep = 1,
    trailingLabels = listOf(
    	{ Text("Hello") },
        { Text("World") }
    )
  )
) {
	// Do something...
}

numberedVerticalWithLabel Parameters

Parameter Description Default Value
totalSteps The total number of steps. -
currentStep The current step that is active. -
stepStyle The style for the step numbers. (Optional) StepStyle()
onStepClick Returns the index of the step clicked. (Optional) {}

Example:
Vertical Stepper - Numbered

StepStyle Parameters

Property Data Type Default Value Description
colors StepDefaults StepDefaults.defaultColors() Colors for the step indicator
stepSize Dp 36.dp Size of the step indicator
stepShape Shape CircleShape Shape of the step indicator
textSize TextUnit 16.sp Text size for the step indicator
iconSize Dp 24.dp Icon size for the step indicator
lineThickness Dp 6.dp Thickness of the line connecting steps
lineSize Dp 20.dp Length of the line connecting steps
stepPadding Dp 0.dp Padding around the step indicator
lineStyle LineStyle LineStyle.SOLID Style of the line connecting steps (SOLID, DASHED, DOTTED)
showCheckMarkOnDone Boolean true Whether to show a checkmark on completed steps
showStrokeOnCurrent Boolean true Whether to show a stroke around the current step
strokeCap StrokeCap StrokeCap.Square Style of the ends of the line connecting steps (ROUNDED, SQUARE)

Reporting Issues and Requesting Features✨

If you encounter any issues or have feature requests, please create a new issue in this repository.

Supporting KotStep ❤️

Support it by joining stargazers for this repository. ⭐
Also follow me for my next creations! 🤩


Star History Chart


--- 
Copyright 2023 binayshaw7777

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.