@ -172,89 +172,6 @@ fun TextBox(text: String = "Item") {
< img alt = "Lazy component" src = "lazy_scrollbar.gif" height = "412" / >
< img alt = "Lazy component" src = "lazy_scrollbar.gif" height = "412" / >
## Theme applying
Scrollbars support themes to change their appearance. The example below shows how to use the `DesktopMaterialTheme` appearance for the scrollbar.
```kotlin
import androidx.compose.desktop.DesktopMaterialTheme
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.rememberScrollbarAdapter
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Text
import androidx.compose.foundation.VerticalScrollbar
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Window
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
fun main() = application {
Window(
onCloseRequest = ::exitApplication,
title = "Scrollbars",
state = rememberWindowState(width = 250.dp, height = 400.dp)
) {
DesktopMaterialTheme {
Box(
modifier = Modifier.fillMaxSize()
.background(color = Color(180, 180, 180))
.padding(10.dp)
) {
val state = rememberScrollState(0)
Column(
modifier = Modifier
.verticalScroll(state)
.fillMaxSize()
.padding(end = 12.dp)
) {
for (item in 0..30) {
TextBox("Item #$item")
if (item < 30 ) {
Spacer(modifier = Modifier.height(5.dp))
}
}
}
VerticalScrollbar(
modifier = Modifier.align(Alignment.CenterEnd)
.fillMaxHeight(),
adapter = rememberScrollbarAdapter(state)
)
}
}
}
}
@Composable
fun TextBox(text: String = "Item") {
Box(
modifier = Modifier.height(32.dp)
.fillMaxWidth()
.background(color = Color(0, 0, 0, 20))
.padding(start = 10.dp),
contentAlignment = Alignment.CenterStart
) {
Text(text = text)
}
}
```
< img alt = "Themed scrollbar" src = "themed_scrollbar.gif" height = "412" / >
## Tooltips
## Tooltips
You can add tooltip to any components using `BoxWithTooltip` . Basically `BoxWithTooltip` is a `Box` with the ability to show a tooltip, and has the same arguments and behavior as `Box` .
You can add tooltip to any components using `BoxWithTooltip` . Basically `BoxWithTooltip` is a `Box` with the ability to show a tooltip, and has the same arguments and behavior as `Box` .