Cvičení na znvupoužitelnost

Czechitas-podklady-WEB · May 22, 2024 · 030130b · 030130b
1 parent 6223de5
commit 030130b
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 1 deletion.
diff --git a/daweb/react/stavebni-vzory/cv-znovupouzitelnost.md b/daweb/react/stavebni-vzory/cv-znovupouzitelnost.md
@@ -0,0 +1,3 @@
+## Cvičení: Znovupoužitelnost komponent
+
+::exc[cvlekce/karty]
diff --git a/daweb/react/stavebni-vzory/cvlekce/karty copy.md b/daweb/react/stavebni-vzory/cvlekce/karty copy.md
@@ -0,0 +1,15 @@
+---
+title: Znovupoužitlné karty
+lead: Vytvořte znovupoužitelnou komponentu `Card` s nadpisem a popisem a dalšími prvky.
+demand: 3
+context: lekce
+solutionAccess: protected
+---
+
+Na webových stránkách velmi často zobrazujeme informace v podobě takzvaných _karet_. Vytvořte znovupoužitelnou komponentu `Card`, která bude nabízet následující možnosti:
+
+- bude umožňovat zobrazit obrázek a to buď nahoře nebo dole,
+- bude umožňovat zobrazit nadpis a obsah, kde obsah bude moci být libovolný JSX kód,
+- bude umožňovat zobrazit patičku karty, kde můžete zobrazit libovolný obsah.
+
+Inspirujte se návrhem karet na [pointjupiter.com](https://pointjupiter.com/ultimate-ux-ui-guide-card-design-web-sites-apps).
diff --git a/daweb/react/stavebni-vzory/cvlekce/karty.md b/daweb/react/stavebni-vzory/cvlekce/karty.md
@@ -0,0 +1,15 @@
+---
+title: Znovupoužitlné karty
+lead: Vytvořte znovupoužitelnou komponentu `Card` s nadpisem a popisem a dalšími prvky.
+demand: 3
+context: lekce
+solutionAccess: protected
+---
+
+Na webových stránkách velmi často zobrazujeme informace v podobě takzvaných _karet_. Vytvořte znovupoužitelnou komponentu `Card`, která bude nabízet následující možnosti:
+
+- bude umožňovat zobrazit obrázek a to buď nahoře nebo dole,
+- bude umožňovat zobrazit nadpis a obsah, kde obsah bude moci být libovolný JSX kód,
+- bude umožňovat zobrazit patičku karty, kde můžete zobrazit libovolný obsah.
+
+Inspirujte se návrhem karet na [pointjupiter.com](https://pointjupiter.com/ultimate-ux-ui-guide-card-design-web-sites-apps).
diff --git a/daweb/react/stavebni-vzory/detail-seznamu.md b/daweb/react/stavebni-vzory/detail-seznamu.md
@@ -1,6 +1,6 @@
 ## Vzor: detail v seznamu
 
-Lekci zakončíme tím, že spojíme některé z předchozích probraných vzorů tak, abychom implementovali malinko složitější funkčnost. Budeme chtít zobrazit zároveň seznam dat a zároveň po kliknutí na položku v seznamu zobrazit detail této položky, která se bude stahovat z API.
+Výklad zakončíme tím, že spojíme některé z předchozích probraných vzorů tak, abychom implementovali malinko složitější funkčnost. Budeme chtít zobrazit zároveň seznam dat a zároveň po kliknutí na položku v seznamu zobrazit detail této položky, která se bude stahovat z API.
 
 K tomu budeme potřebovat spojit tyto vzory:
 

diff --git a/daweb/react/stavebni-vzory/entry.yml b/daweb/react/stavebni-vzory/entry.yml
@@ -6,4 +6,5 @@ sections:
   - detail-seznamu
   - znovupouzitelnost
   - children-prop
+  - cv-znovupouzitelnost
   - shrnuti
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## Cvičení: Znovupoužitelnost komponent

		::exc[cvlekce/karty]