Shagen Ogandzhanian
3 years ago
22 changed files with 335 additions and 3 deletions
@ -0,0 +1,43 @@
|
||||
plugins { |
||||
id("kotlin-multiplatform") |
||||
id("org.jetbrains.compose") |
||||
} |
||||
|
||||
|
||||
kotlin { |
||||
js(IR) { |
||||
browser() { |
||||
testTask { |
||||
testLogging.showStandardStreams = true |
||||
useKarma { |
||||
useChromeHeadless() |
||||
useFirefox() |
||||
} |
||||
} |
||||
} |
||||
binaries.executable() |
||||
} |
||||
|
||||
sourceSets { |
||||
val commonMain by getting { |
||||
dependencies { |
||||
implementation(compose.runtime) |
||||
implementation(project(":web-core")) |
||||
implementation(kotlin("stdlib-common")) |
||||
} |
||||
} |
||||
|
||||
val jsMain by getting { |
||||
dependencies { |
||||
implementation(kotlin("stdlib-js")) |
||||
implementation(npm("highlight.js", "10.7.2")) |
||||
} |
||||
} |
||||
|
||||
val jsTest by getting { |
||||
dependencies { |
||||
implementation(kotlin("test-js")) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,131 @@
|
||||
package org.jetbrainsc.compose.common.demo |
||||
|
||||
import androidx.compose.runtime.Composable |
||||
import org.jetbrains.compose.common.foundation.layout.Box |
||||
import org.jetbrains.compose.common.ui.Modifier |
||||
import org.jetbrains.compose.common.ui.size |
||||
import org.jetbrains.compose.common.ui.background |
||||
import org.jetbrains.compose.common.ui.padding |
||||
import org.jetbrains.compose.common.ui.unit.dp |
||||
import org.jetbrains.compose.common.core.graphics.Color |
||||
import org.jetbrains.compose.common.foundation.layout.Row |
||||
import org.jetbrains.compose.common.foundation.layout.Column |
||||
import org.jetbrains.compose.common.foundation.layout.Arrangement |
||||
import org.jetbrains.compose.common.ui.Alignment |
||||
import org.jetbrains.compose.common.foundation.border |
||||
import org.jetbrains.compose.common.material.Text |
||||
import org.jetbrains.compose.common.ui.unit.em |
||||
import org.jetbrains.compose.common.material.Slider |
||||
import androidx.compose.runtime.mutableStateOf |
||||
import androidx.compose.runtime.remember |
||||
import org.jetbrains.compose.common.material.Button |
||||
import org.jetbrains.compose.common.foundation.layout.width |
||||
import org.jetbrains.compose.common.foundation.clickable |
||||
import org.jetbrains.compose.common.ui.draw.clip |
||||
import jetbrains.compose.common.shapes.CircleShape |
||||
|
||||
object LayoutSamples { |
||||
@Composable |
||||
fun TwoTexts() { |
||||
Text("Alfred Sisley") |
||||
Text("3 minutes ago") |
||||
} |
||||
|
||||
@Composable |
||||
fun TwoTextsInColumn() { |
||||
val defaultFontSize = 0.79f |
||||
val fontSize = remember { mutableStateOf(defaultFontSize) } |
||||
val subtitleColor = remember { mutableStateOf(Color(0, 0, 200)) } |
||||
Column { |
||||
Text("Alfred Sisley") |
||||
Text( |
||||
"3 minutes ago", |
||||
color = subtitleColor.value, |
||||
size = fontSize.value.em, |
||||
modifier = Modifier.clickable { |
||||
subtitleColor.value = Color.Yellow |
||||
} |
||||
) |
||||
Slider( |
||||
fontSize.value, |
||||
onValueChange = { value -> |
||||
fontSize.value = value |
||||
}, |
||||
valueRange = 0.1f..1.2f, |
||||
steps = 80, |
||||
modifier = Modifier.width(200.dp) |
||||
) |
||||
Button( |
||||
onClick = { |
||||
fontSize.value = defaultFontSize |
||||
} |
||||
) { |
||||
Text("reset view") |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
fun TwoTextsInRow() { |
||||
Text("Alfred Sisley") |
||||
Text("3 minutes ago") |
||||
} |
||||
|
||||
@Composable |
||||
fun Layouts() { |
||||
val horizontalArrangements = listOf(Arrangement.Start, Arrangement.End) |
||||
val verticalAlignments = listOf(Alignment.Top, Alignment.CenterVertically, Alignment.Bottom) |
||||
Column() { |
||||
horizontalArrangements.forEach { horizontalArrangement -> |
||||
verticalAlignments.forEach { verticalAlignment -> |
||||
Row( |
||||
modifier = Modifier |
||||
.size(150.dp) |
||||
.padding(4.dp) |
||||
.border(1.dp, Color(0, 0, 200)) |
||||
.background(Color.Yellow), |
||||
horizontalArrangement = horizontalArrangement, |
||||
verticalAlignment = verticalAlignment |
||||
) { |
||||
Box(Modifier.size(50.dp).background(Color.Red)) { } |
||||
Box(Modifier.size(30.dp).background(Color.Blue)) { } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
fun LayoutsClipped() { |
||||
val horizontalArrangements = listOf(Arrangement.Start, Arrangement.End) |
||||
val verticalAlignments = listOf(Alignment.Top, Alignment.CenterVertically, Alignment.Bottom) |
||||
Column() { |
||||
horizontalArrangements.forEach { horizontalArrangement -> |
||||
verticalAlignments.forEach { verticalAlignment -> |
||||
Row( |
||||
modifier = Modifier |
||||
.size(150.dp) |
||||
.padding(4.dp) |
||||
.border(1.dp, Color(0, 0, 200)) |
||||
.background(Color.Yellow), |
||||
horizontalArrangement = horizontalArrangement, |
||||
verticalAlignment = verticalAlignment |
||||
) { |
||||
Box(Modifier.size(50.dp).background(Color.Red)) { } |
||||
Box( |
||||
Modifier |
||||
.clip(CircleShape) |
||||
.size(30.dp) |
||||
.background(Color.Blue) |
||||
) { } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@Composable |
||||
fun App() { |
||||
LayoutSamples.TwoTextsInColumn() |
||||
} |
||||
@ -0,0 +1,33 @@
|
||||
/* |
||||
* Copyright 2021 The Android Open Source Project |
||||
* |
||||
* 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. |
||||
*/ |
||||
package org.jetbrainsc.compose.common.demo |
||||
|
||||
import androidx.compose.web.renderComposable |
||||
import kotlinx.browser.document |
||||
import org.w3c.dom.HTMLElement |
||||
import androidx.compose.web.css.Style |
||||
import org.jetbrains.compose.web.ui.Styles |
||||
|
||||
fun main() { |
||||
val root = document.getElementById("root") as HTMLElement |
||||
|
||||
renderComposable( |
||||
root = root |
||||
) { |
||||
Style(Styles) |
||||
App() |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@
|
||||
<!-- |
||||
~ Copyright 2021 The Android Open Source Project |
||||
~ |
||||
~ 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. |
||||
--> |
||||
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<title>compose-browser-with-web-demo</title> |
||||
<link type="text/css" rel="stylesheet" href="styles.css"> |
||||
</head> |
||||
<body> |
||||
<h1>with web demo</h1> |
||||
|
||||
<div id="container"> |
||||
<div id = "rootParent"> |
||||
<div id="root"></div> |
||||
</div> |
||||
<div id= "raw"> |
||||
<div> |
||||
<span> |
||||
Alfred Sisley |
||||
</span> |
||||
<span> |
||||
3 minutes ago |
||||
</span> |
||||
<div class="row"> |
||||
<div class="box-a box"></div> |
||||
<div class="box-b box"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<script src="with-web-demo.js"> |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,49 @@
|
||||
/* |
||||
* Copyright 2021 The Android Open Source Project |
||||
* |
||||
* 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. |
||||
*/ |
||||
|
||||
#container { |
||||
display: flex; |
||||
} |
||||
|
||||
#rootParent { |
||||
background: lemonchiffon; |
||||
flex: 1 1 0px; |
||||
} |
||||
|
||||
#raw { |
||||
background: powderblue; |
||||
flex: 1 1 0px; |
||||
} |
||||
|
||||
.row { |
||||
width: 150px; |
||||
height: 150px; |
||||
background: yellow; |
||||
display: flex; |
||||
align-items: end; |
||||
} |
||||
|
||||
.box-a { |
||||
background: red; |
||||
width: 50px; |
||||
height: 50px; |
||||
} |
||||
|
||||
.box-b { |
||||
background: blue; |
||||
width: 30px; |
||||
height: 30px; |
||||
} |
||||
@ -0,0 +1,25 @@
|
||||
/* |
||||
* Copyright 2021 The Android Open Source Project |
||||
* |
||||
* 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. |
||||
*/ |
||||
package org.jetbrainsc.compose.common.demo |
||||
|
||||
import androidx.compose.desktop.Window |
||||
import androidx.compose.ui.unit.IntSize |
||||
|
||||
fun main() { |
||||
Window(title = "Demo", size = IntSize(800, 800)) { |
||||
App() |
||||
} |
||||
} |
||||
Loading…
Reference in new issue