Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dokar3/chiptextfield
Editable chip layout for Compose Multiplatform
https://github.com/dokar3/chiptextfield
android chip compose compose-multiplatform kotlin tag
Last synced: 3 days ago
JSON representation
Editable chip layout for Compose Multiplatform
- Host: GitHub
- URL: https://github.com/dokar3/chiptextfield
- Owner: dokar3
- License: apache-2.0
- Created: 2021-11-10T07:01:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T05:50:14.000Z (4 months ago)
- Last Synced: 2024-07-12T06:58:29.648Z (4 months ago)
- Topics: android, chip, compose, compose-multiplatform, kotlin, tag
- Language: Kotlin
- Homepage:
- Size: 1.39 MB
- Stars: 81
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# ChipTextField
[](https://maven-badges.herokuapp.com/maven-central/io.github.dokar3/chiptextfield)
Editable and customizable chips for Compose Multiplatform. Available on these platforms:
- Android (Jetpack Compose)
- Desktop
- Browser (wasmJs and canvas)
iOS support is currently lacking, see [#131](https://github.com/dokar3/ChipTextField/issues/131).
# Usage
Gradle dependency:
```groovy
// Material 2
implementation "io.github.dokar3:chiptextfield:latest_version"
// Material 3
implementation "io.github.dokar3:chiptextfield-m3:latest_version"
```
**Default (filled style)**
```kotlin
var value by remember { mutableStateOf("Initial text") }
val state = rememberChipTextFieldState()
ChipTextField(
state = state,
value = value,
onValueChange = { value = it },
onSubmit = { text -> Chip(text) },
)
```
Simplified version if do not care about the text field value:
```kotlin
val state = rememberChipTextFieldState()
ChipTextField(
state = state,
onSubmit = ::Chip,
)
```
**Outlined**
```kotlin
val state = rememberChipTextFieldState()
OutlinedChipTextField(
state = state,
onSubmit = ::Chip,
)
```
**Need a classic underline style?**
```kotlin
val state = rememberChipTextFieldState()
ChipTextField(
state = state,
onSubmit = ::Chip,
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent,
),
contentPadding = PaddingValues(bottom = 8.dp),
)
```
**Checkable chips**
```kotlin
class CheckableChip(text: String, isChecked: Boolean = false) : Chip(text) {
var isChecked by mutableStateOf(isChecked)
}
val state = rememberChipTextFieldState(
chips = listOf(CheckableChip(""), /*...*/),
)
BasicChipTextField(
state = state,
onSubmit = { null },
readOnly = true, // Disable editing
chipLeadingIcon = { chip -> CheckIcon(chip) }, // Show check icon if checked
chipTrailingIcon = {}, // Hide default close button
onChipClick = { chip -> chip.isChecked = !chip.isChecked }
)
@Composable
fun CheckIcon(chip: CheckableChip, modifier: Modifier = Modifier) { /*...*/ }
```
**Avatar chips**
```kotlin
class AvatarChip(text: String, val avatarUrl: String) : Chip(text)
val state = rememberChipTextFieldState()
ChipTextField(
state = state,
onSubmit = { AvatarChip(it.text, AVATAR_URL) },
chipLeadingIcon = { chip -> Avatar(chip) } // Load and display avatar
)
@Composable
fun Avatar(chip: AvatarChip, modifier: Modifier = Modifier) { /*...*/ }
```
**Material 3**
```diff
- import com.dokar.chiptextfield.OutlinedChipTextField
+ import com.dokar.chiptextfield.m3.OutlinedChipTextField
```
# License
```
Copyright 2021 dokar3
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.
```