States

States i Story gir et element ulike egenskaper når bestemte betingelser er oppfylt. Bruk dem for å vise at en meny er åpen, en lagervarsling eller en melding for en stående skjerm. Du beholder ett element og velger hvilke verdier det skal vise i hver situasjon.

Slik fungerer tilstander

Hver ny komponent har Default State uten betingelser. Legg til en tilstand for å overstyre bare egenskapene som skal endres, som Text, Color eller Display. Flere tilstander kan gjelde samtidig. Gyldige verdier kombineres i komponentens tilstandsrekkefølge. Hvis flere gjelder for samme egenskap, vinner den siste verdien i rekkefølgen.

En tom betingelsesliste gjelder hele tiden. Når du legger flere betingelser til en tilstand, må alle være oppfylt. En komponent vises når minst én tilstand gjelder. Behold betingelseslisten i Default State tom for å vise det vanlige innholdet. Legg deretter til en annen tilstand for endringen.

Bruk Component State for ett element. Bruk Global State når flere elementer på samme side skal følge én betingelse. Åpne tilstandskontrollene på en Style av typen CSS Class for pekereffekter, rammer ved tastaturfokus og responsive oppsett.

Lag en variabel for samhandling

Lag en lokal variabel som holder en midlertidig verdi mens siden er åpen.

En variabel holder en midlertidig verdi for siden, for eksempel om en meny er åpen. Nye lokale variabler heter My Variable, har typen String og en tom startverdi. Data Type tilbyr også Number og Object. Kontroller Default Value etter at du endrer typen. For et Object skriver du gyldig JSON, som {"selected": true}. Bruk en Table når du trenger å beholde kundens valg etter at kunden forlater siden.

1. Åpne Variables i den venstre verktøylinjen i Story.
2. Hold pekeren over roten i Variables og velg plusstegnet, deretter Add Local Variable.
3. Utvid Variables og velg My Variable for å åpne Variable Details.
4. Sett Name til menuOpen og Data Type til Boolean.
5. Sett Default Value til False. Valget Boolean setter først verdien til True. Endre den derfor uttrykkelig når menyen skal starte lukket.
6. Lukk Variable Details. Bruk Click Event på en Button for å endre variabelen når den besøkende handler. Se Interactions.

Legg til en komponenttilstand

Velg elementet som skal endres. Legg deretter til betingelsen og egenskapene som skal endres.

1. Åpne Components og velg elementet som skal endres. For en tekstendring velger du Plain Text-elementet.
2. Velg Add States i egenskapspanelet.
3. Åpne menyen med tre prikker ved States og velg New Component State.
4. Åpne redigeringskontrollen ved New State og gi tilstanden navnet Open menu.
5. Velg Add Condition. Sett Item to Compare til Value of Variable, Variable til menuOpen og Operator til Is True. Velg deretter Done.
6. Gå tilbake fra Edit State Details og velg Open menu i tilstandslisten.
7. Bruk plusstegnet ved Properties for å legge til Plain Text i denne tilstanden. Sett Text til Menu open. Behold Menu closed i Default State.
8. Test knappen på arbeidsflaten og i Preview. Velg en tilstandsrad når du vil redigere verdiene. Utfør deretter den faktiske handlingen for å kontrollere hva besøkende får se.

Del en Global State

Lag én delt betingelse og koble den til hvert element som skal følge den.

Hvert tilkoblet element følger den delte betingelsen og beholder sine egne verdier for Text, Color og andre egenskaper. Bruk Remove State for å koble fra ett element. Bruk Delete State når du vil fjerne selve den delte betingelsen, etter at du har kontrollert alle elementene som bruker den.

1. Velg en komponent med tilstandskontrollene aktivert, og åpne States-menyen.
2. Velg New Global State. Den nye tilstanden heter New State.
3. Åpne States-menyen igjen og aktiver bryteren ved den globale tilstanden for å koble den til denne komponenten.
4. Rediger tilstandsnavnet og betingelsene. Legg deretter til komponentens egenskaper for denne tilstanden.
5. Velg en annen komponent, åpne States-menyen og koble til den samme globale tilstanden. Legg til egenskapene den andre komponenten skal bruke når betingelsen er oppfylt.

Betingelsesinnstillinger

Nye betingelser starter uten valgt verdi som skal sammenlignes, operator eller sammenligningsverdi. Fyll ut betingelsen før du forventer at den skal gjelde. Når du endrer Dataset-verdien eller en sti inni den, tømmes de gamle sammenligningsvalgene slik at du kan velge det som passer den nye typen.

• Item to Compare: Velg Column from Dataset, Media Property eller Value of Variable. Valget Content of Element er ikke tilgjengelig ennå.
• Column: Velg et felt fra et Dataset, som er en Table eller et lagret resultat. Listen viser feltene det valgte elementet har tilgjengelig fra sine egne datainnstillinger eller elementene over.
• Select Path: Vises for en Object- eller Array-verdi. Velg den enkle verdien inni strukturen som skal sammenlignes, for eksempel inventory → available. Direkte Object-, Array- og JSON-verdier fra Dataset tilbyr Is Empty og Is Not Empty.
• Variable: Velg den midlertidige verdien som skal styre tilstanden, for eksempel menuOpen. Hver bruk av en gjenbrukbar komponent kan ha sin egen startverdi.
• Media Property: Velg en nettleseregenskap. For orientation skriver du portrait eller landscape med Equals. For en Boolean-egenskap velger du Is True eller Is False. Bruk Min Width eller Max Width i en responsiv Style for CSS-endringer basert på bredde.
• Operator: Velg en operator som støttes av den valgte verditypen. Sammenligningene som fungerer, er beskrevet nedenfor. Is True, Is False og tomhetskontroller trenger ingen ekstra skrevet verdi.
• Compare Value By: For en sammenligning som trenger en verdi, velger du value og skriver verdien direkte. Sammenligning med en annen variabel gjennom denne velgeren er ikke tilgjengelig ennå.
• Property Name Source: For Property Is True eller Property Is False på en Object-variabel velger du Manual Entry og Property Name, eller Column from Dataset og Column. Bruk en egenskap som selected for å kontrollere denne Boolean-verdien i objektet.
• Done: Avslutter redigeringen av denne betingelsen. Bruk pennen for å redigere den igjen eller krysset for å fjerne en betingelse i Component State. Fjerning av én enkelt Global State-betingelse er ikke tilgjengelig ennå. Add Condition legger til en betingelse som også må være oppfylt.

Operatorer som fungerer

Velg en operator for verditypen du har valgt. Sammenligningene nedenfor fungerer i States.

Velg en av disse sammenligningene for tilstanden du vil lage. Is in og de ekstra spesialiserte Dataset-sammenligningene er ikke tilgjengelige i States ennå.

• Equals / Does Not Equal: Sammenlign med en skrevet verdi av riktig type. En String status med Equals Available er forskjellig fra et tall eller en Boolean med en lignende skrevet verdi.
• > / < / >= / <=: Sammenlign enkle verdier med en skrevet verdi. Bruk en Number quantity > 0 for en etikett som viser at varen er på lager. Dato- og datotidsfelt viser tilsvarende Before/After-etiketter. Angi en sammenlignbar verdi av riktig type og kontroller det faktiske resultatet.
• Contains / Does Not Contain: Test om en String inneholder den skrevne teksten. Store og små bokstaver teller. Lamp og lamp er forskjellige.
• Starts With / Does Not Start With / Ends With / Does Not End With: Test starten eller slutten på en String, for eksempel en produktkode som starter med LAMP-.
• Is True / Is False: Bruk dem med en Boolean-variabel eller et Boolean-felt. Velg Boolean når du lager variabelen, i stedet for å lagre ordet true som tekst.
• Is Empty / Is Not Empty: Kontroller tom tekst, null eller et tomt Object/Array. Både nulltallet og False regnes som verdier. Kontroller at det valgte feltet er lastet før du tolker et tomt resultat.
• Property Is True / Property Is False: Kontroller en Boolean-verdi i en Object-variabel ved hjelp av valgt egenskapsnavn. Property Is False gjelder også når egenskapen mangler eller ikke har verdien true. Direkte Object-kolonner fra Dataset bruker fortsatt bare tomhetskontrollene. Velg en enkel verdi inni objektet for en Boolean-sammenligning.

Rediger og fjern tilstander

Velg en tilstandsrad for å redigere egenskapene. Bruk pennen for å endre navnet og betingelsene. Gå tilbake til Default State når du vil endre elementets vanlige utseende eller innhold.

Bruk Delete State for å fjerne en valgt komponenttilstand. Remove States lukker kontrollene for tilstandsredigering. For en Global State bruker du Remove State når bare det valgte elementet skal slutte å følge den. Kontroller resultatet når flere tilstander kan gjelde samtidig.

Eksempler

Disse eksemplene leser en midlertidig variabel, et produktantall eller retningen på visningsområdet.

Eksempel: en menystatus

Med menuOpen satt til False er teksten Menu closed. Gi Open menu betingelsen Value of Variable → menuOpen → Is True og Text Menu open. Konfigurer Click Event på Toggle menu-knappen som Change Variable → menuOpen → Apply Function to Value → Switch. Ett klikk viser Menu open. Et nytt klikk viser Menu closed.

Eksempel: en lagervarsling

Et gjentatt produktkort leser name og quantity fra sitt Dataset. Desk lamp har quantity 12. Pendant lamp har quantity 0. Gi en etikett teksten Available i Default State. Legg deretter til en Out of stock-tilstand med Column from Dataset → quantity → Equals → value → 0 og Text Out of stock. Bare Pendant lamp får denne teksten. Betingelsen leser raden til hvert kort og lar begge antallene være uendret.

Eksempel: et hint for stående visning

Bruk en ubetinget Default State for en kort instruksjon. Legg til en Portrait hint-tilstand med Media Property → orientation → Equals → value → portrait og en lengre Text-verdi. Den samme komponenten endrer teksten med retningen på visningsområdet. Bruk heller en responsiv Style når bare skriftstørrelse eller avstand skal endres.

Begrensninger og vanlige feil

Fullfør hver betingelse før du tester den. Hvis hele betingelseslisten er tom, gjelder tilstanden hele tiden. Legg derfor til betingelsen du vil bruke, før du skriver en overstyring. Hvis resultatet er uventet, kontrollerer du valgt felt eller variabel, den nåværende verdien og sammenligningen.

Avslutt med Done og gå tilbake fra Edit State Details før du velger et annet element. Hvis du bytter element mens denne redigeringen er åpen, kan Properties bli tomt. Åpne siden på nytt hvis det skjer.

Koble en Global State til hvert element som skal bruke den. Behold menyvalg og lignende midlertidige verdier i variabler. Lagre kundeforespørsler eller beslutninger i en Table.

Velg hvem som kan lese et Dataset i tilgangsinnstillingene, også når en tilstand skjuler et element. Åpne siden på nytt for å kontrollere det lagrede oppsettet. Publiser på nytt når besøkende skal få de oppdaterte betingelsene eller verdiene.

Relaterte artikler

Bruk Interactions for å endre en variabel og Styles eller Responsive for å endre utseende.

• Interactions: Endre en variabel eller kall en komponenthandling fra en hendelse.
• Styles: Legg til Hover, Focus visible og andre CSS-tilstander for utseende.
• Responsiv utforming: Konfigurer bredde- og høydespørringer på Styles av typen CSS Class.
• Story: Bygg komponenttreet og koble egenskapene til data.
• Page: Angi sidens data, sti og resultat.

States

States i Story gir et element ulike egenskaper når bestemte betingelser er oppfylt. Bruk dem for å vise at en meny er åpen, en lagervarsling eller en melding for en stående skjerm. Du beholder ett element og velger hvilke verdier det skal vise i hver situasjon.

Slik fungerer tilstander

Hver ny komponent har Default State uten betingelser. Legg til en tilstand for å overstyre bare egenskapene som skal endres, som Text, Color eller Display. Flere tilstander kan gjelde samtidig. Gyldige verdier kombineres i komponentens tilstandsrekkefølge. Hvis flere gjelder for samme egenskap, vinner den siste verdien i rekkefølgen.

En tom betingelsesliste gjelder hele tiden. Når du legger flere betingelser til en tilstand, må alle være oppfylt. En komponent vises når minst én tilstand gjelder. Behold betingelseslisten i Default State tom for å vise det vanlige innholdet. Legg deretter til en annen tilstand for endringen.

Bruk Component State for ett element. Bruk Global State når flere elementer på samme side skal følge én betingelse. Åpne tilstandskontrollene på en Style av typen CSS Class for pekereffekter, rammer ved tastaturfokus og responsive oppsett.

Lag en variabel for samhandling

Lag en lokal variabel som holder en midlertidig verdi mens siden er åpen.

En variabel holder en midlertidig verdi for siden, for eksempel om en meny er åpen. Nye lokale variabler heter My Variable, har typen String og en tom startverdi. Data Type tilbyr også Number og Object. Kontroller Default Value etter at du endrer typen. For et Object skriver du gyldig JSON, som {"selected": true}. Bruk en Table når du trenger å beholde kundens valg etter at kunden forlater siden.

1. Åpne Variables i den venstre verktøylinjen i Story.
2. Hold pekeren over roten i Variables og velg plusstegnet, deretter Add Local Variable.
3. Utvid Variables og velg My Variable for å åpne Variable Details.
4. Sett Name til menuOpen og Data Type til Boolean.
5. Sett Default Value til False. Valget Boolean setter først verdien til True. Endre den derfor uttrykkelig når menyen skal starte lukket.
6. Lukk Variable Details. Bruk Click Event på en Button for å endre variabelen når den besøkende handler. Se Interactions.

Legg til en komponenttilstand

Velg elementet som skal endres. Legg deretter til betingelsen og egenskapene som skal endres.

1. Åpne Components og velg elementet som skal endres. For en tekstendring velger du Plain Text-elementet.
2. Velg Add States i egenskapspanelet.
3. Åpne menyen med tre prikker ved States og velg New Component State.
4. Åpne redigeringskontrollen ved New State og gi tilstanden navnet Open menu.
5. Velg Add Condition. Sett Item to Compare til Value of Variable, Variable til menuOpen og Operator til Is True. Velg deretter Done.
6. Gå tilbake fra Edit State Details og velg Open menu i tilstandslisten.
7. Bruk plusstegnet ved Properties for å legge til Plain Text i denne tilstanden. Sett Text til Menu open. Behold Menu closed i Default State.
8. Test knappen på arbeidsflaten og i Preview. Velg en tilstandsrad når du vil redigere verdiene. Utfør deretter den faktiske handlingen for å kontrollere hva besøkende får se.

Del en Global State

Lag én delt betingelse og koble den til hvert element som skal følge den.

Hvert tilkoblet element følger den delte betingelsen og beholder sine egne verdier for Text, Color og andre egenskaper. Bruk Remove State for å koble fra ett element. Bruk Delete State når du vil fjerne selve den delte betingelsen, etter at du har kontrollert alle elementene som bruker den.

1. Velg en komponent med tilstandskontrollene aktivert, og åpne States-menyen.
2. Velg New Global State. Den nye tilstanden heter New State.
3. Åpne States-menyen igjen og aktiver bryteren ved den globale tilstanden for å koble den til denne komponenten.
4. Rediger tilstandsnavnet og betingelsene. Legg deretter til komponentens egenskaper for denne tilstanden.
5. Velg en annen komponent, åpne States-menyen og koble til den samme globale tilstanden. Legg til egenskapene den andre komponenten skal bruke når betingelsen er oppfylt.

Betingelsesinnstillinger

Nye betingelser starter uten valgt verdi som skal sammenlignes, operator eller sammenligningsverdi. Fyll ut betingelsen før du forventer at den skal gjelde. Når du endrer Dataset-verdien eller en sti inni den, tømmes de gamle sammenligningsvalgene slik at du kan velge det som passer den nye typen.

• Item to Compare: Velg Column from Dataset, Media Property eller Value of Variable. Valget Content of Element er ikke tilgjengelig ennå.
• Column: Velg et felt fra et Dataset, som er en Table eller et lagret resultat. Listen viser feltene det valgte elementet har tilgjengelig fra sine egne datainnstillinger eller elementene over.
• Select Path: Vises for en Object- eller Array-verdi. Velg den enkle verdien inni strukturen som skal sammenlignes, for eksempel inventory → available. Direkte Object-, Array- og JSON-verdier fra Dataset tilbyr Is Empty og Is Not Empty.
• Variable: Velg den midlertidige verdien som skal styre tilstanden, for eksempel menuOpen. Hver bruk av en gjenbrukbar komponent kan ha sin egen startverdi.
• Media Property: Velg en nettleseregenskap. For orientation skriver du portrait eller landscape med Equals. For en Boolean-egenskap velger du Is True eller Is False. Bruk Min Width eller Max Width i en responsiv Style for CSS-endringer basert på bredde.
• Operator: Velg en operator som støttes av den valgte verditypen. Sammenligningene som fungerer, er beskrevet nedenfor. Is True, Is False og tomhetskontroller trenger ingen ekstra skrevet verdi.
• Compare Value By: For en sammenligning som trenger en verdi, velger du value og skriver verdien direkte. Sammenligning med en annen variabel gjennom denne velgeren er ikke tilgjengelig ennå.
• Property Name Source: For Property Is True eller Property Is False på en Object-variabel velger du Manual Entry og Property Name, eller Column from Dataset og Column. Bruk en egenskap som selected for å kontrollere denne Boolean-verdien i objektet.
• Done: Avslutter redigeringen av denne betingelsen. Bruk pennen for å redigere den igjen eller krysset for å fjerne en betingelse i Component State. Fjerning av én enkelt Global State-betingelse er ikke tilgjengelig ennå. Add Condition legger til en betingelse som også må være oppfylt.

Operatorer som fungerer

Velg en operator for verditypen du har valgt. Sammenligningene nedenfor fungerer i States.

Velg en av disse sammenligningene for tilstanden du vil lage. Is in og de ekstra spesialiserte Dataset-sammenligningene er ikke tilgjengelige i States ennå.

• Equals / Does Not Equal: Sammenlign med en skrevet verdi av riktig type. En String status med Equals Available er forskjellig fra et tall eller en Boolean med en lignende skrevet verdi.
• > / < / >= / <=: Sammenlign enkle verdier med en skrevet verdi. Bruk en Number quantity > 0 for en etikett som viser at varen er på lager. Dato- og datotidsfelt viser tilsvarende Before/After-etiketter. Angi en sammenlignbar verdi av riktig type og kontroller det faktiske resultatet.
• Contains / Does Not Contain: Test om en String inneholder den skrevne teksten. Store og små bokstaver teller. Lamp og lamp er forskjellige.
• Starts With / Does Not Start With / Ends With / Does Not End With: Test starten eller slutten på en String, for eksempel en produktkode som starter med LAMP-.
• Is True / Is False: Bruk dem med en Boolean-variabel eller et Boolean-felt. Velg Boolean når du lager variabelen, i stedet for å lagre ordet true som tekst.
• Is Empty / Is Not Empty: Kontroller tom tekst, null eller et tomt Object/Array. Både nulltallet og False regnes som verdier. Kontroller at det valgte feltet er lastet før du tolker et tomt resultat.
• Property Is True / Property Is False: Kontroller en Boolean-verdi i en Object-variabel ved hjelp av valgt egenskapsnavn. Property Is False gjelder også når egenskapen mangler eller ikke har verdien true. Direkte Object-kolonner fra Dataset bruker fortsatt bare tomhetskontrollene. Velg en enkel verdi inni objektet for en Boolean-sammenligning.

Rediger og fjern tilstander

Velg en tilstandsrad for å redigere egenskapene. Bruk pennen for å endre navnet og betingelsene. Gå tilbake til Default State når du vil endre elementets vanlige utseende eller innhold.

Bruk Delete State for å fjerne en valgt komponenttilstand. Remove States lukker kontrollene for tilstandsredigering. For en Global State bruker du Remove State når bare det valgte elementet skal slutte å følge den. Kontroller resultatet når flere tilstander kan gjelde samtidig.

Eksempler

Disse eksemplene leser en midlertidig variabel, et produktantall eller retningen på visningsområdet.

Eksempel: en menystatus

Med menuOpen satt til False er teksten Menu closed. Gi Open menu betingelsen Value of Variable → menuOpen → Is True og Text Menu open. Konfigurer Click Event på Toggle menu-knappen som Change Variable → menuOpen → Apply Function to Value → Switch. Ett klikk viser Menu open. Et nytt klikk viser Menu closed.

Eksempel: en lagervarsling

Et gjentatt produktkort leser name og quantity fra sitt Dataset. Desk lamp har quantity 12. Pendant lamp har quantity 0. Gi en etikett teksten Available i Default State. Legg deretter til en Out of stock-tilstand med Column from Dataset → quantity → Equals → value → 0 og Text Out of stock. Bare Pendant lamp får denne teksten. Betingelsen leser raden til hvert kort og lar begge antallene være uendret.

Eksempel: et hint for stående visning

Bruk en ubetinget Default State for en kort instruksjon. Legg til en Portrait hint-tilstand med Media Property → orientation → Equals → value → portrait og en lengre Text-verdi. Den samme komponenten endrer teksten med retningen på visningsområdet. Bruk heller en responsiv Style når bare skriftstørrelse eller avstand skal endres.

Begrensninger og vanlige feil

Fullfør hver betingelse før du tester den. Hvis hele betingelseslisten er tom, gjelder tilstanden hele tiden. Legg derfor til betingelsen du vil bruke, før du skriver en overstyring. Hvis resultatet er uventet, kontrollerer du valgt felt eller variabel, den nåværende verdien og sammenligningen.

Avslutt med Done og gå tilbake fra Edit State Details før du velger et annet element. Hvis du bytter element mens denne redigeringen er åpen, kan Properties bli tomt. Åpne siden på nytt hvis det skjer.

Koble en Global State til hvert element som skal bruke den. Behold menyvalg og lignende midlertidige verdier i variabler. Lagre kundeforespørsler eller beslutninger i en Table.

Velg hvem som kan lese et Dataset i tilgangsinnstillingene, også når en tilstand skjuler et element. Åpne siden på nytt for å kontrollere det lagrede oppsettet. Publiser på nytt når besøkende skal få de oppdaterte betingelsene eller verdiene.

Relaterte artikler

Bruk Interactions for å endre en variabel og Styles eller Responsive for å endre utseende.

• Interactions: Endre en variabel eller kall en komponenthandling fra en hendelse.
• Styles: Legg til Hover, Focus visible og andre CSS-tilstander for utseende.
• Responsiv utforming: Konfigurer bredde- og høydespørringer på Styles av typen CSS Class.
• Story: Bygg komponenttreet og koble egenskapene til data.
• Page: Angi sidens data, sti og resultat.

States

States i Story gir et element ulike egenskaper når bestemte betingelser er oppfylt. Bruk dem for å vise at en meny er åpen, en lagervarsling eller en melding for en stående skjerm. Du beholder ett element og velger hvilke verdier det skal vise i hver situasjon.

Slik fungerer tilstander

Hver ny komponent har Default State uten betingelser. Legg til en tilstand for å overstyre bare egenskapene som skal endres, som Text, Color eller Display. Flere tilstander kan gjelde samtidig. Gyldige verdier kombineres i komponentens tilstandsrekkefølge. Hvis flere gjelder for samme egenskap, vinner den siste verdien i rekkefølgen.

En tom betingelsesliste gjelder hele tiden. Når du legger flere betingelser til en tilstand, må alle være oppfylt. En komponent vises når minst én tilstand gjelder. Behold betingelseslisten i Default State tom for å vise det vanlige innholdet. Legg deretter til en annen tilstand for endringen.

Bruk Component State for ett element. Bruk Global State når flere elementer på samme side skal følge én betingelse. Åpne tilstandskontrollene på en Style av typen CSS Class for pekereffekter, rammer ved tastaturfokus og responsive oppsett.

Lag en variabel for samhandling

Lag en lokal variabel som holder en midlertidig verdi mens siden er åpen.

En variabel holder en midlertidig verdi for siden, for eksempel om en meny er åpen. Nye lokale variabler heter My Variable, har typen String og en tom startverdi. Data Type tilbyr også Number og Object. Kontroller Default Value etter at du endrer typen. For et Object skriver du gyldig JSON, som {"selected": true}. Bruk en Table når du trenger å beholde kundens valg etter at kunden forlater siden.

1. Åpne Variables i den venstre verktøylinjen i Story.
2. Hold pekeren over roten i Variables og velg plusstegnet, deretter Add Local Variable.
3. Utvid Variables og velg My Variable for å åpne Variable Details.
4. Sett Name til menuOpen og Data Type til Boolean.
5. Sett Default Value til False. Valget Boolean setter først verdien til True. Endre den derfor uttrykkelig når menyen skal starte lukket.
6. Lukk Variable Details. Bruk Click Event på en Button for å endre variabelen når den besøkende handler. Se Interactions.

Legg til en komponenttilstand

Velg elementet som skal endres. Legg deretter til betingelsen og egenskapene som skal endres.

1. Åpne Components og velg elementet som skal endres. For en tekstendring velger du Plain Text-elementet.
2. Velg Add States i egenskapspanelet.
3. Åpne menyen med tre prikker ved States og velg New Component State.
4. Åpne redigeringskontrollen ved New State og gi tilstanden navnet Open menu.
5. Velg Add Condition. Sett Item to Compare til Value of Variable, Variable til menuOpen og Operator til Is True. Velg deretter Done.
6. Gå tilbake fra Edit State Details og velg Open menu i tilstandslisten.
7. Bruk plusstegnet ved Properties for å legge til Plain Text i denne tilstanden. Sett Text til Menu open. Behold Menu closed i Default State.
8. Test knappen på arbeidsflaten og i Preview. Velg en tilstandsrad når du vil redigere verdiene. Utfør deretter den faktiske handlingen for å kontrollere hva besøkende får se.

Del en Global State

Lag én delt betingelse og koble den til hvert element som skal følge den.

Hvert tilkoblet element følger den delte betingelsen og beholder sine egne verdier for Text, Color og andre egenskaper. Bruk Remove State for å koble fra ett element. Bruk Delete State når du vil fjerne selve den delte betingelsen, etter at du har kontrollert alle elementene som bruker den.

1. Velg en komponent med tilstandskontrollene aktivert, og åpne States-menyen.
2. Velg New Global State. Den nye tilstanden heter New State.
3. Åpne States-menyen igjen og aktiver bryteren ved den globale tilstanden for å koble den til denne komponenten.
4. Rediger tilstandsnavnet og betingelsene. Legg deretter til komponentens egenskaper for denne tilstanden.
5. Velg en annen komponent, åpne States-menyen og koble til den samme globale tilstanden. Legg til egenskapene den andre komponenten skal bruke når betingelsen er oppfylt.

Betingelsesinnstillinger

Nye betingelser starter uten valgt verdi som skal sammenlignes, operator eller sammenligningsverdi. Fyll ut betingelsen før du forventer at den skal gjelde. Når du endrer Dataset-verdien eller en sti inni den, tømmes de gamle sammenligningsvalgene slik at du kan velge det som passer den nye typen.

• Item to Compare: Velg Column from Dataset, Media Property eller Value of Variable. Valget Content of Element er ikke tilgjengelig ennå.
• Column: Velg et felt fra et Dataset, som er en Table eller et lagret resultat. Listen viser feltene det valgte elementet har tilgjengelig fra sine egne datainnstillinger eller elementene over.
• Select Path: Vises for en Object- eller Array-verdi. Velg den enkle verdien inni strukturen som skal sammenlignes, for eksempel inventory → available. Direkte Object-, Array- og JSON-verdier fra Dataset tilbyr Is Empty og Is Not Empty.
• Variable: Velg den midlertidige verdien som skal styre tilstanden, for eksempel menuOpen. Hver bruk av en gjenbrukbar komponent kan ha sin egen startverdi.
• Media Property: Velg en nettleseregenskap. For orientation skriver du portrait eller landscape med Equals. For en Boolean-egenskap velger du Is True eller Is False. Bruk Min Width eller Max Width i en responsiv Style for CSS-endringer basert på bredde.
• Operator: Velg en operator som støttes av den valgte verditypen. Sammenligningene som fungerer, er beskrevet nedenfor. Is True, Is False og tomhetskontroller trenger ingen ekstra skrevet verdi.
• Compare Value By: For en sammenligning som trenger en verdi, velger du value og skriver verdien direkte. Sammenligning med en annen variabel gjennom denne velgeren er ikke tilgjengelig ennå.
• Property Name Source: For Property Is True eller Property Is False på en Object-variabel velger du Manual Entry og Property Name, eller Column from Dataset og Column. Bruk en egenskap som selected for å kontrollere denne Boolean-verdien i objektet.
• Done: Avslutter redigeringen av denne betingelsen. Bruk pennen for å redigere den igjen eller krysset for å fjerne en betingelse i Component State. Fjerning av én enkelt Global State-betingelse er ikke tilgjengelig ennå. Add Condition legger til en betingelse som også må være oppfylt.

Operatorer som fungerer

Velg en operator for verditypen du har valgt. Sammenligningene nedenfor fungerer i States.

Velg en av disse sammenligningene for tilstanden du vil lage. Is in og de ekstra spesialiserte Dataset-sammenligningene er ikke tilgjengelige i States ennå.

• Equals / Does Not Equal: Sammenlign med en skrevet verdi av riktig type. En String status med Equals Available er forskjellig fra et tall eller en Boolean med en lignende skrevet verdi.
• > / < / >= / <=: Sammenlign enkle verdier med en skrevet verdi. Bruk en Number quantity > 0 for en etikett som viser at varen er på lager. Dato- og datotidsfelt viser tilsvarende Before/After-etiketter. Angi en sammenlignbar verdi av riktig type og kontroller det faktiske resultatet.
• Contains / Does Not Contain: Test om en String inneholder den skrevne teksten. Store og små bokstaver teller. Lamp og lamp er forskjellige.
• Starts With / Does Not Start With / Ends With / Does Not End With: Test starten eller slutten på en String, for eksempel en produktkode som starter med LAMP-.
• Is True / Is False: Bruk dem med en Boolean-variabel eller et Boolean-felt. Velg Boolean når du lager variabelen, i stedet for å lagre ordet true som tekst.
• Is Empty / Is Not Empty: Kontroller tom tekst, null eller et tomt Object/Array. Både nulltallet og False regnes som verdier. Kontroller at det valgte feltet er lastet før du tolker et tomt resultat.
• Property Is True / Property Is False: Kontroller en Boolean-verdi i en Object-variabel ved hjelp av valgt egenskapsnavn. Property Is False gjelder også når egenskapen mangler eller ikke har verdien true. Direkte Object-kolonner fra Dataset bruker fortsatt bare tomhetskontrollene. Velg en enkel verdi inni objektet for en Boolean-sammenligning.

Rediger og fjern tilstander

Velg en tilstandsrad for å redigere egenskapene. Bruk pennen for å endre navnet og betingelsene. Gå tilbake til Default State når du vil endre elementets vanlige utseende eller innhold.

Bruk Delete State for å fjerne en valgt komponenttilstand. Remove States lukker kontrollene for tilstandsredigering. For en Global State bruker du Remove State når bare det valgte elementet skal slutte å følge den. Kontroller resultatet når flere tilstander kan gjelde samtidig.

Eksempler

Disse eksemplene leser en midlertidig variabel, et produktantall eller retningen på visningsområdet.

Eksempel: en menystatus

Med menuOpen satt til False er teksten Menu closed. Gi Open menu betingelsen Value of Variable → menuOpen → Is True og Text Menu open. Konfigurer Click Event på Toggle menu-knappen som Change Variable → menuOpen → Apply Function to Value → Switch. Ett klikk viser Menu open. Et nytt klikk viser Menu closed.

Eksempel: en lagervarsling

Et gjentatt produktkort leser name og quantity fra sitt Dataset. Desk lamp har quantity 12. Pendant lamp har quantity 0. Gi en etikett teksten Available i Default State. Legg deretter til en Out of stock-tilstand med Column from Dataset → quantity → Equals → value → 0 og Text Out of stock. Bare Pendant lamp får denne teksten. Betingelsen leser raden til hvert kort og lar begge antallene være uendret.

Eksempel: et hint for stående visning

Bruk en ubetinget Default State for en kort instruksjon. Legg til en Portrait hint-tilstand med Media Property → orientation → Equals → value → portrait og en lengre Text-verdi. Den samme komponenten endrer teksten med retningen på visningsområdet. Bruk heller en responsiv Style når bare skriftstørrelse eller avstand skal endres.

Begrensninger og vanlige feil

Fullfør hver betingelse før du tester den. Hvis hele betingelseslisten er tom, gjelder tilstanden hele tiden. Legg derfor til betingelsen du vil bruke, før du skriver en overstyring. Hvis resultatet er uventet, kontrollerer du valgt felt eller variabel, den nåværende verdien og sammenligningen.

Avslutt med Done og gå tilbake fra Edit State Details før du velger et annet element. Hvis du bytter element mens denne redigeringen er åpen, kan Properties bli tomt. Åpne siden på nytt hvis det skjer.

Koble en Global State til hvert element som skal bruke den. Behold menyvalg og lignende midlertidige verdier i variabler. Lagre kundeforespørsler eller beslutninger i en Table.

Velg hvem som kan lese et Dataset i tilgangsinnstillingene, også når en tilstand skjuler et element. Åpne siden på nytt for å kontrollere det lagrede oppsettet. Publiser på nytt når besøkende skal få de oppdaterte betingelsene eller verdiene.

Relaterte artikler

Bruk Interactions for å endre en variabel og Styles eller Responsive for å endre utseende.

• Interactions: Endre en variabel eller kall en komponenthandling fra en hendelse.
• Styles: Legg til Hover, Focus visible og andre CSS-tilstander for utseende.
• Responsiv utforming: Konfigurer bredde- og høydespørringer på Styles av typen CSS Class.
• Story: Bygg komponenttreet og koble egenskapene til data.
• Page: Angi sidens data, sti og resultat.

States

States i Story gir et element ulike egenskaper når bestemte betingelser er oppfylt. Bruk dem for å vise at en meny er åpen, en lagervarsling eller en melding for en stående skjerm. Du beholder ett element og velger hvilke verdier det skal vise i hver situasjon.

Slik fungerer tilstander

Hver ny komponent har Default State uten betingelser. Legg til en tilstand for å overstyre bare egenskapene som skal endres, som Text, Color eller Display. Flere tilstander kan gjelde samtidig. Gyldige verdier kombineres i komponentens tilstandsrekkefølge. Hvis flere gjelder for samme egenskap, vinner den siste verdien i rekkefølgen.

En tom betingelsesliste gjelder hele tiden. Når du legger flere betingelser til en tilstand, må alle være oppfylt. En komponent vises når minst én tilstand gjelder. Behold betingelseslisten i Default State tom for å vise det vanlige innholdet. Legg deretter til en annen tilstand for endringen.

Bruk Component State for ett element. Bruk Global State når flere elementer på samme side skal følge én betingelse. Åpne tilstandskontrollene på en Style av typen CSS Class for pekereffekter, rammer ved tastaturfokus og responsive oppsett.

Lag en variabel for samhandling

Lag en lokal variabel som holder en midlertidig verdi mens siden er åpen.

En variabel holder en midlertidig verdi for siden, for eksempel om en meny er åpen. Nye lokale variabler heter My Variable, har typen String og en tom startverdi. Data Type tilbyr også Number og Object. Kontroller Default Value etter at du endrer typen. For et Object skriver du gyldig JSON, som {"selected": true}. Bruk en Table når du trenger å beholde kundens valg etter at kunden forlater siden.

1. Åpne Variables i den venstre verktøylinjen i Story.
2. Hold pekeren over roten i Variables og velg plusstegnet, deretter Add Local Variable.
3. Utvid Variables og velg My Variable for å åpne Variable Details.
4. Sett Name til menuOpen og Data Type til Boolean.
5. Sett Default Value til False. Valget Boolean setter først verdien til True. Endre den derfor uttrykkelig når menyen skal starte lukket.
6. Lukk Variable Details. Bruk Click Event på en Button for å endre variabelen når den besøkende handler. Se Interactions.

Legg til en komponenttilstand

Velg elementet som skal endres. Legg deretter til betingelsen og egenskapene som skal endres.

1. Åpne Components og velg elementet som skal endres. For en tekstendring velger du Plain Text-elementet.
2. Velg Add States i egenskapspanelet.
3. Åpne menyen med tre prikker ved States og velg New Component State.
4. Åpne redigeringskontrollen ved New State og gi tilstanden navnet Open menu.
5. Velg Add Condition. Sett Item to Compare til Value of Variable, Variable til menuOpen og Operator til Is True. Velg deretter Done.
6. Gå tilbake fra Edit State Details og velg Open menu i tilstandslisten.
7. Bruk plusstegnet ved Properties for å legge til Plain Text i denne tilstanden. Sett Text til Menu open. Behold Menu closed i Default State.
8. Test knappen på arbeidsflaten og i Preview. Velg en tilstandsrad når du vil redigere verdiene. Utfør deretter den faktiske handlingen for å kontrollere hva besøkende får se.

Del en Global State

Lag én delt betingelse og koble den til hvert element som skal følge den.

Hvert tilkoblet element følger den delte betingelsen og beholder sine egne verdier for Text, Color og andre egenskaper. Bruk Remove State for å koble fra ett element. Bruk Delete State når du vil fjerne selve den delte betingelsen, etter at du har kontrollert alle elementene som bruker den.

1. Velg en komponent med tilstandskontrollene aktivert, og åpne States-menyen.
2. Velg New Global State. Den nye tilstanden heter New State.
3. Åpne States-menyen igjen og aktiver bryteren ved den globale tilstanden for å koble den til denne komponenten.
4. Rediger tilstandsnavnet og betingelsene. Legg deretter til komponentens egenskaper for denne tilstanden.
5. Velg en annen komponent, åpne States-menyen og koble til den samme globale tilstanden. Legg til egenskapene den andre komponenten skal bruke når betingelsen er oppfylt.

Betingelsesinnstillinger

Nye betingelser starter uten valgt verdi som skal sammenlignes, operator eller sammenligningsverdi. Fyll ut betingelsen før du forventer at den skal gjelde. Når du endrer Dataset-verdien eller en sti inni den, tømmes de gamle sammenligningsvalgene slik at du kan velge det som passer den nye typen.

• Item to Compare: Velg Column from Dataset, Media Property eller Value of Variable. Valget Content of Element er ikke tilgjengelig ennå.
• Column: Velg et felt fra et Dataset, som er en Table eller et lagret resultat. Listen viser feltene det valgte elementet har tilgjengelig fra sine egne datainnstillinger eller elementene over.
• Select Path: Vises for en Object- eller Array-verdi. Velg den enkle verdien inni strukturen som skal sammenlignes, for eksempel inventory → available. Direkte Object-, Array- og JSON-verdier fra Dataset tilbyr Is Empty og Is Not Empty.
• Variable: Velg den midlertidige verdien som skal styre tilstanden, for eksempel menuOpen. Hver bruk av en gjenbrukbar komponent kan ha sin egen startverdi.
• Media Property: Velg en nettleseregenskap. For orientation skriver du portrait eller landscape med Equals. For en Boolean-egenskap velger du Is True eller Is False. Bruk Min Width eller Max Width i en responsiv Style for CSS-endringer basert på bredde.
• Operator: Velg en operator som støttes av den valgte verditypen. Sammenligningene som fungerer, er beskrevet nedenfor. Is True, Is False og tomhetskontroller trenger ingen ekstra skrevet verdi.
• Compare Value By: For en sammenligning som trenger en verdi, velger du value og skriver verdien direkte. Sammenligning med en annen variabel gjennom denne velgeren er ikke tilgjengelig ennå.
• Property Name Source: For Property Is True eller Property Is False på en Object-variabel velger du Manual Entry og Property Name, eller Column from Dataset og Column. Bruk en egenskap som selected for å kontrollere denne Boolean-verdien i objektet.
• Done: Avslutter redigeringen av denne betingelsen. Bruk pennen for å redigere den igjen eller krysset for å fjerne en betingelse i Component State. Fjerning av én enkelt Global State-betingelse er ikke tilgjengelig ennå. Add Condition legger til en betingelse som også må være oppfylt.

Operatorer som fungerer

Velg en operator for verditypen du har valgt. Sammenligningene nedenfor fungerer i States.

Velg en av disse sammenligningene for tilstanden du vil lage. Is in og de ekstra spesialiserte Dataset-sammenligningene er ikke tilgjengelige i States ennå.

• Equals / Does Not Equal: Sammenlign med en skrevet verdi av riktig type. En String status med Equals Available er forskjellig fra et tall eller en Boolean med en lignende skrevet verdi.
• > / < / >= / <=: Sammenlign enkle verdier med en skrevet verdi. Bruk en Number quantity > 0 for en etikett som viser at varen er på lager. Dato- og datotidsfelt viser tilsvarende Before/After-etiketter. Angi en sammenlignbar verdi av riktig type og kontroller det faktiske resultatet.
• Contains / Does Not Contain: Test om en String inneholder den skrevne teksten. Store og små bokstaver teller. Lamp og lamp er forskjellige.
• Starts With / Does Not Start With / Ends With / Does Not End With: Test starten eller slutten på en String, for eksempel en produktkode som starter med LAMP-.
• Is True / Is False: Bruk dem med en Boolean-variabel eller et Boolean-felt. Velg Boolean når du lager variabelen, i stedet for å lagre ordet true som tekst.
• Is Empty / Is Not Empty: Kontroller tom tekst, null eller et tomt Object/Array. Både nulltallet og False regnes som verdier. Kontroller at det valgte feltet er lastet før du tolker et tomt resultat.
• Property Is True / Property Is False: Kontroller en Boolean-verdi i en Object-variabel ved hjelp av valgt egenskapsnavn. Property Is False gjelder også når egenskapen mangler eller ikke har verdien true. Direkte Object-kolonner fra Dataset bruker fortsatt bare tomhetskontrollene. Velg en enkel verdi inni objektet for en Boolean-sammenligning.

Rediger og fjern tilstander

Velg en tilstandsrad for å redigere egenskapene. Bruk pennen for å endre navnet og betingelsene. Gå tilbake til Default State når du vil endre elementets vanlige utseende eller innhold.

Bruk Delete State for å fjerne en valgt komponenttilstand. Remove States lukker kontrollene for tilstandsredigering. For en Global State bruker du Remove State når bare det valgte elementet skal slutte å følge den. Kontroller resultatet når flere tilstander kan gjelde samtidig.

Eksempler

Disse eksemplene leser en midlertidig variabel, et produktantall eller retningen på visningsområdet.

Eksempel: en menystatus

Med menuOpen satt til False er teksten Menu closed. Gi Open menu betingelsen Value of Variable → menuOpen → Is True og Text Menu open. Konfigurer Click Event på Toggle menu-knappen som Change Variable → menuOpen → Apply Function to Value → Switch. Ett klikk viser Menu open. Et nytt klikk viser Menu closed.

Eksempel: en lagervarsling

Et gjentatt produktkort leser name og quantity fra sitt Dataset. Desk lamp har quantity 12. Pendant lamp har quantity 0. Gi en etikett teksten Available i Default State. Legg deretter til en Out of stock-tilstand med Column from Dataset → quantity → Equals → value → 0 og Text Out of stock. Bare Pendant lamp får denne teksten. Betingelsen leser raden til hvert kort og lar begge antallene være uendret.

Eksempel: et hint for stående visning

Bruk en ubetinget Default State for en kort instruksjon. Legg til en Portrait hint-tilstand med Media Property → orientation → Equals → value → portrait og en lengre Text-verdi. Den samme komponenten endrer teksten med retningen på visningsområdet. Bruk heller en responsiv Style når bare skriftstørrelse eller avstand skal endres.

Begrensninger og vanlige feil

Fullfør hver betingelse før du tester den. Hvis hele betingelseslisten er tom, gjelder tilstanden hele tiden. Legg derfor til betingelsen du vil bruke, før du skriver en overstyring. Hvis resultatet er uventet, kontrollerer du valgt felt eller variabel, den nåværende verdien og sammenligningen.

Avslutt med Done og gå tilbake fra Edit State Details før du velger et annet element. Hvis du bytter element mens denne redigeringen er åpen, kan Properties bli tomt. Åpne siden på nytt hvis det skjer.

Koble en Global State til hvert element som skal bruke den. Behold menyvalg og lignende midlertidige verdier i variabler. Lagre kundeforespørsler eller beslutninger i en Table.

Velg hvem som kan lese et Dataset i tilgangsinnstillingene, også når en tilstand skjuler et element. Åpne siden på nytt for å kontrollere det lagrede oppsettet. Publiser på nytt når besøkende skal få de oppdaterte betingelsene eller verdiene.

Relaterte artikler

Bruk Interactions for å endre en variabel og Styles eller Responsive for å endre utseende.

• Interactions: Endre en variabel eller kall en komponenthandling fra en hendelse.
• Styles: Legg til Hover, Focus visible og andre CSS-tilstander for utseende.
• Responsiv utforming: Konfigurer bredde- og høydespørringer på Styles av typen CSS Class.
• Story: Bygg komponenttreet og koble egenskapene til data.
• Page: Angi sidens data, sti og resultat.