Show page

Differences

This shows you the differences between two versions of the page.

--- pw:laboratoare:12 [2020/05/02 16:17]
ciprian.dobre [Componente de baza]
+++ pw:laboratoare:12 [2020/05/04 11:01] (current)
ciprian.dobre [Exercitii]
@@ Line 26: / Line 26: @@
 </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 =====
 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 154: / Line 231: @@
 	  <td>jacob@gmail.com</td>
 	</tr>
-  </tbody>
+    </tbody>
-</Table>
+  </Table>
 </>
 </code>
@@ Line 166: / Line 243: @@
 === Cards ===
-Componenta [[https://react-bootstrap.github.io/components/cards/|card]], reprezentata prin tag-ul **Card**, este un container impartit in 3 sectiuni:
+Componenta [[https://react-bootstrap.github.io/components/cards/|Card]], reprezentata prin tag-ul **Card**, este un container impartit in 3 sectiuni:
   * header - <Card.Header>
   * body - <Card.Body>
@@ Line 198: / Line 275: @@
 </>
 </code>
+Rezultatul codului de mai sus este:
+{{ :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 =====
@@ Line 223: / Line 330: @@
   - [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**.
-    - Card image reprezinta prima poza din album (hint: afisati thumbnailUrl)
     - Card title este numele albumului
     - 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
-  - [4p] Afisati pozele intr-o componenta **Carousel**.
+  - [3p] Afisati pozele intr-o componenta **Carousel**.

Cursuri

Link UPB Cursuri

Laboratoare

Proiect

Guidline Proiect

pw/laboratoare/12.1588425434.txt.gz · Last modified: 2020/05/02 16:17 by ciprian.dobre

Show page Old revisions

Media Manager Back to top