Komponenttien käyttöohje

Suomi.fi Design System tarjoaa kokoelman saavutettavia, uudelleenkäytettäviä ja dokumentoituja käyttöliittymäkomponentteja. Komponentit on toteutettu Suomi.fi-identiteetin mukaisina React-komponentteina.

Komponenttikirjasto tarjoaa kaikki komponentit samasta npm-moduulista. Kirjaston tekninen ohjeistus ja käyttöönotto-ohjeet löytyvät erillisestä teknisestä dokumentaatiosta.

Tekninen dokumentaatio

Komponenttien käyttö

Kirjastosta voi valita käyttöön haluamiaan komponentteja. Komponentit ovat avointa lähdekoodia.

Teeman muokkaaminen

Kirjaston käyttämää oletusteemaa voi myös tarvittaessa muokata. Teeman muokkaaminen vaikuttaa kaikkiin muokatun teeman sisältämiin komponentteihin.


import React from 'react';
import { 
  Button, 
  SuomifiThemeProvider 
} from 'suomifi-ui-components';

const customTheme = {
  gradients: {
    highlightBaseToHighlightDark1: 
      'linear-gradient(to top, orange, red);',
    highlightLight1ToHighlightBase: 
      'linear-gradient(to top, crimson, red);',
  },
  colors: {
    highlightDark1: 'darkred',
    highlightBase: 'blue',
    highlightLight1: 'green',
  }
};

export const Example = () => (
  <>
    <SuomifiThemeProvider theme={customTheme}>
      <Button>Theme</Button>
    </SuomifiThemeProvider>
  </>
);

Komponenttien vaativampi muokkaaminen

Jos komponentin tyylejä tarvitsee täydentää tai muokata se onnistuu usealla eri tavalla.


import React from 'react';
import { Button } from 'suomifi-ui-components';
import styled from 'styled-components';

/**
.fi-button.button--custom {
  background: #09ae88;
}
.fi-button.button--custom:hover {
  background: #e97025;
}
.fi-button.button--custom:active {
  background: #faaf00;
}
 */
import './customButton.css';

const CustomButton = styled(Button)({
  background: '#09ae88',
  '&:hover': { background: '#e97025' },
  '&:active': { background: '#faaf00' },
});

export const Example = () => (
  <>
    <CustomButton>Styled</CustomButton>
    <Button className="button--custom">Classname</Button>
  </>
);