Shagen Ogandzhanian
4 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