Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2024/10/29 19:29] ilie_cristian.sandu |
se:labs:03 [2024/11/01 19:07] (current) cosmin.dumitrache [Lab 03 - Introduction to React] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Lab 03 - Introduction to React ====== | + | ====== Lab 03 - Frontend ====== |
| =====React==== | =====React==== | ||
| Line 255: | Line 255: | ||
| Examples: | Examples: | ||
| - | Centering Text | + | **Centering Text** |
| To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities: | To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities: | ||
| Line 264: | Line 265: | ||
| </code> | </code> | ||
| - | Responsive Layout | + | **Responsive Layout** |
| With Tailwind, you can easily create responsive layouts using its responsive utilities. For instance, to set different column layouts on different screen sizes, you might do: | With Tailwind, you can easily create responsive layouts using its responsive utilities. For instance, to set different column layouts on different screen sizes, you might do: | ||
| Line 276: | Line 278: | ||
| </code> | </code> | ||
| - | Button Styling | + | **Button Styling** |
| Tailwind allows you to create buttons with custom styles by combining utility classes: | Tailwind allows you to create buttons with custom styles by combining utility classes: | ||
| Line 295: | Line 298: | ||
| - text showing the description of the todo-list item | - text showing the description of the todo-list item | ||
| - edit button that enable you to edit todo-item text | - edit button that enable you to edit todo-item text | ||
| + | - checkbox that enable you to check todo-item text | ||
| - cancel button that enable you to **cancel** a edit action | - cancel button that enable you to **cancel** a edit action | ||
| - delete button that emits an event to parent to remove the item | - delete button that emits an event to parent to remove the item | ||
