From 030130b28a204574f4f863c47f41921e950ae28a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Podlouck=C3=BD?= Date: Wed, 22 May 2024 17:28:48 +0200 Subject: [PATCH] =?UTF-8?q?Cvi=C4=8Den=C3=AD=20na=20znvupou=C5=BEitelnost?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react/stavebni-vzory/cv-znovupouzitelnost.md | 3 +++ daweb/react/stavebni-vzory/cvlekce/karty copy.md | 15 +++++++++++++++ daweb/react/stavebni-vzory/cvlekce/karty.md | 15 +++++++++++++++ daweb/react/stavebni-vzory/detail-seznamu.md | 2 +- daweb/react/stavebni-vzory/entry.yml | 1 + 5 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 daweb/react/stavebni-vzory/cv-znovupouzitelnost.md create mode 100644 daweb/react/stavebni-vzory/cvlekce/karty copy.md create mode 100644 daweb/react/stavebni-vzory/cvlekce/karty.md diff --git a/daweb/react/stavebni-vzory/cv-znovupouzitelnost.md b/daweb/react/stavebni-vzory/cv-znovupouzitelnost.md new file mode 100644 index 00000000..1f1581e0 --- /dev/null +++ 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 new file mode 100644 index 00000000..27cb2576 --- /dev/null +++ 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 new file mode 100644 index 00000000..27cb2576 --- /dev/null +++ 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 index eb2cf160..c99af777 100644 --- 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 index b409caf8..34fc6b3b 100644 --- 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