Comhpháirteanna Chomhéadain

Comhpháirteanna Chomhéadain. Tá na comhpháirteanna UI comhoiriúnach le v5.x agus chun tosaigh.

Chun an spleáchas a shuiteáil i dtionscadal áitiúil.

rabhadh

Tá na comhpháirteanna UI sa mhód turgnamhach, a úsáidtear faoi láthair chun an príomhchomhéadan úsáideora a thógáil @verdaccio/ui-theme, Má tá tú sásta úsáid tá fáilte roimh aiseolas.

npm i -D @verdaccio/ui-components@6-next

Brabhsálaí na comhpháirteanna go léir atá ar fáil ag https://ui-components.verdaccio.org/

Conas é a úsáid

Tá sraith uirlisí ann ar féidir iad a úsáid chun do chomhéadan úsáideora féin a chruthú:

• components: Comhpháirteanna neamhspleácha le húsáid chun leagan amach éagsúil a thógáil, tá na comhpháirteanna uile bunaithe ar MUI (UI Ábhar).
• providers: Is comhpháirteanna úsáideacha iad soláthraithe a úsáideann an Comhthéacs React Context, mar shampla, nascann an VersionProvider an siopa Redux le comhpháirteanna neamhspleácha. Tá an AppConfigurationProvider in ann an
• store: D'fhéadfaí an siopa Redux atá á chumhachtú ag Rematch, a úsáid leis an réad domhanda __VERDACCIO_BASENAME_UI_OPTIONS a úsáideann verdaccio chun a sholáthar an chumraíocht Chomhéadain.
• theme: Is astarraingt de sholáthraí téamaí material-ui é an ThemeProvider.
• sections: Grúpa comhpháirteanna chun codanna den fheidhmchlár a shocrú go tapa, amhail an barra taoibh, ceanntásc an bhuntásc.
• layouts: An bhfuil an meascán de mhír amháin nó níos mó réidh le húsáid.
• hooks: Cnuasach crúcaí úsáideacha React.

Braitheann an meascán díobh ar do chuid riachtanas, d’fhéadfaí é a úsáid chun comhpháirteanna saincheaptha, bealaí a instealladh nó chun leathanaigh nó comhpháirteanna nua a chur leis.

Riachtanais

Ní mór don liosta leabharlann éigeantach é a úsáid le comhpháirteanna ui.

• React >17
• Material UI >5.x
• Redux >4.x
• Emotion >11
• i18next >20.x
• Tá TypeScript roghnach

Samplaí

import React from 'react';
import { Route, Router, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import {
  Home,
  store,
  Loading,
  NotFound,
  Route as Routes,
  TranslatorProvider,
  VersionProvider,
  loadable,
} from '@verdaccio/ui-components';

// to enable webpack code splitting
const VersionPage = loadable(() => import('../pages/Version'));

const App: React.FC = () => {
  // configuration from config.yaml
  const { configOptions } = useConfig();
  const listLanguages = [{lng: 'en-US', icon: <someSVGIcon>, menuKey: 'lng.english'}];
  return (
      <Provider store={store}>
        <AppConfigurationProvider>
          <ThemeProvider>
            <TranslatorProvider i18n={i18n} listLanguages={listLanguages} onMount={() => {}}>
              <Suspense fallback={<Loading />}>
                <Router history={history}>
                  <Header HeaderInfoDialog={CustomInfoDialog} />
                    <Switch>
                      <Route exact={true} path={Routes.ROOT}>
                        <Home />
                      </Route>
                      <Route exact={true} path={Routes.SCOPE_PACKAGE}>
                        <VersionProvider>
                          <VersionPage />
                        </VersionProvider>
                      </Route>
                    </Switch>
                </Router>
                {configOptions.showFooter && <Footer />}
              </Suspense>
            </TranslatorProvider>
          </ThemeProvider>
        </AppConfigurationProvider>
      </Provider>
  );
};