You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: topics/compose-onboard/compose-multiplatform-modify-project.md
+11-5Lines changed: 11 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -144,11 +144,17 @@ To use the `kotlinx-datetime` library:
144
144
145
145
You can now rerun the application using the same run configurations for Android, iOS, desktop, and web:
146
146
147
-
{width=500}
148
-
149
-
{width=400}
150
-
151
-
{width=400}
147
+
<tabs>
148
+
<tab id="mobile-app" title="Androidand iOS">
149
+
<img src="first-compose-project-on-android-ios-2.png" alt="FirstComposeMultiplatform app on Androidand iOS" width="500"/>
150
+
</tab>
151
+
<tab id="desktop-app" title="Desktop">
152
+
<img src="first-compose-project-on-desktop-2.png" alt="FirstComposeMultiplatform app on desktop" width="400"/>
153
+
</tab>
154
+
<tab id="web-app" title="Web">
155
+
<img src="first-compose-project-on-web-2.png" alt="FirstComposeMultiplatform app on web" width="400"/>
156
+
</tab>
157
+
</tabs>
152
158
153
159
<!--
154
160
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage1).
Copy file name to clipboardExpand all lines: topics/compose-onboard/compose-multiplatform-new-project.md
+40-15Lines changed: 40 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -143,9 +143,14 @@ a `TextField` composable:
143
143
2. Follow the IDE's instructions to import the missing dependencies.
144
144
3. Run the application on each platform you're targeting:
145
145
146
-
{width=500}
147
-
148
-
{width=350}
146
+
<tabs>
147
+
<tab id="mobile-user-input" title="Android and iOS">
148
+
<img src="first-compose-project-on-android-ios-4.png" alt="User input in the Compose Multiplatform app on Android and iOS" width="500"/>
149
+
</tab>
150
+
<tab id="desktop-user-input" title="Desktop">
151
+
<img src="first-compose-project-on-desktop-5.png" alt="User input in the Compose Multiplatform app on desktop" width="350"/>
152
+
</tab>
153
+
</tabs>
149
154
150
155
## Calculate time
151
156
@@ -209,9 +214,14 @@ The next step is to use the given input to calculate time. To do this, create a
209
214
5. Run the application again and enter a valid timezone.
210
215
6. Click the button. You should see the correct time:
211
216
212
-
{width=500}
213
-
214
-
{width=350}
217
+
<tabs>
218
+
<tab id="mobile-time-display" title="Android and iOS">
219
+
<img src="first-compose-project-on-android-ios-5.png" alt="Time display in the Compose Multiplatform app on Android and iOS" width="500"/>
220
+
</tab>
221
+
<tab id="desktop-time-display" title="Desktop">
222
+
<img src="first-compose-project-on-desktop-6.png" alt="Time display in the Compose Multiplatform app on desktop" width="350"/>
223
+
</tab>
224
+
</tabs>
215
225
216
226
## Improve the style
217
227
@@ -264,9 +274,14 @@ time message could be rendered more prominently.
264
274
265
275
3. Run the application to see how the appearance has improved:
266
276
267
-
{width=500}
268
-
269
-
{width=350}
277
+
<tabs>
278
+
<tab id="mobile-improved-style" title="Android and iOS">
279
+
<img src="first-compose-project-on-android-ios-6.png" alt="Improved style of the Compose Multiplatform app on Android and iOS" width="500"/>
280
+
</tab>
281
+
<tab id="desktop-improved-style" title="Desktop">
282
+
<img src="first-compose-project-on-desktop-7.png" alt="Improved style of the Compose Multiplatform app on desktop" width="350"/>
283
+
</tab>
284
+
</tabs>
270
285
271
286
<!--
272
287
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage2).
@@ -356,9 +371,14 @@ list.
356
371
2. Follow the IDE's instructions to import the missing dependencies.
357
372
3. Run the application to see the redesigned version:
358
373
359
-
{width=500}
360
-
361
-
{width=350}
374
+
<tabs>
375
+
<tab id="mobile-country-list" title="Android and iOS">
376
+
<img src="first-compose-project-on-android-ios-7.png" alt="The country list in the Compose Multiplatform app on Android and iOS" width="500"/>
377
+
</tab>
378
+
<tab id="desktop-country-list" title="Desktop">
379
+
<img src="first-compose-project-on-desktop-8.png" alt="The country list in the Compose Multiplatform app on desktop" width="350"/>
380
+
</tab>
381
+
</tabs>
362
382
363
383
<!--
364
384
>You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage3).
@@ -479,9 +499,14 @@ code to load and display them:
479
499
5. Follow the IDE's instructions to import the missing dependencies.
480
500
6. Run the application to see the new behavior:
481
501
482
-
{width=500}
483
-
484
-
{width=350}
502
+
<tabs>
503
+
<tab id="mobile-flags" title="Android and iOS">
504
+
<img src="first-compose-project-on-android-ios-8.png" alt="The country flags in the Compose Multiplatform app on Android and iOS" width="500"/>
505
+
</tab>
506
+
<tab id="desktop-flags" title="Desktop">
507
+
<img src="first-compose-project-on-desktop-9.png" alt="The country flags in the Compose Multiplatform app on desktop" width="350"/>
508
+
</tab>
509
+
</tabs>
485
510
486
511
<!--
487
512
> You can find this state of the project in our [GitHub repository](https://github.com/kotlin-hands-on/get-started-with-cm/tree/main/ComposeDemoStage4).
0 commit comments