得到

Jetpack-Compose-Playground/docs/foundation/basictextfield.md

@@ -0,0 +1,19 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# BasicTextField
+
+BasicTextField can be used to insert text. See [TextField](../material/textfield.md) for a material version.
+
+<p align="center">
+  <img src ="{{ site.images }}/foundation/basictextfield/basictextfield.png"  />
+</p>
+
+```kotlin
+--8<-- "foundation/basictextfield/BasicTextFieldDemo.kt:func"
+```
+
+-------------
+## See also:
+* [Full Example Code]({{ site.samplefolder }}/foundation/basictextfield/BasicTextFieldDemo.kt)

Jetpack-Compose-Playground/docs/foundation/canvas.md

@@ -0,0 +1,39 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# Canvas
+A Canvas is a Composable that allows you to draw inside of it.
+
+## How to draw on Canvas
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/canvas/CanvasDrawExample.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Preview(showBackground = true)
+@Composable
+fun CanvasDrawExample() {
+    Canvas(modifier = Modifier.fillMaxSize()) {
+        drawRect(Color.Blue, topLeft = Offset(0f, 0f), size = Size(this.size.width, 55f))
+        drawCircle(Color.Red, center = Offset(50f, 200f), radius = 40f)
+        drawLine(
+            Color.Green, Offset(20f, 0f),
+            Offset(200f, 200f), strokeWidth = 5f
+        )
+
+        drawArc(
+            Color.Black,
+            0f,
+            60f,
+            useCenter = true,
+            size = Size(300f, 300f),
+            topLeft = Offset(60f, 60f)
+        )
+    }
+}
+```
+
+## See also:
+* [Full Example Code]({{ site.samplefolder }}/foundation/CanvasDrawExample.kt)

Jetpack-Compose-Playground/docs/foundation/image.md

@@ -0,0 +1,33 @@
+<!---
+This is the API of version 1.2.0
+-->
+# Image
+
+Image is used to display Images. It's similar to an ImageView in the classic Android View system.
+
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/image/imagedemo.png" height=100 width=300 />
+</p>
+
+
+## Load Image
+You can use **painterResource** to load an image from the resources
+
+```kotlin
+@Composable
+fun ImageResourceDemo() {
+    val image: Painter = painterResource(id = R.drawable.composelogo)
+    Image(painter = image,contentDescription = "")
+}
+```
+
+
+<hr>
+
+## See also:
+
+* [Full Example Code]({{ site.samplefolder }}/foundation/ImageResourceDemo.kt)
+
+
+

Jetpack-Compose-Playground/docs/foundation/layout/boxwithconstraints.md

@@ -0,0 +1,53 @@
+<!---
+This is the API of version 1.2.0
+-->
+# BoxWithConstraints
+
+BoxWithConstraints is a layout similar to the [Box](../../../layout/box) layout, but it has the advantage that you can get the minimum/maximum available width and height for the Composable on the screen.
+You can use it to show a different content depending on the available space.
+
+Inside the scope of BoxWithConstraints you have access to the BoxWithConstraintsScope. With it you can get the **minWidth**, **maxWidth**, **minHeight**, **maxHeight** in dp and **constraints** in pixels.
+
+## Example:
+<p align="center">
+  <img src ="../{{ site.images }}/foundation/layout/boxwithconstraints/boxwithconstraints.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun BoxWithConstraintsDemo() {
+    Column {
+        Column {
+            MyBoxWithConstraintsDemo()
+        }
+
+        Text("Here we set the size to 150.dp", modifier = Modifier.padding(top = 20.dp))
+        Column(modifier = Modifier.size(150.dp)) {
+            MyBoxWithConstraintsDemo()
+        }
+    }
+}
+
+@Composable
+private fun MyBoxWithConstraintsDemo() {
+    BoxWithConstraints {
+        val boxWithConstraintsScope = this
+        //You can use this scope to get the minWidth, maxWidth, minHeight, maxHeight in dp and constraints
+
+        Column {
+            if (boxWithConstraintsScope.maxHeight >= 200.dp) {
+                Text(
+                    "This is only visible when the maxHeight is >= 200.dp",
+                    style = TextStyle(fontSize = 20.sp)
+                )
+            }
+            Text("minHeight: ${boxWithConstraintsScope.minHeight}, maxHeight: ${boxWithConstraintsScope.maxHeight},  minWidth: ${boxWithConstraintsScope.minWidth} maxWidth: ${boxWithConstraintsScope.maxWidth}")
+        }
+    }
+}
+```
+
+
+## See also:
+* [Official Docs]({{ site.composedoc }}/foundation/layout/package-summary#BoxWithConstraints(androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Boolean,kotlin.Function1))
+* [Full Example Code]({{ site.samplefolder }}/foundation/layout/BoxWithConstraintsExample.kt)

Jetpack-Compose-Playground/docs/foundation/layout/spacer.md

@@ -0,0 +1,28 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# Spacer
+
+Spacer is a Composable that can be used when you want to add an additional space between Composables
+
+<p align="center">
+  <img src ="../{{ site.images }}/foundation/layout/spacer/spacer.png" height=50 width=50 style="border: 1px solid black;" />
+</p>
+
+## Example
+
+```kotlin
+@Composable
+fun SpacerDemo() {
+    Column {
+        Text("Hello")
+        Spacer(modifier = Modifier.size(30.dp))
+        Text("World")
+    }
+}
+```
+
+
+## See also:
+* [Full Example Code]({{ site.samplefolder }}/foundation/layout/SpacerDemo.kt)

Jetpack-Compose-Playground/docs/foundation/lazycolumn.md

@@ -0,0 +1,50 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# LazyColumn
+
+A [LazyColumn](https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/package-summary#lazycolumn) is a vertically scrolling list that only composes and lays out the currently visible items.
+It's similar to a Recyclerview in the classic Android View system.
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/lazycolumnitems.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun LazyColumnDemo() {
+    val list = listOf(
+        "A", "B", "C", "D"
+    ) + ((0..100).map { it.toString() })
+    LazyColumn(modifier = Modifier.fillMaxHeight()) {
+        items(items = list, itemContent = { item ->
+            Log.d("COMPOSE", "This get rendered $item")
+            when (item) {
+                "A" -> {
+                    Text(text = item, style = TextStyle(fontSize = 80.sp))
+                }
+                "B" -> {
+                    Button(onClick = {}) {
+                        Text(text = item, style = TextStyle(fontSize = 80.sp))
+                    }
+                }
+                "C" -> {
+                    //Do Nothing
+                }
+                "D" -> {
+                    Text(text = item)
+                }
+                else -> {
+                    Text(text = item, style = TextStyle(fontSize = 80.sp))
+                }
+            }
+        })
+    }
+}
+```
+
+## See also:
+* [Official Docs]({{ site.composedoc }}/foundation/lazy/package-summary#lazycolumn)
+* [Full Example Code]({{ site.samplefolder }}/foundation/LazyColumnDemo.kt)
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1ANt65eoNhQ" title="Lazy layouts in Compose" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Jetpack-Compose-Playground/docs/foundation/lazyrow.md

@@ -0,0 +1,54 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# LazyRow
+
+A [LazyRow]({{ site.composedoc }}/foundation/lazy/package-summary#lazyrow) is a horizontal scrolling list that only composes and lays out the currently visible items.
+It's similar to a horizontal Recyclerview in the classic Android View system.
+
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/lazyrow/lazyrow.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun LazyRowDemo() {
+    val list = listOf(
+        "A", "B", "C", "D"
+    ) + ((0..100).map { it.toString() })
+    LazyRow(modifier = Modifier.fillMaxHeight()) {
+        items(items = list, itemContent = { item ->
+            Log.d("COMPOSE", "This get rendered $item")
+            when (item) {
+                "A" -> {
+                    Text(text = item, style = TextStyle(fontSize = 80.sp))
+                }
+                "B" -> {
+                    Button(onClick = {}) {
+                        Text(text = item, style = TextStyle(fontSize = 80.sp))
+                    }
+                }
+                "C" -> {
+                    //Do Nothing
+                }
+                "D" -> {
+                    Text(text = item)
+                }
+                else -> {
+                    Text(text = item, style = TextStyle(fontSize = 80.sp))
+                }
+            }
+        })
+    }
+}
+```
+
+## See also:
+* [Official Docs]({{ site.composedoc }}/foundation/lazy/package-summary#lazyrow)
+* [Full Example Code]({{ site.samplefolder }}/foundation/LazyRowDemo.kt)
+
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1ANt65eoNhQ" title="Lazy layouts in Compose" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+[Lazy and amazy – Lazy layouts in Compose](https://www.droidcon.com/2022/08/01/lazy-and-amazy-lazy-layouts-in-compose/)

Jetpack-Compose-Playground/docs/foundation/lazyverticalgrid.md

@@ -0,0 +1,69 @@
+<!---
+This is the API of version 1.2.0
+-->
+
+# LazyVerticalGrid
+
+Jetpack Compose provides an API for displaying grid or grid elements.
+
+# Example
+
+To arrange list items in a grid, ``LazyVerticalGrid`` provides a cells parameter that controls how cells are formed into columns.
+The following example displays the items in a grid, using ``GridCells.Adaptive`` to set the width of each column at least 128.dp:
+
+
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/lazyverticalgrid/lazyverticalgrid.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun LazyVerticalGridDemo(){
+    val list = (1..10).map { it.toString() }
+
+    LazyVerticalGrid(
+        columns = GridCells.Adaptive(128.dp),
+
+        // content padding
+        contentPadding = PaddingValues(
+            start = 12.dp,
+            top = 16.dp,
+            end = 12.dp,
+            bottom = 16.dp
+        ),
+        content = {
+            items(list.size) { index ->
+                Card(
+                    backgroundColor = Color.Red,
+                    modifier = Modifier
+                        .padding(4.dp)
+                        .fillMaxWidth(),
+                    elevation = 8.dp,
+                ) {
+                    Text(
+                        text = list[index],
+                        fontWeight = FontWeight.Bold,
+                        fontSize = 30.sp,
+                        color = Color(0xFFFFFFFF),
+                        textAlign = TextAlign.Center,
+                        modifier = Modifier.padding(16.dp)
+                    )
+                }
+            }
+        }
+    )
+}
+```
+
+Apart from ``GridCells.Adaptive`` there are other types of cells that provide the number of columns per row. As follows
+```
+colums = GridCells.Fixed(2)
+```
+The above code will display 2 columns in 1 row.
+
+
+
+## See also:
+* [Official Docs]({{ site.composedoc }}/foundation/lazy/package-summary#LazyVerticalGrid)
+* [Full Example Code]({{ site.samplefolder }}/foundation/LazyVerticalGridDemo.kt)

Jetpack-Compose-Playground/docs/foundation/shape.md

@@ -0,0 +1,103 @@
+<!---
+This is the API of version 1.2.0
+-->
+# Shape
+A Shape can be used to draw a Composable in specific shape.
+
+## RectangleShape
+
+<p align="center">
+  <img src ="{{ site.images }}/foundation/shape/rectangleshape.png"  />
+</p>
+
+A shape describing the rectangle.
+
+```kotlin
+@Composable
+fun RectangleShapeDemo(){
+    ExampleBox(shape = RectangleShape)
+}
+
+@Composable
+fun ExampleBox(shape: Shape){
+    Column(modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)) {
+        Box(
+            modifier = Modifier.size(100.dp).clip(shape).background(Color.Red)
+        )
+    }
+}
+```
+
+## CircleShape
+
+<p align="center">
+  <img src ="{{ site.images }}/foundation/shape/circleshape.png"  />
+</p>
+
+Circular Shape with all the corners sized as the 50 percent of the shape size.
+
+```kotlin
+@Composable
+fun CircleShapeDemo(){
+    ExampleBox(shape = CircleShape)
+}
+
+@Composable
+fun ExampleBox(shape: Shape){
+    Column(modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)) {
+        Box(
+            modifier = Modifier.size(100.dp).clip(shape).background(Color.Red)
+        )
+    }
+}
+```
+
+## RoundedCornerShape
+
+<p align="center">
+  <img src ="{{ site.images }}/foundation/shape/roundedcornershape.png"  />
+</p>
+
+A shape describing the rectangle with rounded corners.
+
+```kotlin
+@Composable
+fun RoundedCornerShapeDemo(){
+    ExampleBox(shape = RoundedCornerShape(10.dp))
+}
+
+@Composable
+fun ExampleBox(shape: Shape){
+    Column(modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)) {
+        Box(
+            modifier = Modifier.size(100.dp).clip(shape).background(Color.Red)
+        )
+    }
+}
+```
+
+## CutCornerShape
+<p align="center">
+  <img src ="{{ site.images }}/foundation/shape/cutcornershape.png"  />
+</p>
+
+A shape describing the rectangle with cut corners.
+
+```kotlin
+@Composable
+fun CutCornerShapeDemo(){
+    ExampleBox(shape = CutCornerShape(10.dp))
+}
+
+@Composable
+fun ExampleBox(shape: Shape){
+    Column(modifier = Modifier.fillMaxWidth().wrapContentSize(Alignment.Center)) {
+        Box(
+            modifier = Modifier.size(100.dp).clip(shape).background(Color.Red)
+        )
+    }
+}
+```
+
+## How to draw a custom shape?
+[How to create a custom shape](../cookbook/how_to_create_custom_shape.md)

Jetpack-Compose-Playground/docs/foundation/text.md

@@ -0,0 +1,125 @@
+<!---
+This is the API of version 1.2.0
+-->
+# Text
+
+You can use **Text** to display text. You can use the **style** argument to define things like textdecoration or fontfamily.
+
+
+<p align="left">
+  <img src ="{{ site.images }}/foundation/text/TextExample.png" height=100 width=300 />
+</p>
+
+```kotlin
+@Composable
+fun TextExample(){
+     Column {
+            Text("Just Text")
+            Text("Text with cursive font", style = TextStyle(fontFamily = FontFamily.Cursive))
+            Text(
+                text = "Text with LineThrough",
+                style = TextStyle(textDecoration = TextDecoration.LineThrough)
+            )
+            Text(
+                text = "Text with underline",
+                style = TextStyle(textDecoration = TextDecoration.Underline)
+            )
+            Text(
+                text = "Text with underline, linethrough and bold",
+                style = TextStyle(
+                    textDecoration = TextDecoration.combine(
+                        listOf(
+                            TextDecoration.Underline,
+                            TextDecoration.LineThrough
+                        )
+                    ), fontWeight = FontWeight.Bold
+                )
+            )
+        }
+}
+```
+
+# Working with Text
+
+## Normal text
+<p align="center">
+  <img src ="{{ site.images }}/foundation/text/normal_text.png"  />
+</p>
+
+```kotlin
+@Composable
+fun NormalTextExample(){
+    Text("Just Text")
+}
+```
+
+## Cursive text
+<p align="center">
+  <img src ="{{ site.images }}/foundation/text/cursive_text.png"  />
+</p>
+
+```kotlin
+@Composable
+fun CursiveTextExample(){
+    Text("Text with cursive font", style = TextStyle(fontFamily = Cursive))
+}
+```
+
+## Text with LineThrough
+<p align="center">
+  <img src ="{{ site.images }}/foundation/text/linethrough_text.png"  />
+</p>
+
+```kotlin
+@Composable
+fun TextWithLineThroughExample(){
+    Text(
+        text = "Text with LineThrough",
+        style = TextStyle(textDecoration = TextDecoration.LineThrough)
+    )
+}
+```
+
+## Text with underline
+<p align="center">
+  <img src ="{{ site.images }}/foundation/text/underline_text.png"  />
+</p>
+
+```kotlin
+@Composable
+fun TextWithUnderline(){
+    Text(
+        text = "Text with underline",
+        style = TextStyle(textDecoration = TextDecoration.Underline)
+    )
+}
+```
+
+## Text with underline, bold and linethrough
+<p align="center">
+  <img src ="{{ site.images }}/foundation/text/underline_bold_linethrough_text.png"  />
+</p>
+
+```kotlin
+@Composable
+fun TextWithUnderlineStrikeThroughAndBold(){
+    Text(
+        text = "Text with underline, linethrough and bold",
+        style = TextStyle(
+            textDecoration = TextDecoration.combine(
+                listOf(
+                    TextDecoration.Underline,
+                    TextDecoration.LineThrough
+                )
+            ), fontWeight = FontWeight.Bold
+        )
+    )
+}
+```
+
+
+## See also:
+* [Full Example Code]({{ site.samplefolder }}/foundation/TextExample.kt)
+* [Write it down: Using text in Jetpack Compose](https://www.droidcon.com/2022/08/01/write-it-down-using-text-in-jetpack-compose/))
+
+