Näyttely

Jokainen kuvio ja komponentti esimerkkeineen ja tuontiriveineen.

Agentille sama tekstinä: /nayttely.md. Palvelimen agentit lukevat sen osoitteesta http://127.0.0.1:3100/nayttely.md.

Kuviot (7)

Kuori

Sivupalkki (palvelun vaihtaja, navigaatio, oma tili), vierivä sisältökortti ja yläpalkki pienennyksineen, murupolkuineen ja ympäristömerkkeineen (päätös 0004).

Tämä sivusto on AppFrame. Alla sivupalkin ylä- ja alalaidan osat erikseen: palvelun vaihtaja (ServiceSwitcher) ja oma tili (AccountMenu). Ympäristömerkki: environment="staging".

import { ServiceSwitcher, AccountMenu } from "@karkkainen/ui";

Kehykset

Otsikollinen kehys, jonka sisällä paneelit erillisinä kortteina; tilastokehys yhdelle luvulle (päätös 0003).

Tuotteita

61 957
luettelossa

Kuvallisia

52 735
85 %

Päivitetty

klo 13.36
22.10.

Frame: otsikko, kuvaus, merkit ja toiminnot

Paneelit kehyksen sisällä erillisinä kortteina.

3 syötettä
Ajossa

Syötteet

Tuoteluettelo, saldot ja hinnat.

Asetukset

Tunniste Item No., EAN EAN/UPC.

Eteneminen

Perustamatta 61 957.

Päivitetty 22.10. klo 13.36

FrameBody: yksi paneeli reunasta reunaan

Lista tai kaavio, jolla on oma täyte.

import { Frame, FramePanel, FrameBody, StatFrame } from "@karkkainen/ui";

Taulukkokehys

Taulukko kehyksessä: tahmea työkalurivi, sarakkeet datana, lajittelu, leveydensäätö ja sivutus.

TableFrame
NimiTuotenumeroOstohintaTila
Aplus A703 265/65R17W12890000029,86 €
Perustamatta
Continental IceContact 3 155/65R14W12890013737,16 €
Ajossa
Battery for MT9557, 3,87VW12890027444,46 €
Perustettu
Cradle (black) for NQuire 10W12890041151,76 €
Perustamatta
Aplus A703 265/65R17W12890054859,06 €
Ajossa
Continental IceContact 3 155/65R14W12890068566,36 €
Perustettu
Battery for MT9557, 3,87VW12890082273,66 €
Perustamatta
Cradle (black) for NQuire 10W12890095980,96 €
Ajossa
Aplus A703 265/65R17W12890109688,26 €
Perustettu
Continental IceContact 3 155/65R14W12890123395,56 €
Perustamatta
Battery for MT9557, 3,87VW128901370102,86 €
Ajossa
Cradle (black) for NQuire 10W128901507110,16 €
Perustettu
1–50 / 61 957
import { TableFrame, TableFramePagination, DataTable } from "@karkkainen/ui";

Työjono

Asiat ryhmiteltyinä vasemmalla, valitun sisältö oikealla; poikkeuskortti kertoo mikä on vialla ja kuka korjaa.

Ostohinta ei vastaa sovittua
Ostaja
Odottaa

Syötteen hinta 26,13 € poikkeaa sovitusta 25,80 €:sta. Ostaja päättää, kumpi on voimassa.

import { WorkQueue, IssueCard } from "@karkkainen/ui";

Tyhjä tila

Mitä tässä olisi, miksi sitä ei ole ja mitä tehdä seuraavaksi.

Ei ajoja

Ajo syntyy, kun luettelosta valitaan tuotteita perustettavaksi.

import { EmptyState } from "@karkkainen/ui";

Tilamerkit

Tila merkkinä yksittäiselle riville tai pisteenä toistuvassa taulukossa; aina sanoin, ei pelkkä väri.

Valmis
Ajossa
Epäonnistui
Odottaa
Keskeytetty
Valmis22.10. klo 13.36Ajossa12 / 61 957EpäonnistuiTunniste ei erotellut rivejä
import { StatusBadge, StatusDot } from "@karkkainen/ui";

Versiovertailu

Kahden version ero avain–arvo-riveinä, muutos päällekkäin −/+ ja muutosloki aikajanana.

Ostohinta
Poistettu: 29,86 €
Lisätty: 31,20 €

1 muuttunut · 1 lisätty · 1 poistettu

Versio 3
Versio 4

Nimi — muuttunut

Battery for MT9557

Akku MT9557, 3,87 V

Paino — lisätty

—

0,12 kg

Väri — poistettu

musta

—

1 muuttumatonta kenttää

EAN

5711045123456

5711045123456

import { VersionDiff, ChangePair } from "@karkkainen/ui";

Komponentit (35)

Edistymispalkki

Kuinka pitkällä ajo tai lataus on.

import { Progress } from "@karkkainen/ui";

Esittelykortti

Ikoni pinottujen korttien päällä, otsikko, selitys ja toiminto: pisteruudukolla kehyksessä tai korkeana korttina ruudukon sarakkeessa.

Kortin otsikko

Terveisiä kortista!

Tämä on kortti TP-PERUSTUS agentille

Tämä on otsikko

Tämä on kappale otsikon alla

Haluatko antaa meille otsikon?

Klikkaa tästä ja valitse kappale

Unohditko otsikkosi?

Palauta se tämän kappaleen alta.

import { SpotlightFrame, SpotlightCard } from "@karkkainen/ui";

Hakukenttä

Ehdottaa kirjoittaessa; kuori ilman datakerrosta.

import { SearchCombobox } from "@karkkainen/ui";

Ilmoituskeskus

Kello, lukumerkki ja ilmoitusten lista ponnahdusikkunassa.

import { NotificationCenter } from "@karkkainen/ui";

Ilmoituskupla

Itsestään sulkeutuva ilmoitus näytön alalaidassa.

import { Toast } from "@karkkainen/ui";

Kortti

Erillinen pinta otsikolle, sisällölle ja alatunnisteelle.

EET Retail Aps
Toimittaja 303202 · tuoteluettelo
61 957 tuotetta, joista 85 % kuvallisia.
import { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "@karkkainen/ui";

Kytkin

Asetus päälle tai pois, vaikuttaa heti.

import { Switch } from "@karkkainen/ui";

Liukupaneeli

Sisällön päälle liukuva paneeli, joka lukitsee taustan.

import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@karkkainen/ui";

Lomakeikkuna

Valintaikkuna, joka omistaa lähetystilan ja virheen.

import { FormDialog } from "@karkkainen/ui";

Merkki

Lyhyt nimiö: lukumäärä, luokka tai tila tekstinä.

default
secondary
outline
success
warning
info
destructive
import { Badge } from "@karkkainen/ui";

Mittarikortti

Ikoni, selite ja yksi iso luku.

Tuotteita
61 957
Kuvallisia
52 735
Kustannus
12,40 €
Päivitetty
13.36
import { StatCard, StatCardRow } from "@karkkainen/ui";

Murupolku

Missä olet ja miten pääset takaisin.

import { Breadcrumb, BreadcrumbLink, BreadcrumbPage } from "@karkkainen/ui";

Nimiö

Kentän nimi, kytketty kenttään.

import { Label } from "@karkkainen/ui";

Painike

Toiminto: ensisijainen, toissijainen, reunallinen, haamu, vaarallinen ja linkki.

import { Button } from "@karkkainen/ui";

Paneelin osat

Sivupaneelien yhteinen otsikko, runko ja alatunniste.

Tuotteen tiedot

Otsikko ja toimintopalkki pysyvät paikallaan, ja vain tämä alue vierii. Sama rakenne on Liukupaneelissa ja Sivupaneelissa.

Attribuutti 1

Attribuutti 2

Attribuutti 3

Attribuutti 4

Attribuutti 5

Attribuutti 6

Attribuutti 7

Attribuutti 8

import { PanelHeader, PanelBody, PanelFooter } from "@karkkainen/ui";

Ponnahdusikkuna

Elementtiin kiinnittyvä sisältö, joka ei lukitse sivua.

import { Popover, PopoverTrigger, PopoverContent } from "@karkkainen/ui";

Profiilikuva

Nimikirjaimet tai kuva käyttäjälle ja palvelulle.

import { Avatar } from "@karkkainen/ui";

Pudotusvalikko

Yksi arvo listasta.

import { Select } from "@karkkainen/ui";

Pylväsrivi

Pieni aikasarja: päiväkustannukset, päivittäiset ajot.

huippu 12
16.10.
18.10.
20.10.
22.10.
import { MiniBarChart } from "@karkkainen/ui";

Reittivälilehdet

Välilehtien näköiset linkit eri osoitteisiin.

import { TabNav, TabNavLink } from "@karkkainen/ui";

Segmenttivalitsin

Kahdesta neljään toisensa poissulkevaa näkymää, esimerkiksi Taulukko | Kortit.

import { Segmented } from "@karkkainen/ui";

Sisältökortti

Valkoinen kortti, otsikko ja apurivi vasemmassa yläkulmassa, alla vapaa sisältö kuten taulukko reunasta reunaan.

Haluatko antaa meille otsikon?

Klikkaa tästä ja valitse kappale

Unohditko otsikkosi?

Palauta se tämän kappaleen alta.

Toimittajien tilanne

Esimerkkidata: luettelot ja luokittelu toimittajittain

ToimittajaTuotteitaLuokiteltuPäivitetty
heo GmbH61 95772 %22.10. klo 13.36
Asir Group4 16841 %21.10. klo 09.12
Stihl32215 %20.10. klo 16.40
Rehvid Pluss OÜ1 90088 %19.10. klo 11.05
Matrolight261100 %18.10. klo 08.30
Reimo2 41064 %17.10. klo 14.22
Vannetukku8 90557 %16.10. klo 10.48
Insmat1 13293 %15.10. klo 07.55
import { PanelCard } from "@karkkainen/ui";

Sivun otsikko

Otsikko, yläotsikko ja kuvaus sivun alkuun.

Toimittaja 303202

EET Retail Aps

Tuoteluettelo, ajot ja asetukset.

import { PageHeader } from "@karkkainen/ui";

Sivupaneeli

Sisältöä kaventava paneeli; molemmat puolet jäävät käytettäviksi.

Sisältö kapenee paneelin viereltä, ja molemmat puolet pysyvät käytettävinä.

import { SidePanel, SidePanelHeader, SidePanelBody, SidePanelTitle } from "@karkkainen/ui";

Sivutus

Rivimäärä vasemmalla, sivunvaihto oikealla.

import { Pagination } from "@karkkainen/ui";

Syötekenttä

Yksirivinen tekstikenttä.

import { Input } from "@karkkainen/ui";

Taulukko

Taulukon perusosat omaa rakennetta varten.

NimiTunnusHinta
Aplus A703 265/65R17W12890000029,86 €
Cradle (black) for NQuire 10W12890041151,76 €
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@karkkainen/ui";

Tekstialue

Monirivinen tekstikenttä.

import { Textarea } from "@karkkainen/ui";

Tiedoston pudotusalue

Tiedosto vetämällä tai valitsemalla.

Pudota pohjatiedosto tähän

XLSX tai CSV, enintään 25 Mt.

import { UploadDropzone } from "@karkkainen/ui";

Työkaluvihje

Lyhyt selite osoitettaessa; ei sisällä toimintoja.

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@karkkainen/ui";

Valikko

Toimintojen lista painikkeen takana, ryhmiteltynä otsikoin.

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@karkkainen/ui";

Valintaikkuna

Modaali vahvistukselle tai lyhyelle tehtävälle.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@karkkainen/ui";

Valintaruutu

Yksi kyllä/ei-valinta tai rivin valinta taulukossa.

import { Checkbox } from "@karkkainen/ui";

Versioilmoitus

"Palvelu on päivittynyt", kun välilehti ajaa vanhaa versiota.

TP-PERUSTUS on päivittynyt (22.10. klo 22.14)

Tämä välilehti ajaa vanhempaa versiota (22.10. klo 22.07). Päivitä sivu, niin uusimmat korjaukset ovat käytössä.

import { VersionNoticeCard } from "@karkkainen/ui";

Välilehdet

Saman sivun näkymät välilehtinä.

Välilehden sisältö.
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@karkkainen/ui";