jlengrand/compose-multiplatform
1
0
Fork 0
mirror of https://github.com/jlengrand/compose-multiplatform.git synced 2026-03-10 08:11:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Content menu tutorial

Browse Source
This commit is contained in:
Igor Demin
2022-03-08 22:24:44 +03:00
committed by GitHub
parent 22da8d9529
commit 1375acf8cc
1 changed files with 41 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
tutorials/Context_Menu/README.md
View File

@@ -11,7 +11,6 @@ There is out-of-the box context menu support for TextField and Selectable text.
To enable standard context menu for a TextField you just need to put it inside DesktopMaterialTheme:
```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf
@@ -21,15 +20,13 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu
val text = remember {mutableStateOf("Hello!")}
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
}
}
val text = remember { mutableStateOf("Hello!") }
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
}
```
Standard context menu for TextField contains the following items based on text selection: Copy, Cut, Paste, Select All.
@@ -37,7 +34,6 @@ Standard context menu for TextField contains the following items based on text s
Enabling standard context menu for a Text component is similar - you just need to make it selectable:
```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.Text
import androidx.compose.ui.ExperimentalComposeUiApi
@@ -45,12 +41,10 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu
SelectionContainer {
Text("Hello World!")
}
}
}
SelectionContainer {
Text("Hello World!")
}
}
```
Context menu for text contains just Copy action.
@@ -58,7 +52,6 @@ Context menu for text contains just Copy action.
To enable additional context menu items for TextField and Text components, ContextMenuDataProvider and ContextMenuItem elements are used:
```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.foundation.ContextMenuDataProvider
import androidx.compose.foundation.ContextMenuItem
import androidx.compose.foundation.layout.Column
@@ -76,32 +69,30 @@ import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") {
DesktopMaterialTheme { //it is mandatory for Context Menu
val text = remember {mutableStateOf("Hello!")}
Column {
ContextMenuDataProvider(
items = {
listOf(
ContextMenuItem("User-defined Action") {/*do something here*/},
ContextMenuItem("Another user-defined action") {/*do something else*/}
)
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
val text = remember { mutableStateOf("Hello!") }
Column {
ContextMenuDataProvider(
items = {
listOf(
ContextMenuItem("User-defined Action") {/*do something here*/ },
ContextMenuItem("Another user-defined action") {/*do something else*/ }
)
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
Spacer(Modifier.height(16.dp))
Spacer(Modifier.height(16.dp))
SelectionContainer {
Text("Hello World!")
}
SelectionContainer {
Text("Hello World!")
}
}
}
}
}
```
In this example Text/TextField context menus will be extended with two additional items.
@@ -109,48 +100,27 @@ In this example Text/TextField context menus will be extended with two additiona
There is a possibility to create a context menu for an arbitrary application window area. This is implemented using ContextMenuArea API that is
similar to ContextMenuDataProvider.
```kotlin
import androidx.compose.foundation.ContextMenuDataProvider
import androidx.compose.foundation.ContextMenuArea
import androidx.compose.foundation.ContextMenuItem
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.text.selection.SelectionContainer
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.foundation.layout.width
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.singleWindowApplication
@OptIn(ExperimentalComposeUiApi::class, androidx.compose.foundation.ExperimentalFoundationApi::class)
fun main() = singleWindowApplication(title = "Context menu") {
MaterialTheme { //it is mandatory for Context Menu
val text = remember {mutableStateOf("Hello!")}
Column {
ContextMenuDataProvider(
items = {
listOf(
ContextMenuItem("User-defined Action") {/*do something here*/},
ContextMenuItem("Another user-defined action") {/*do something else*/}
)
}
) {
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text(text = "Input") }
)
Spacer(Modifier.height(16.dp))
SelectionContainer {
Text("Hello World!")
}
}
}
ContextMenuArea(items = {
listOf(
ContextMenuItem("User-defined Action") {/*do something here*/},
ContextMenuItem("Another user-defined action") {/*do something else*/}
)
}) {
Box(modifier = Modifier.background(Color.Blue).height(100.dp).width(100.dp))
}
}
```