Žingsnis 07

Šiame žingsnyje sukonstruosime statinį komponentą Dashboard, kuriame pavaizduosime renginio info ir bendrą rezultatą.

07.01 Dashboard pradžia

Kataloge src/components sukurkime Dashboard.js komponentą ir tuščią jo stiliaus failą Dashboard.css.

Importuokime Typography. Ir aprašykime ką vaizduos komponentas.

failas: src/components/Dashboard.js

import React from 'react';
import Typography from '@material-ui/core/Typography';

import './Dashboard.css';

export default function Dashboard(){
  return (
    <div className="dashboard">
      <div className="dashboard__event-title">
        <Typography component="h2" variant="h4" align="center">
          MyLiveEvent
        </Typography>
      </div>
      <div className="dashboard__event-description">
        <Typography color="textSecondary" align="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Typography>
      </div>
      <div className="dashboard__event-score">
        Event Score
      </div>
    </div>
  );
}

Kol kas sąmoningai praleidžiame score vaizdavimą.

Grįžkime į šio komponento stiliaus failą Dashboard.css, ir jame pridėkime taisykles.

failas: src/components/Dashboard.css

.dashboard {
  width: 100%;
  padding: 2em 0;
}

.dashboard__event-title,
.dashboard__event-description,
.dashboard__event-score {
  width: 75%;
  margin: 1em auto;
  text-align: center;
}

Belieka pridėti šį komponentą į App.js. Taigi, App komponento importų dalyje papildykime Dashboard.

Ir render dalyje atitinkamoje vietoje pakeiskime:

failas: src/App.js

// ...
import CssBaseline from '@material-ui/core/CssBaseline';
+import Dashboard from './components/Dashboard';

import './App.css';

function App() {
// ...
  return (
    // ...
          <div className="sub-section">
            <PageBox>
-              <h2>Renginio rezultatai</h2>
+              <Dashboard/>
            </PageBox>
          </div>
    // ...
  );
}

07.02 DashboardScore

Sukurkime komponentą, kuris Dashboard komponento viduje atvaizduos bendrą vertinimo rezultatą.

Kataloge src/components sukurkime komponentą DashboardScore.js ir jo stilių DashboardScore.css.

failas: src/components/DashboardScore.js

import React from 'react';
import ScoreSeparatorIcon from '@material-ui/icons/Remove';
import ScoreIcon from './ScoreIcon';

import './DashboardScore.css'

export default function DashboardScore() {
  return (
    <div className="dashboard-score">
      <div className="dashboard-score__box">
        <h4 className="dashboard-score__scoreboard-item">0</h4>
        <ScoreIcon score={1}/>
      </div>
      <div className="dashboard-score__scoreboard-item">
        <ScoreSeparatorIcon />
      </div>
      <div className="dashboard-score__box">
        <ScoreIcon score={-1}/>
        <h4 className="dashboard-score__scoreboard-item">0</h4>
      </div>
    </div>
  );
}

SVARBU ! Kad nedarytume iš naujo tokių pačių ikonų, galime panaudoti turimą komponentą ScoreIcon. Jį sukūrėmė 03.03 žingsnyje. Jis gali turėti parametrus.

DashboardScore.css faile aprašykime stiliaus taisykles

failas: src/components/DashboardScore.css

.dashboard-score {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px;
}

.dashboard-score__box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dashboard-score__scoreboard-item {
  margin: 0 10px;
  font-size: 2em;
}

Pridėkime sukurtą statinį komponentą DashboardScore į prieš tai sukurto komponento Dashboard vidų.

Tai paprasta - importuojame komponentą ir pridedame į render. Atitinkamose Dashboard.js vietose padarykime pakeitimus.

failas: src/components/Dashboard.js

import React from 'react';
import Typography from '@material-ui/core/Typography';
+import DashboardScore from './DashboardScore';
import './Dashboard.css';

export default function Dashboard(){
  return (
    <div className="dashboard">
      <div className="dashboard__event-title">
        <Typography component="h2" variant="h4" align="center">
          MyLiveEvent
        </Typography>
      </div>
      <div className="dashboard__event-description">
        <Typography color="textSecondary" align="center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </Typography>
      </div>
      <div className="dashboard__event-score">
-       Event Score
+       <DashboardScore/>
      </div>
    </div>
  );
}

07.03 responsive Dashboard

Galime patikrinti, kad kai kuriuose mobile ekranuose mūsų sukurti elementai nelabai telpa.

Problemą išspręsti galime naudodami CSS technikas. Dashboard.css faile prie esamų taisyklių pridėkime papildomai:

failas: src/components/Dashboard.css

/* ... */
@media only screen and (max-width: 550px) {
  .dashboard {
    padding: 0;
  }

  .dashboard__event-title h2 {
    font-size: 1.5rem;
  }

  .dashboard__event-description p {
    font-size: .8rem
  }

}

Po šio pakeitimo viskas atrodo geriau mažuose ekranuose.

Svarbūs momentai

• Turimo Komponento "ScoreIcon" pakartotinis panaudojimas (reuse)
• CSS BEM
• named imports - import ScoreSeparatorIcon from '@material-ui/icons/Remove';

---

SEKANTIS ŽINGSNIS →