Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:12 [2020/05/02 16:20] ciprian.dobre [Componente utile] |
pw:laboratoare:12 [2020/05/04 11:01] (current) ciprian.dobre [Exercitii] |
||
|---|---|---|---|
| Line 26: | Line 26: | ||
| </code> | </code> | ||
| + | ===== Bootstrap Grid Layout ===== | ||
| + | |||
| + | Pentru a construi cu usurinta un layout responsive, Bootstrap pune la dispozitie un grid flexbox. Acesta vine cu un sistem de containere, randuri si coloane, pentru a aranja continutul in pagina. Pe fiecare rand pot fi asezate un numar de pana la 12 coloane, cu dimensiuni variabile, in functie de setarile specificate si de device-ul pe care sunt afisate. Sunt disponibile, by default, optiuni pentru 5 clase de device-uri: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px). | ||
| + | |||
| + | |||
| + | ==== Container ==== | ||
| + | |||
| + | Containerele ofera posibilitatea de a centra si alinia orizontal continutul paginii. Acestea sunt responsive, max-width modificandu-se in functie de dimensiunea viewport-ului. Daca se specifica optiunea "fluid", ele vor avea width 100% intotdeauna. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr01.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> //<Container fluid> --> width 100% | ||
| + | <Row> | ||
| + | <Col>1 of 1</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | ==== Auto-layout columns ==== | ||
| + | |||
| + | Cand nu se specifica nicio dimensiune, componentele //Col// vor avea dimensiuni egale. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr02.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row> | ||
| + | <Col>1 of 2</Col> | ||
| + | <Col>2 of 2</Col> | ||
| + | </Row> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col>2 of 3</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | Daca pentru una dintre coloane se specifica o dimensiune, atunci toate celelalte coloane isi vor schimba automat dimensiunea, ramanand egale intre ele. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr03.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col xs={6}>2 of 3 (wider)</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | <Row> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col xs={5}>2 of 3 (wider)</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| + | |||
| + | ==== Rows ==== | ||
| + | |||
| + | Componenta //Row// permite setarea dimensiunilor coloanelor din interiorul ei pentru toate cele 5 viewport-uri predefinite (xs, sm, md, lg, xl). Pentru fiecare viewport, se poate specifica numarul de coloane care incap una langa alta. | ||
| + | |||
| + | {{:pw:laboratoare:lab12_scr04.png|}} | ||
| + | |||
| + | <code Javascript> | ||
| + | <Container> | ||
| + | <Row xs={2} md={4} lg={6}> | ||
| + | <Col>1 of 2</Col> | ||
| + | <Col>2 of 2</Col> | ||
| + | </Row> | ||
| + | <Row xs={1} md={2}> | ||
| + | <Col>1 of 3</Col> | ||
| + | <Col>2 of 3</Col> | ||
| + | <Col>3 of 3</Col> | ||
| + | </Row> | ||
| + | </Container> | ||
| + | </code> | ||
| ===== Componente ===== | ===== Componente ===== | ||
| React Bootstrap ofera o serie de componente utile in orice aplicatie web, ce usureaza procesul de dezvoltare. Pentru a utiliza o componenta din Bootstrap, aceasta trebuie mai intai importata. Codul de mai jos importa o componenta de alerta. | React Bootstrap ofera o serie de componente utile in orice aplicatie web, ce usureaza procesul de dezvoltare. Pentru a utiliza o componenta din Bootstrap, aceasta trebuie mai intai importata. Codul de mai jos importa o componenta de alerta. | ||
| Line 200: | Line 277: | ||
| Rezultatul codului de mai sus este: | Rezultatul codului de mai sus este: | ||
| - | {{ :pw:laboratoare:react-card.png?300 |}} | + | {{ :pw:laboratoare:react-card.png?500&nolink |}} |
| + | |||
| + | === Carousel === | ||
| + | [[https://react-bootstrap.github.io/components/carousel/|Carousel-ul]] este folosit pentru galeriile foto. Componenta **Carousel** contine mai multe tag-uri <Carousel.Item> in care se adauga imagini (<img>) si, optional, <Carousel.Caption>. | ||
| + | |||
| + | === Pagination === | ||
| + | Un exemplu de paginare este disponibil in [[https://react-bootstrap.github.io/components/pagination/|documentatia oficiala]]. | ||
| + | React Bootstrap ofera doar partea de prezentare a componentei, logica fiind facuta de developer. Astfel, la fiecare click pe un <Pagination.Item>, continutul vazut de utilizator trebuie sa se schimbe. | ||
| + | Prin urmare, pe componenta <Pagination> atasam o functie evenimentului //click// ce va fi executata de fiecare data cand se schimba o pagina. | ||
| + | |||
| + | <code javascript> | ||
| + | constructor(props){ | ||
| + | super(props) | ||
| + | this.pageChanged = this.pageChanged.bind(this); | ||
| + | } | ||
| + | |||
| + | pageChanged(e){ | ||
| + | // e.target.text contine numarul paginii | ||
| + | console.log(e.target.text); | ||
| + | } | ||
| + | |||
| + | <Pagination onClick={this.pageChanged}> | ||
| + | ... | ||
| + | </Pagination> | ||
| + | </code> | ||
| + | |||
| + | |||
| ===== JSON Placeholder ===== | ===== JSON Placeholder ===== | ||
| Line 226: | Line 330: | ||
| - [1p] Printr-un request de tip GET accesati toate albumele disponibile pe webserver-ul JSONPlaceholder. | - [1p] Printr-un request de tip GET accesati toate albumele disponibile pe webserver-ul JSONPlaceholder. | ||
| - [2p] Fiecare album va fi reprezentat intr-o componenta de tip **Card**. | - [2p] Fiecare album va fi reprezentat intr-o componenta de tip **Card**. | ||
| - | - Card image reprezinta prima poza din album (hint: afisati thumbnailUrl) | ||
| - Card title este numele albumului | - Card title este numele albumului | ||
| - Card text este informatia despre utilizatorul care a facut albumul, sub forma "by {username} aka {name}" | - Card text este informatia despre utilizatorul care a facut albumul, sub forma "by {username} aka {name}" | ||
| - | - [2p] Afisati intr-o pagina toate albumele. Folositi componenta **Pagination** pentru a reprezenta cate 10 albume pe pagina. | + | - [Bonus] Card image reprezinta prima poza din album (hint: afisati thumbnailUrl) |
| + | - [3p] Afisati intr-o pagina toate albumele. Folositi componenta **Pagination** pentru a reprezenta cate 10 albume pe pagina. | ||
| - [1p] La click pe un album trimiteti un request de tip GET pentru a accesa pozele albumului respectiv | - [1p] La click pe un album trimiteti un request de tip GET pentru a accesa pozele albumului respectiv | ||
| - | - [4p] Afisati pozele intr-o componenta **Carousel**. | + | - [3p] Afisati pozele intr-o componenta **Carousel**. |
