kotlin
@Composable
fun MyComponent(
displayString: String
) {
Text(displayString)
}
@Composable
fun MyComponent(
displayString: String
) {
Text(displayString)
}
struct MyComponent: View {
var displayString: String
var body: some View {
Text(displayString)
}
}
<template>
<div>{{ displayString }}</div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
displayString: String
});
</script>
@Composable
fun ConditionalComponent(condition: Boolean) {
if (condition) {
Text("Condition is true")
} else {
Text("Condition is false")
}
}
// Usage
ConditionalComponent(condition = true)
struct ConditionalComponent: View {
let condition: Bool
var body: some View {
Group {
if condition {
Text("Condition is true")
} else {
Text("Condition is false")
}
}
}
}
// Usage
ConditionalComponent(condition: true)
<template>
<p v-if="condition">Condition is true</p>
<p v-else>Condition is false</p>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
condition: Boolean
});
</script>
@Composable
fun Parent(data: String) {
IntermediateComponent(data = data)
}
@Composable
fun IntermediateComponent(data: String) {
ChildComponent(data = data)
}
@Composable
fun ChildComponent(data: String) {
Text("Received data: $data")
}
// Usage
Parent(data = "Some data")
struct Parent: View {
let data: String
var body: some View {
IntermediateComponent(data: data)
}
}
struct IntermediateComponent: View {
let data: String
var body: some View {
ChildComponent(data: data)
}
}
struct ChildComponent: View {
let data: String
var body: some View {
Text("Received data: \(data)")
}
}
// Usage
Parent(data: "Some data")
<template>
<intermediate-component :data="data" />
</template>
<script setup>
import { defineProps } from 'vue';
import IntermediateComponent from './IntermediateComponent.vue';
const props = defineProps({
data: String
});
</script>
@Composable
fun ClickableComponent() {
var clicked by remember { mutableStateOf(false) }
Button(onClick = { clicked = true }) {
Text(if (clicked) "Button clicked" else "Click me")
}
}
struct ClickableComponent: View {
@State private var clicked = false
var body: some View {
Button(action: {
clicked = true
}) {
Text(clicked ? "Button clicked" : "Click me")
}
}
}
<template>
<button @click="setClicked">
{{ clicked ? "Button clicked" : "Click me" }}
</button>
</template>
<script setup>
import { ref } from 'vue';
const clicked = ref(false);
function setClicked() {
clicked.value = true;
}
</script>
@Composable
fun TextInputComponent() {
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { newText -> text = newText },
label = { Text("Enter text") }
)
}
struct TextInputComponent: View {
@State private var text = ""
var body: some View {
TextField("Enter text", text: $text)
}
}
<template>
<input
type="text"
v-model="text"
placeholder="Enter text"
/>
</template>
<script setup>
import { ref } from 'vue';
const text = ref('');
</script>
@Composable
fun ExampleComponent() {
Text("Hello, World!")
}
@Preview(showBackground = true)
@Composable
fun ExampleComponentPreview() {
ExampleComponent()
}
Additionally, you can also use Showkase, an open source library by Airbnb that allows you to view themes preview functions in an auto-generated component browser that can be viewed on an Android device.
struct ExampleComponent: View {
var body: some View {
Text("Hello, World!")
}
}
struct ExampleComponent_Previews: PreviewProvider {
static var previews: some View {
ExampleComponent()
}
}
Vue.js doesn't have a built-in preview feature. However, you can use a tool like Storybook to create previews for your components in a separate development environment.
@Composable
fun ListComponent(items: List<String>) {
LazyColumn {
items(items) { item ->
Text(item)
}
}
}
// Usage
val items = listOf("Item 1", "Item 2", "Item 3")
ListComponent(items = items)
struct ListComponent: View {
let items: [String]
var body: some View {
List(items, id: \.self) { item in
Text(item)
}
}
}
// Usage
let items = ["Item 1", "Item 2", "Item 3"]
ListComponent(items: items)
<template>
<ul>
<li v-for="item in items" :key="item">
{{ item }}
</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
items: Array
});
</script>
<!-- Usage -->
<list-component :items="['Item 1', 'Item 2', 'Item 3']"></list-component>
data class Person(val name: String, val age: Int, val id: String)
@Composable
fun ItemKeysExample(items: List<Person>) {
LazyColumn {
items(items, key = { person -> person.id }) { person ->
Text("Name: ${person.name}, Age: ${person.age}")
}
}
}
struct Person: Identifiable {
let name: String
let age: Int
let id: String
}
struct ItemKeysExample: View {
let items: [Person]
var body: some View {
List(items) { person in
Text("Name: \(person.name), Age: \(person.age)")
}
}
}
// Usage
ItemKeysExample(items: [Person(name: "John", age: 30, id: "1"), Person(name: "Jane", age: 28, id: "2"), Person(name: "Bob", age: 25, id: "3")])
<template>
<ul>
<li v-for="person in items" :key="person.id">
Name: {{ person.name }}, Age: {{ person.age }}
</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
items: Array
});
</script>
<!-- Usage -->
<item-keys-example
:items="[
{ name: 'John', age: 30, id: '1' },
{ name: 'Jane', age: 28, id: '2' },
{ name: 'Bob', age: 25, id: '3' }
]"
></item-keys-example>
@Composable
fun Parent(
header: @Composable () -> Unit,
content: @Composable () -> Unit
) {
Column {
header()
content()
}
}
// Usage
Parent(
header = { Text("Header") },
content = { Child() }
)
@Composable
fun Child() {
Text("Child Content")
}
struct Parent<Header: View, Content: View>: View {
let header: Header
let content: Content
var body: some View {
VStack {
header
content
}
}
}
// Usage
Parent(
header: Text("Header"),
content: Child()
)
struct Child: View {
var body: some View {
Text("Child Content")
}
}
// ParentComponent.vue
<template>
<div>
<slot name="header"></slot>
<slot name="content"></slot>
</div>
</template>
// ChildComponent.vue
<template>
<p>Child Content</p>
</template>
// Usage
<parent-component>
<template v-slot:header>
<h1>Header</h1>
</template>
<template v-slot:content>
<child />
</template>
</parent-component>
@Composable
fun ModifiersExample() {
Text(
"Hello, World!",
modifier = Modifier
.padding(16.dp)
.background(Color.Blue)
)
}
struct ModifiersExample: View {
var body: some View {
Text("Hello, World!")
.padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
.background(Color.blue)
}
}
Vue.js doesn't have a direct analog to modifiers in Jetpack Compose or SwiftUI. Instead, you can use inline styles or CSS classes.
<template>
<div :style="style">Hello, World!</div>
</template>
<script setup>
import { reactive } from 'vue';
const style = reactive({
padding: '16px',
backgroundColor: 'blue',
color: 'white'
});
</script>
@Composable
fun Counter() {
var count by remember { mutableStateOf(0) }
Button(onClick = { count = count + 1 }) {
Text("Count: $count")
}
}
struct Counter: View {
@State private var count = 0
var body: some View {
Button(action: {
count += 1
}) {
Text("Count: \(count)")
}
}
}
<template>
<button @click="incrementCount">
Count: {{ count }}
</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
function incrementCount() {
count.value++;
}
</script>
val CustomLocal = compositionLocalOf<String> { "Default data" }
@Composable
fun Parent(data: String) {
CompositionLocalProvider(CustomLocal provides data) {
Intermediate()
}
}
@Composable
fun Intermediate() {
Child()
}
@Composable
fun Child() {
val data = CustomLocal.current
Text("Received data: $data")
}
// Usage
Parent(data = "Some data")
struct CustomEnvironmentKey: EnvironmentKey {
static let defaultValue: String = ""
}
extension EnvironmentValues {
var customData: String {
get { self[CustomEnvironmentKey.self] }
set { self[CustomEnvironmentKey.self] = newValue }
}
}
struct Parent: View {
let data: String
var body: some View {
Intermediate().environment(\.customData, data)
}
}
struct Intermediate: View {
var body: some View {
Child()
}
}
struct Child: View {
@Environment(\.customData) private var data
var body: some View {
Text("Received data: \(data)")
}
}
// Usage
Parent(data: "Some data")
<!-- ParentComponent.vue -->
<template>
<intermediate />
</template>
<script setup>
import { provide, ref } from 'vue';
import Intermediate from './IntermediateComponent.vue';
const data = ref('Some data');
provide('dataKey', data);
</script>
<!-- IntermediateComponent.vue -->
<template>
<child />
</template>
<script setup>
import Child from './ChildComponent.vue';
</script>
<!-- ChildComponent.vue -->
<template>
<p>Received data: {{ data }}</p>
</template>
<script setup>
import { inject } from 'vue';
const data = inject('dataKey');
</script>
<!-- Usage -->
<parent-component data="Some data"></parent-component>
@Composable
fun SideEffectOnLoadComponent() {
LaunchedEffect(Unit) {
// Perform side effect, e.g. fetch data, update external data source
}
// Other UI components
Text("Hello, World!")
}
struct SideEffectOnLoadComponent: View {
@State private var hasPerformedSideEffect = false
var body: some View {
if !hasPerformedSideEffect {
DispatchQueue.main.async {
// Perform side effect, e.g. fetch data, update external data source
hasPerformedSideEffect = true
}
}
// Other UI components
Text("Hello, World!")
}
}
<template>
<div></div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
// Perform side effect here
});
</script>