compose 写网页体验
-
新建项目 安装compose multiplaform插件
-
main书写compose页面代码映射到index上
-
mian中编写一个可执行的main方法，变量值参照compose mutableStateOf，标签书写仿照网页，没找到CSS书写，目前能想到的是用style提取到公共方法去调用达到同一管理的目的
fun main() {
var count: Int by mutableStateOf(0)
var str: String by mutableStateOf("Hello, World!")
renderComposable(rootElementId = "root") {
Div({
style {
padding(25.px)
}
}) {
Button(attrs = {
onClick { count -= 1 }
}) {
Text("-")
}
Span({ style { padding(15.px) } }) {
Text("$count")
}
Button(attrs = {
onClick { count += 1 }
}) {
Text("+")
}
TextInput(value = str) {
onInput {
str = it.value
}
}
Table(
attrs = {
style {
border(
width = CSSUnitValueTyped(1f, CSSUnit.px),
color = Color("#333333"),
style = LineStyle.Solid
)
}
}
) {
Thead(attrs = {
TableBackground()
}) {
Tr {
Th(attrs = {
colspan(2)
}) {
Text("The table header")
}
}
}
Tbody {
Tr {
Td(attrs = {
TableBorder()
}, content = { Text("The table body") })
Td(attrs = {
TableBorder()
}, content = { Text("with two columns") })
}
}
}
P {
A(href = "https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table") {
Text("Web/HTML")
}
Br { }
Text(
" You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your(HyperText Markup Language).\n" +
" Using style sheets, you can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content layer\n" +
" separate. This is called "separation of concerns.""
)
Br { }
I(attrs = {
style {
color(Color.yellowgreen)
}
}) {
Text(
" You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your(HyperText Markup Language).\n" +
" Using style sheets, you can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content layer\n" +
" separate. This is called "separation of concerns.""
)
}
Hr { }
Ul {
Li {
A(href = "https://example.com") {
Text("Website")
}
}
Li {
A(href = "mailto:m.bluth@example.com") {
Text("Email")
}
}
Li {
A(href = "tel:+123456789") {
Text("Phone")
}
}
}
Br { }
Address {
A(href = "mailto:jim@rock.com") {
Text("\uD83D\uDCE7 jim@rock.com")
}
Br { }
A(href = "tel:+13115552368") {
Text("\uD83D\uDCDE (311) 555-2368")
}
}
Br { }
// HTMLMap(attrs = {
// title("primary")
// }) {
// Area(attrs = {
// attr("shape", "circle")
// attr("coords", "200,250,25")
// attr("href", "another.htm")
// style {
// backgroundColor(Color("#585858"))
// }
// }) {
// }
// Area(attrs = {
// attr("shape", "default")
// "no href"
// }) {
// }
// }
Img(src = "/icons/rain.png")
Img(src = "icons/rain.png")
Article(attrs = {
classes("forecast")
style {
margin(CSSUnitValueTyped(0f, CSSUnit.px))
padding(CSSUnitValueTyped(0.3f, CSSUnit.rem))
backgroundColor(Color("#eeeeee"))
}
}) {
H1 {
Text("Weather forecast for Seattle")
}
Article(attrs = {
classes("day-forecast")
style {
margin(CSSUnitValueTyped(0.2f, CSSUnit.rem))
fontSize(CSSUnitValueTyped(1f, CSSUnit.rem))
background("right/contain content-box border-box no-repeat url('icons/rain.png') white")
}
}) {
H2 {
Text("03 March 2018")
}
P {
Text("Rain.")
}
}
}
}
}
}
}
private fun AttrsScope<HTMLTableCellElement>.TableBorder() {
style {
border(width = CSSUnitValueTyped(1f, CSSUnit.px), color = Color("#333333"), style = LineStyle.Solid)
}
}
private fun AttrsScope<HTMLTableSectionElement>.TableBackground() {
style {
backgroundColor(Color("#333333"))
color(Color("#ffffff"))
}
}
-
输出结果
