Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alorma/Compose-Settings

Compose Multiplatform #Compose Settings library
https://github.com/alorma/Compose-Settings

android android-library compose compose-multiplatform settings

Last synced: about 1 month ago
JSON representation

Compose Multiplatform #Compose Settings library

Awesome Lists containing this project

README

        

# Compose Settings - Multiplatform


Badge Android

Badge iOS

Badge JVM

Badge JS

[![Build](https://github.com/alorma/Compose-Settings/actions/workflows/main.yml/badge.svg)](https://github.com/alorma/Compose-Settings/actions/workflows/main.yml)
[![Maven Central](https://img.shields.io/maven-central/v/com.github.alorma.compose-settings/ui-tiles.svg)](https://central.sonatype.com/namespace/com.github.alorma.compose-settings)

Buy Me A Coffee

### Preview

This library provides a set of **Settings** like composable items to help android *Jetpack Compose*
developers build complex settings screens without all the boilerplate.

**Ui tiles**

| Component | Screenshot |
|-------------------------------------------------------|----------------------------------------------------------------------------------|
| [SettingsMenuLink](#SettingsMenuLink) | menu.png |
| [SettingsCheckbox](#SettingsCheckbox) | checkbox.png |
| [SettingsTriStateCheckbox](#SettingsTriStateCheckbox) | triState-checkbox |
| [SettingsRadioButton](#SettingsRadioButton) | radiobutton.png |
| [SettingsSwitch](#SettingsSwitch) | switch.png |
| [SettingsGroup](#SettingsGroup) | group.png |

**Ui tiles expanded**

| Component | Screenshot |
|-----------------------------------|----------------------------------------------------------------|
| [SettingsSlider](#SettingsSlider) | slider.png |

## Install

```
##// groovy
implementation 'com.github.alorma.compose-settings:ui-tiles:$version'
implementation 'com.github.alorma.compose-settings:ui-tiles-extended:$version'

[...]

// kotlin DSL

implementation("com.github.alorma.compose-settings:ui-tiles:$version")
implementation("com.github.alorma.compose-settings:ui-tiles-extended:$version")

[...]

// Catalog versions:

[versions]
compose-settings = "{{libVersion}}"

[libraries]
composeSettings-ui = { group = "com.github.alorma.compose-settings", name = "ui-tiles", version.ref = "compose-settings" }
composeSettings-ui-extended = { group = "com.github.alorma.compose-settings", name = "ui-tiles-extended", version.ref = "compose-settings" }
```

## Usage

##### SettingsMenuLink:

```kotlin
SettingsMenuLink(
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
action = { IconButton() },
onClick = { ... },
)
```

menu.png

##### SettingsCheckbox:

```kotlin
SettingsCheckbox(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
```

checkbox.png

##### SettingsTriStateCheckbox:

```kotlin
SettingsTriStateCheckbox(
state = false / true / null,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
```

triState-checkbox.png

##### SettingsRadioButton:

```kotlin
SettingsRadioButton(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onClick = { },
)
```

radiobutton.png

##### SettingsSwitch:

```kotlin
SettingsSwitch(
state = false / true,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onCheckedChange = { newState: Boolean -> },
)
```

switch.png

##### SettingsSlider:

```kotlin
SettingsSlider(
value = x.xf,
valueRange = X.f..Y.f,
steps = X,
title = { Text(text = "Setting title") },
subtitle = { Text(text = "Setting subtitle") },
modifier = Modifier,
enabled = false / true,
icon = { Icon(...) },
onValueChange = { newValue: Float -> },
)
```

slider.png

##### SettingsGroup

> Updates on `enabled` will be reflected on it's internal components unless you change their `enabled` state manually.

```kotlin
SettingsGroup(
modifier = Modifier,
enabled = false / true,
title = { Text(text = "SettingsGroup") },
contentPadding = PaddingValues(16.dp),
) {
SettingsMenuLink(...)
SettingsCheckbox(...)
SettingsSwitch(...)
...
}
```

group.png