Component

En Component er en lagret del av en side som du kan bruke flere steder, for eksempel et produktkort, en navigasjonslinje eller et registreringspanel. Koble den inn på flere sider når de skal følge samme utforming. Kopier den når du vil gjøre egne endringer.

Slik fungerer gjenbrukbare Components

En Component lagrer elementtreet, teksten, utseendet, datainnstillingene og samhandlingen. Den åpnes i samme Story-redigeringsverktøy som en Page. En tilkoblet kopi på en side følger endringer i den lagrede komponenten. Du kan også endre enkelte egenskaper bare der kopien er plassert.

Når du kopierer en utforming, beholder kopien den valgte datakilden. Du får en ny utforming å redigere, mens begge fortsatt leser de samme postene. Ta med kildene når du eksporterer en Model til et annet arbeidsområde.

Lagre et produktkort som Component

Lagre et eksisterende kort når du vil bruke utformingen på en annen side.

For å starte med en egen komponent velger du Create → Component i menyen på en Organizer-mappe. Velg det første elementet under Components, for eksempel Div. Sett deretter inn elementene under det. En Component kan ha Div som rotelement. Velg en rot som passer der du skal plassere komponenten.

1. Bygg et kort på en side. Sett for eksempel inn en Div med Heading og Paragraph under.
2. Gi Div navnet Desk lamp card. Skriv Desk lamp i overskriftens Plain Text og €40.00 i avsnittets Plain Text.
3. Åpne menyen på Div-elementet i treet og velg Save as Component.
4. Under Save Component to velger du Organizer-mappen der komponenten skal lagres.
5. Finn det lagrede elementet i Organizer og gi det navnet Product card. Åpne det for å kontrollere den lagrede roten og elementene under.

Sett inn en tilkoblet Component

En tilkoblet kopi følger den lagrede komponenten når du redigerer kilden.

1. Åpne siden der komponenten skal brukes, og velg elementet som skal inneholde den.
2. Åpne Insert og deretter All Components. Finn Product card i Component Library.
3. Velg Link Product card… for å sette inn en tilkoblet kopi.
4. Lukk utforskeren og kontroller plasseringen på arbeidsflaten.
5. Åpne den lagrede Product card, endre beløpet til €45.00 og gå tilbake til siden. Den tilkoblede kopien viser €45.00.

Velg en tilkoblet eller selvstendig kopi

Velg om denne plasseringen skal følge endringer i kilden eller ha sin egen utforming.

• Link: Følg fremtidige endringer i den lagrede komponenten. Bruk det for en felles navigasjonslinje eller kortutforming.
• Copy fra Component Library: Legg til en utforming du kan endre selvstendig. Bruk den som utgangspunkt for et eget kampanjekort.
• Copy og Paste i treet: Velg det nye overordnede elementet før du limer inn. Underliggende elementer og innstillingene deres følger med.
• Copy to Clipboard og Paste from Clipboard (component): Flytt en kopiert utforming gjennom Organizer. Behold tilgang til den valgte datakilden og Components som er brukt inni den.

Endre én plassering

Velg selve den tilkoblede komponenten for å endre rotens utseende, for eksempel Display, Color eller en delt Style. Endringen gjelder denne plasseringen.

For å endre et element inni komponenten velger du elementet og Add Instance Property. Velg egenskapen du vil overstyre, og skriv verdien. Show Data Settings og Show Variable Settings åpner de tilhørende kontrollene. Det opprinnelige elementnavnet og arvede verdier er skrivebeskyttet. Rediger den lagrede komponenten når alle tilkoblede kopier skal endres.

Fjern den lokale overstyringen for å bruke kildeverdien igjen. For et annet Dataset erstatter du datakilden for plasseringen og velger tilsvarende felt i egenskapene som berøres. Kontroller både denne plasseringen og en annen tilkoblet kopi etterpå.

Les rader for den gjeldende siden

I Data Settings → Query conditions kan du sammenligne et tekstfelt med Current Locale, Current Path eller Current Path → Segment. Serveren velger samsvarende rader før data sendes til Preview eller den publiserte siden. En gjenbrukbar Component bruker siden den er satt inn på.

Current Locale er språkkoden fra sidens Locale system. Current Path er sidens rutede sti med språkprefiks, uten vert, søkestreng, fragment eller avsluttende skråstrek. Segment er siste del, for eksempel overview i /nb-no/docs/overview. Ingen treff gir ingen rader. Manglende sidekontekst vises som en feil.

For en lokalisert artikkel sammenligner du Locale med Current Locale og ArticleSlug med Current Path → Segment, koblet med and. Kontroller hvert språk i Preview, og publiser deretter. Gjeldende tilgangsregler gjelder fortsatt.

Komponentinnstillinger

Roten styrer den gjenbrukbare delen som helhet. Hvert element inni den har sitt eget innhold og utseende.

• Name: Et beskrivende navn i treet gjør elementet lettere å finne. En nylig lagret Component kan ha et generelt navn i Organizer. Gi den nytt navn før du bruker den flere steder.
• Root element: Bestemmer HTML-elementet og hvilke underliggende elementer det støtter. Div er et nyttig utgangspunkt for et kort.
• Properties: Valgfrie egenskaper starter tomme. Obligatoriske egenskaper bruker standardverdiene som følger med. Legg bare til utseende, innhold og attributter utformingen trenger.
• Data Settings: Av til du aktiverer det for elementet. Velg den faktiske Table eller det lagrede resultatet og feltene som skal vises. En kopi beholder valget og tilgangskravene.
• Variable Settings: Aktiver når plasseringen skal bruke en midlertidig verdi fra siden rundt.
• States: Legg til betingelser for det valgte elementet eller plasseringen. Bruk States-artikkelen for å lage en betinget variant.
• Design System: Bruk de ønskede designtokenene i kildekomponenten. Nettstedets valgte Design System brukes av sidene. En gjenbrukbar Component kan beholde sitt eget.

Koble til en komponentdefinisjon

Åpne Settings og velg Component Design System når komponenten skal bruke de delte designtokenene dine. Åpne Implements i verktøylinjen. Component definition starter på No definition selected. Velg en komponentdefinisjon fra dette Design System, les meldingen om kravene er oppfylt, og bruk Open … definition når du vil se kravene.

En definisjon beskriver kravene til en gjenbrukbar utforming. Kontroller forskjellene som vises, og fullfør komponenten før du bruker den som en godkjent utforming. Når du kopierer fra biblioteket, bruker du Design System på stedet du kopierer til. Erstatt eller fjern uforenlige tokenvalg hvis kopien avvises. Velg Link for å beholde kildekomponentens Design System.

Eksempler

Et tilkoblet kort følger endringer i kilden. Et kopiert kort kan ha sin egen kampanjeutforming.

Eksempel: oppdater alle tilkoblede produktkort

Lagre Desk lamp / €40.00 som Product card og koble den inn på Home. Endre beløpet i kilden til €45.00. Det tilkoblede kortet på Home viser €45.00, mens kortet du opprinnelig bygde på Home, fortsatt viser €40.00. Save as Component lagde en gjenbrukbar kopi. Velg en tilkoblet kopi der du vil at fremtidige endringer i kilden skal vises.

Eksempel: lag en kampanjevariant

Kopier Product card fra Component Library til en kampanjeside. Endre overskriften til Summer desk lamp og sett Background Color til #fff4cc. Kilden Product card beholder den opprinnelige overskriften og utseendet. Hvis du bare trenger en annen bakgrunn på én tilkoblet plassering, legger du heller egenskapen til der.

Begrensninger og vanlige feil

En tilkoblet Component trenger at kilden og dataene fortsatt er tilgjengelige alle steder der du bruker den.

• Kopier det overordnede elementet som gir data, når elementene under er avhengige av det. Koble til manglende data før du lagrer en gjenbrukbar utforming.
• Kontroller hvert erstattet felt når du endrer datakilden for en plassering. Like feltnavn kan fortsatt høre til ulike kilder.
• Behold tilgang til kildekomponenten og Components som er brukt inni den. En utilgjengelig kilde kan hindre den tilkoblede kopien i å lastes.
• Forhåndsvis kildeendringer på sidene som bruker dem. Publiser de oppdaterte sidene for å erstatte offentlig innhold som allerede er generert.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

Story · Page · Styles · States · Interactions

Component

En Component er en lagret del av en side som du kan bruke flere steder, for eksempel et produktkort, en navigasjonslinje eller et registreringspanel. Koble den inn på flere sider når de skal følge samme utforming. Kopier den når du vil gjøre egne endringer.

Slik fungerer gjenbrukbare Components

En Component lagrer elementtreet, teksten, utseendet, datainnstillingene og samhandlingen. Den åpnes i samme Story-redigeringsverktøy som en Page. En tilkoblet kopi på en side følger endringer i den lagrede komponenten. Du kan også endre enkelte egenskaper bare der kopien er plassert.

Når du kopierer en utforming, beholder kopien den valgte datakilden. Du får en ny utforming å redigere, mens begge fortsatt leser de samme postene. Ta med kildene når du eksporterer en Model til et annet arbeidsområde.

Lagre et produktkort som Component

Lagre et eksisterende kort når du vil bruke utformingen på en annen side.

For å starte med en egen komponent velger du Create → Component i menyen på en Organizer-mappe. Velg det første elementet under Components, for eksempel Div. Sett deretter inn elementene under det. En Component kan ha Div som rotelement. Velg en rot som passer der du skal plassere komponenten.

1. Bygg et kort på en side. Sett for eksempel inn en Div med Heading og Paragraph under.
2. Gi Div navnet Desk lamp card. Skriv Desk lamp i overskriftens Plain Text og €40.00 i avsnittets Plain Text.
3. Åpne menyen på Div-elementet i treet og velg Save as Component.
4. Under Save Component to velger du Organizer-mappen der komponenten skal lagres.
5. Finn det lagrede elementet i Organizer og gi det navnet Product card. Åpne det for å kontrollere den lagrede roten og elementene under.

Sett inn en tilkoblet Component

En tilkoblet kopi følger den lagrede komponenten når du redigerer kilden.

1. Åpne siden der komponenten skal brukes, og velg elementet som skal inneholde den.
2. Åpne Insert og deretter All Components. Finn Product card i Component Library.
3. Velg Link Product card… for å sette inn en tilkoblet kopi.
4. Lukk utforskeren og kontroller plasseringen på arbeidsflaten.
5. Åpne den lagrede Product card, endre beløpet til €45.00 og gå tilbake til siden. Den tilkoblede kopien viser €45.00.

Velg en tilkoblet eller selvstendig kopi

Velg om denne plasseringen skal følge endringer i kilden eller ha sin egen utforming.

• Link: Følg fremtidige endringer i den lagrede komponenten. Bruk det for en felles navigasjonslinje eller kortutforming.
• Copy fra Component Library: Legg til en utforming du kan endre selvstendig. Bruk den som utgangspunkt for et eget kampanjekort.
• Copy og Paste i treet: Velg det nye overordnede elementet før du limer inn. Underliggende elementer og innstillingene deres følger med.
• Copy to Clipboard og Paste from Clipboard (component): Flytt en kopiert utforming gjennom Organizer. Behold tilgang til den valgte datakilden og Components som er brukt inni den.

Endre én plassering

Velg selve den tilkoblede komponenten for å endre rotens utseende, for eksempel Display, Color eller en delt Style. Endringen gjelder denne plasseringen.

For å endre et element inni komponenten velger du elementet og Add Instance Property. Velg egenskapen du vil overstyre, og skriv verdien. Show Data Settings og Show Variable Settings åpner de tilhørende kontrollene. Det opprinnelige elementnavnet og arvede verdier er skrivebeskyttet. Rediger den lagrede komponenten når alle tilkoblede kopier skal endres.

Fjern den lokale overstyringen for å bruke kildeverdien igjen. For et annet Dataset erstatter du datakilden for plasseringen og velger tilsvarende felt i egenskapene som berøres. Kontroller både denne plasseringen og en annen tilkoblet kopi etterpå.

Les rader for den gjeldende siden

I Data Settings → Query conditions kan du sammenligne et tekstfelt med Current Locale, Current Path eller Current Path → Segment. Serveren velger samsvarende rader før data sendes til Preview eller den publiserte siden. En gjenbrukbar Component bruker siden den er satt inn på.

Current Locale er språkkoden fra sidens Locale system. Current Path er sidens rutede sti med språkprefiks, uten vert, søkestreng, fragment eller avsluttende skråstrek. Segment er siste del, for eksempel overview i /nb-no/docs/overview. Ingen treff gir ingen rader. Manglende sidekontekst vises som en feil.

For en lokalisert artikkel sammenligner du Locale med Current Locale og ArticleSlug med Current Path → Segment, koblet med and. Kontroller hvert språk i Preview, og publiser deretter. Gjeldende tilgangsregler gjelder fortsatt.

Komponentinnstillinger

Roten styrer den gjenbrukbare delen som helhet. Hvert element inni den har sitt eget innhold og utseende.

• Name: Et beskrivende navn i treet gjør elementet lettere å finne. En nylig lagret Component kan ha et generelt navn i Organizer. Gi den nytt navn før du bruker den flere steder.
• Root element: Bestemmer HTML-elementet og hvilke underliggende elementer det støtter. Div er et nyttig utgangspunkt for et kort.
• Properties: Valgfrie egenskaper starter tomme. Obligatoriske egenskaper bruker standardverdiene som følger med. Legg bare til utseende, innhold og attributter utformingen trenger.
• Data Settings: Av til du aktiverer det for elementet. Velg den faktiske Table eller det lagrede resultatet og feltene som skal vises. En kopi beholder valget og tilgangskravene.
• Variable Settings: Aktiver når plasseringen skal bruke en midlertidig verdi fra siden rundt.
• States: Legg til betingelser for det valgte elementet eller plasseringen. Bruk States-artikkelen for å lage en betinget variant.
• Design System: Bruk de ønskede designtokenene i kildekomponenten. Nettstedets valgte Design System brukes av sidene. En gjenbrukbar Component kan beholde sitt eget.

Koble til en komponentdefinisjon

Åpne Settings og velg Component Design System når komponenten skal bruke de delte designtokenene dine. Åpne Implements i verktøylinjen. Component definition starter på No definition selected. Velg en komponentdefinisjon fra dette Design System, les meldingen om kravene er oppfylt, og bruk Open … definition når du vil se kravene.

En definisjon beskriver kravene til en gjenbrukbar utforming. Kontroller forskjellene som vises, og fullfør komponenten før du bruker den som en godkjent utforming. Når du kopierer fra biblioteket, bruker du Design System på stedet du kopierer til. Erstatt eller fjern uforenlige tokenvalg hvis kopien avvises. Velg Link for å beholde kildekomponentens Design System.

Eksempler

Et tilkoblet kort følger endringer i kilden. Et kopiert kort kan ha sin egen kampanjeutforming.

Eksempel: oppdater alle tilkoblede produktkort

Lagre Desk lamp / €40.00 som Product card og koble den inn på Home. Endre beløpet i kilden til €45.00. Det tilkoblede kortet på Home viser €45.00, mens kortet du opprinnelig bygde på Home, fortsatt viser €40.00. Save as Component lagde en gjenbrukbar kopi. Velg en tilkoblet kopi der du vil at fremtidige endringer i kilden skal vises.

Eksempel: lag en kampanjevariant

Kopier Product card fra Component Library til en kampanjeside. Endre overskriften til Summer desk lamp og sett Background Color til #fff4cc. Kilden Product card beholder den opprinnelige overskriften og utseendet. Hvis du bare trenger en annen bakgrunn på én tilkoblet plassering, legger du heller egenskapen til der.

Begrensninger og vanlige feil

En tilkoblet Component trenger at kilden og dataene fortsatt er tilgjengelige alle steder der du bruker den.

• Kopier det overordnede elementet som gir data, når elementene under er avhengige av det. Koble til manglende data før du lagrer en gjenbrukbar utforming.
• Kontroller hvert erstattet felt når du endrer datakilden for en plassering. Like feltnavn kan fortsatt høre til ulike kilder.
• Behold tilgang til kildekomponenten og Components som er brukt inni den. En utilgjengelig kilde kan hindre den tilkoblede kopien i å lastes.
• Forhåndsvis kildeendringer på sidene som bruker dem. Publiser de oppdaterte sidene for å erstatte offentlig innhold som allerede er generert.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

Story · Page · Styles · States · Interactions

Component

En Component er en lagret del av en side som du kan bruke flere steder, for eksempel et produktkort, en navigasjonslinje eller et registreringspanel. Koble den inn på flere sider når de skal følge samme utforming. Kopier den når du vil gjøre egne endringer.

Slik fungerer gjenbrukbare Components

En Component lagrer elementtreet, teksten, utseendet, datainnstillingene og samhandlingen. Den åpnes i samme Story-redigeringsverktøy som en Page. En tilkoblet kopi på en side følger endringer i den lagrede komponenten. Du kan også endre enkelte egenskaper bare der kopien er plassert.

Når du kopierer en utforming, beholder kopien den valgte datakilden. Du får en ny utforming å redigere, mens begge fortsatt leser de samme postene. Ta med kildene når du eksporterer en Model til et annet arbeidsområde.

Lagre et produktkort som Component

Lagre et eksisterende kort når du vil bruke utformingen på en annen side.

For å starte med en egen komponent velger du Create → Component i menyen på en Organizer-mappe. Velg det første elementet under Components, for eksempel Div. Sett deretter inn elementene under det. En Component kan ha Div som rotelement. Velg en rot som passer der du skal plassere komponenten.

1. Bygg et kort på en side. Sett for eksempel inn en Div med Heading og Paragraph under.
2. Gi Div navnet Desk lamp card. Skriv Desk lamp i overskriftens Plain Text og €40.00 i avsnittets Plain Text.
3. Åpne menyen på Div-elementet i treet og velg Save as Component.
4. Under Save Component to velger du Organizer-mappen der komponenten skal lagres.
5. Finn det lagrede elementet i Organizer og gi det navnet Product card. Åpne det for å kontrollere den lagrede roten og elementene under.

Sett inn en tilkoblet Component

En tilkoblet kopi følger den lagrede komponenten når du redigerer kilden.

1. Åpne siden der komponenten skal brukes, og velg elementet som skal inneholde den.
2. Åpne Insert og deretter All Components. Finn Product card i Component Library.
3. Velg Link Product card… for å sette inn en tilkoblet kopi.
4. Lukk utforskeren og kontroller plasseringen på arbeidsflaten.
5. Åpne den lagrede Product card, endre beløpet til €45.00 og gå tilbake til siden. Den tilkoblede kopien viser €45.00.

Velg en tilkoblet eller selvstendig kopi

Velg om denne plasseringen skal følge endringer i kilden eller ha sin egen utforming.

• Link: Følg fremtidige endringer i den lagrede komponenten. Bruk det for en felles navigasjonslinje eller kortutforming.
• Copy fra Component Library: Legg til en utforming du kan endre selvstendig. Bruk den som utgangspunkt for et eget kampanjekort.
• Copy og Paste i treet: Velg det nye overordnede elementet før du limer inn. Underliggende elementer og innstillingene deres følger med.
• Copy to Clipboard og Paste from Clipboard (component): Flytt en kopiert utforming gjennom Organizer. Behold tilgang til den valgte datakilden og Components som er brukt inni den.

Endre én plassering

Velg selve den tilkoblede komponenten for å endre rotens utseende, for eksempel Display, Color eller en delt Style. Endringen gjelder denne plasseringen.

For å endre et element inni komponenten velger du elementet og Add Instance Property. Velg egenskapen du vil overstyre, og skriv verdien. Show Data Settings og Show Variable Settings åpner de tilhørende kontrollene. Det opprinnelige elementnavnet og arvede verdier er skrivebeskyttet. Rediger den lagrede komponenten når alle tilkoblede kopier skal endres.

Fjern den lokale overstyringen for å bruke kildeverdien igjen. For et annet Dataset erstatter du datakilden for plasseringen og velger tilsvarende felt i egenskapene som berøres. Kontroller både denne plasseringen og en annen tilkoblet kopi etterpå.

Les rader for den gjeldende siden

I Data Settings → Query conditions kan du sammenligne et tekstfelt med Current Locale, Current Path eller Current Path → Segment. Serveren velger samsvarende rader før data sendes til Preview eller den publiserte siden. En gjenbrukbar Component bruker siden den er satt inn på.

Current Locale er språkkoden fra sidens Locale system. Current Path er sidens rutede sti med språkprefiks, uten vert, søkestreng, fragment eller avsluttende skråstrek. Segment er siste del, for eksempel overview i /nb-no/docs/overview. Ingen treff gir ingen rader. Manglende sidekontekst vises som en feil.

For en lokalisert artikkel sammenligner du Locale med Current Locale og ArticleSlug med Current Path → Segment, koblet med and. Kontroller hvert språk i Preview, og publiser deretter. Gjeldende tilgangsregler gjelder fortsatt.

Komponentinnstillinger

Roten styrer den gjenbrukbare delen som helhet. Hvert element inni den har sitt eget innhold og utseende.

• Name: Et beskrivende navn i treet gjør elementet lettere å finne. En nylig lagret Component kan ha et generelt navn i Organizer. Gi den nytt navn før du bruker den flere steder.
• Root element: Bestemmer HTML-elementet og hvilke underliggende elementer det støtter. Div er et nyttig utgangspunkt for et kort.
• Properties: Valgfrie egenskaper starter tomme. Obligatoriske egenskaper bruker standardverdiene som følger med. Legg bare til utseende, innhold og attributter utformingen trenger.
• Data Settings: Av til du aktiverer det for elementet. Velg den faktiske Table eller det lagrede resultatet og feltene som skal vises. En kopi beholder valget og tilgangskravene.
• Variable Settings: Aktiver når plasseringen skal bruke en midlertidig verdi fra siden rundt.
• States: Legg til betingelser for det valgte elementet eller plasseringen. Bruk States-artikkelen for å lage en betinget variant.
• Design System: Bruk de ønskede designtokenene i kildekomponenten. Nettstedets valgte Design System brukes av sidene. En gjenbrukbar Component kan beholde sitt eget.

Koble til en komponentdefinisjon

Åpne Settings og velg Component Design System når komponenten skal bruke de delte designtokenene dine. Åpne Implements i verktøylinjen. Component definition starter på No definition selected. Velg en komponentdefinisjon fra dette Design System, les meldingen om kravene er oppfylt, og bruk Open … definition når du vil se kravene.

En definisjon beskriver kravene til en gjenbrukbar utforming. Kontroller forskjellene som vises, og fullfør komponenten før du bruker den som en godkjent utforming. Når du kopierer fra biblioteket, bruker du Design System på stedet du kopierer til. Erstatt eller fjern uforenlige tokenvalg hvis kopien avvises. Velg Link for å beholde kildekomponentens Design System.

Eksempler

Et tilkoblet kort følger endringer i kilden. Et kopiert kort kan ha sin egen kampanjeutforming.

Eksempel: oppdater alle tilkoblede produktkort

Lagre Desk lamp / €40.00 som Product card og koble den inn på Home. Endre beløpet i kilden til €45.00. Det tilkoblede kortet på Home viser €45.00, mens kortet du opprinnelig bygde på Home, fortsatt viser €40.00. Save as Component lagde en gjenbrukbar kopi. Velg en tilkoblet kopi der du vil at fremtidige endringer i kilden skal vises.

Eksempel: lag en kampanjevariant

Kopier Product card fra Component Library til en kampanjeside. Endre overskriften til Summer desk lamp og sett Background Color til #fff4cc. Kilden Product card beholder den opprinnelige overskriften og utseendet. Hvis du bare trenger en annen bakgrunn på én tilkoblet plassering, legger du heller egenskapen til der.

Begrensninger og vanlige feil

En tilkoblet Component trenger at kilden og dataene fortsatt er tilgjengelige alle steder der du bruker den.

• Kopier det overordnede elementet som gir data, når elementene under er avhengige av det. Koble til manglende data før du lagrer en gjenbrukbar utforming.
• Kontroller hvert erstattet felt når du endrer datakilden for en plassering. Like feltnavn kan fortsatt høre til ulike kilder.
• Behold tilgang til kildekomponenten og Components som er brukt inni den. En utilgjengelig kilde kan hindre den tilkoblede kopien i å lastes.
• Forhåndsvis kildeendringer på sidene som bruker dem. Publiser de oppdaterte sidene for å erstatte offentlig innhold som allerede er generert.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

Story · Page · Styles · States · Interactions

Component

En Component er en lagret del av en side som du kan bruke flere steder, for eksempel et produktkort, en navigasjonslinje eller et registreringspanel. Koble den inn på flere sider når de skal følge samme utforming. Kopier den når du vil gjøre egne endringer.

Slik fungerer gjenbrukbare Components

En Component lagrer elementtreet, teksten, utseendet, datainnstillingene og samhandlingen. Den åpnes i samme Story-redigeringsverktøy som en Page. En tilkoblet kopi på en side følger endringer i den lagrede komponenten. Du kan også endre enkelte egenskaper bare der kopien er plassert.

Når du kopierer en utforming, beholder kopien den valgte datakilden. Du får en ny utforming å redigere, mens begge fortsatt leser de samme postene. Ta med kildene når du eksporterer en Model til et annet arbeidsområde.

Lagre et produktkort som Component

Lagre et eksisterende kort når du vil bruke utformingen på en annen side.

For å starte med en egen komponent velger du Create → Component i menyen på en Organizer-mappe. Velg det første elementet under Components, for eksempel Div. Sett deretter inn elementene under det. En Component kan ha Div som rotelement. Velg en rot som passer der du skal plassere komponenten.

1. Bygg et kort på en side. Sett for eksempel inn en Div med Heading og Paragraph under.
2. Gi Div navnet Desk lamp card. Skriv Desk lamp i overskriftens Plain Text og €40.00 i avsnittets Plain Text.
3. Åpne menyen på Div-elementet i treet og velg Save as Component.
4. Under Save Component to velger du Organizer-mappen der komponenten skal lagres.
5. Finn det lagrede elementet i Organizer og gi det navnet Product card. Åpne det for å kontrollere den lagrede roten og elementene under.

Sett inn en tilkoblet Component

En tilkoblet kopi følger den lagrede komponenten når du redigerer kilden.

1. Åpne siden der komponenten skal brukes, og velg elementet som skal inneholde den.
2. Åpne Insert og deretter All Components. Finn Product card i Component Library.
3. Velg Link Product card… for å sette inn en tilkoblet kopi.
4. Lukk utforskeren og kontroller plasseringen på arbeidsflaten.
5. Åpne den lagrede Product card, endre beløpet til €45.00 og gå tilbake til siden. Den tilkoblede kopien viser €45.00.

Velg en tilkoblet eller selvstendig kopi

Velg om denne plasseringen skal følge endringer i kilden eller ha sin egen utforming.

• Link: Følg fremtidige endringer i den lagrede komponenten. Bruk det for en felles navigasjonslinje eller kortutforming.
• Copy fra Component Library: Legg til en utforming du kan endre selvstendig. Bruk den som utgangspunkt for et eget kampanjekort.
• Copy og Paste i treet: Velg det nye overordnede elementet før du limer inn. Underliggende elementer og innstillingene deres følger med.
• Copy to Clipboard og Paste from Clipboard (component): Flytt en kopiert utforming gjennom Organizer. Behold tilgang til den valgte datakilden og Components som er brukt inni den.

Endre én plassering

Velg selve den tilkoblede komponenten for å endre rotens utseende, for eksempel Display, Color eller en delt Style. Endringen gjelder denne plasseringen.

For å endre et element inni komponenten velger du elementet og Add Instance Property. Velg egenskapen du vil overstyre, og skriv verdien. Show Data Settings og Show Variable Settings åpner de tilhørende kontrollene. Det opprinnelige elementnavnet og arvede verdier er skrivebeskyttet. Rediger den lagrede komponenten når alle tilkoblede kopier skal endres.

Fjern den lokale overstyringen for å bruke kildeverdien igjen. For et annet Dataset erstatter du datakilden for plasseringen og velger tilsvarende felt i egenskapene som berøres. Kontroller både denne plasseringen og en annen tilkoblet kopi etterpå.

Les rader for den gjeldende siden

I Data Settings → Query conditions kan du sammenligne et tekstfelt med Current Locale, Current Path eller Current Path → Segment. Serveren velger samsvarende rader før data sendes til Preview eller den publiserte siden. En gjenbrukbar Component bruker siden den er satt inn på.

Current Locale er språkkoden fra sidens Locale system. Current Path er sidens rutede sti med språkprefiks, uten vert, søkestreng, fragment eller avsluttende skråstrek. Segment er siste del, for eksempel overview i /nb-no/docs/overview. Ingen treff gir ingen rader. Manglende sidekontekst vises som en feil.

For en lokalisert artikkel sammenligner du Locale med Current Locale og ArticleSlug med Current Path → Segment, koblet med and. Kontroller hvert språk i Preview, og publiser deretter. Gjeldende tilgangsregler gjelder fortsatt.

Komponentinnstillinger

Roten styrer den gjenbrukbare delen som helhet. Hvert element inni den har sitt eget innhold og utseende.

• Name: Et beskrivende navn i treet gjør elementet lettere å finne. En nylig lagret Component kan ha et generelt navn i Organizer. Gi den nytt navn før du bruker den flere steder.
• Root element: Bestemmer HTML-elementet og hvilke underliggende elementer det støtter. Div er et nyttig utgangspunkt for et kort.
• Properties: Valgfrie egenskaper starter tomme. Obligatoriske egenskaper bruker standardverdiene som følger med. Legg bare til utseende, innhold og attributter utformingen trenger.
• Data Settings: Av til du aktiverer det for elementet. Velg den faktiske Table eller det lagrede resultatet og feltene som skal vises. En kopi beholder valget og tilgangskravene.
• Variable Settings: Aktiver når plasseringen skal bruke en midlertidig verdi fra siden rundt.
• States: Legg til betingelser for det valgte elementet eller plasseringen. Bruk States-artikkelen for å lage en betinget variant.
• Design System: Bruk de ønskede designtokenene i kildekomponenten. Nettstedets valgte Design System brukes av sidene. En gjenbrukbar Component kan beholde sitt eget.

Koble til en komponentdefinisjon

Åpne Settings og velg Component Design System når komponenten skal bruke de delte designtokenene dine. Åpne Implements i verktøylinjen. Component definition starter på No definition selected. Velg en komponentdefinisjon fra dette Design System, les meldingen om kravene er oppfylt, og bruk Open … definition når du vil se kravene.

En definisjon beskriver kravene til en gjenbrukbar utforming. Kontroller forskjellene som vises, og fullfør komponenten før du bruker den som en godkjent utforming. Når du kopierer fra biblioteket, bruker du Design System på stedet du kopierer til. Erstatt eller fjern uforenlige tokenvalg hvis kopien avvises. Velg Link for å beholde kildekomponentens Design System.

Eksempler

Et tilkoblet kort følger endringer i kilden. Et kopiert kort kan ha sin egen kampanjeutforming.

Eksempel: oppdater alle tilkoblede produktkort

Lagre Desk lamp / €40.00 som Product card og koble den inn på Home. Endre beløpet i kilden til €45.00. Det tilkoblede kortet på Home viser €45.00, mens kortet du opprinnelig bygde på Home, fortsatt viser €40.00. Save as Component lagde en gjenbrukbar kopi. Velg en tilkoblet kopi der du vil at fremtidige endringer i kilden skal vises.

Eksempel: lag en kampanjevariant

Kopier Product card fra Component Library til en kampanjeside. Endre overskriften til Summer desk lamp og sett Background Color til #fff4cc. Kilden Product card beholder den opprinnelige overskriften og utseendet. Hvis du bare trenger en annen bakgrunn på én tilkoblet plassering, legger du heller egenskapen til der.

Begrensninger og vanlige feil

En tilkoblet Component trenger at kilden og dataene fortsatt er tilgjengelige alle steder der du bruker den.

• Kopier det overordnede elementet som gir data, når elementene under er avhengige av det. Koble til manglende data før du lagrer en gjenbrukbar utforming.
• Kontroller hvert erstattet felt når du endrer datakilden for en plassering. Like feltnavn kan fortsatt høre til ulike kilder.
• Behold tilgang til kildekomponenten og Components som er brukt inni den. En utilgjengelig kilde kan hindre den tilkoblede kopien i å lastes.
• Forhåndsvis kildeendringer på sidene som bruker dem. Publiser de oppdaterte sidene for å erstatte offentlig innhold som allerede er generert.
• Change Variable lagt til gjennom Add Instance Property på en komponent som er koblet inn i en annen komponent, er foreløpig ikke tilgjengelig.

Relaterte artikler

Story · Page · Styles · States · Interactions