Beskrivelse details.

Struktur 

<lk-details>
  ...
</lk-details>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
guid string "" id= for interne elementer

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <>

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
validate () valid:boolean

Eventer

Ref. Stenciljs.com

Event Parameter Beskrivelse
onClick ()

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

<Description>

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke

<Description>

Her er denne implementert som en slot på innsiden av komponenten

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke

Her er denne implementert som en slot på innsiden av komponenten

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke

Her er denne implementert som en slot på innsiden av komponenten

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke


Her er denne implementert som en slot på innsiden av komponenten

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke

Som egen komponent:

Radio eksempel (default)

Details vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Details brukes.

Her er en testlenke

 

<div class="title-with-helptext-wrapper">
    <!-- <label class="section-title title-required-sign">Som en del av andre komponenter: </label> -->
    <label class="title-required-sign with-details">&lt;Label&gt;</label>
    <lk-details details-label="<Description label>">&lt;Description&gt;</lk-details>
</div>
<br>
<div class="title-with-helptext-wrapper">
    <label class="title-required-sign with-details">&lt;Label&gt;</label>
    <lk-details details-label="<Description label>">
        <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </lk-details>
</div>

<br>
<lk-input-block
    guid="i1"
    input-name="i1"
    label="<Label>"
    placeholder="Placeholder brukes som eksempel-input"
    required
    required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
    error-message="Error-message vises om det er en feil i brukeren sin input"
    details-label="<Description label>">

    <div slot="details">
        &lt;Description&gt;
    </div>

</lk-input-block>
<br>
<lk-input-block
    guid="i2"
    input-name="i2"
    label="Label teksten fungerer som felt-overskrift"
    placeholder="Placeholder brukes som eksempel-input"
    required
    required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
    error-message="Error-message vises om det er en feil i brukeren sin input"
    details-label="<Description for input block>">

    <div slot="details">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>

</lk-input-block>

<br>
<br>
<lk-input-block
    guid="i3"
    input-name="i3"
    label="Label teksten fungerer som felt-overskrift"
    placeholder="Placeholder brukes som eksempel-input"
    required
    required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
    error-message="Error-message vises om det er en feil i brukeren sin input"
    details-label="<Description for input block>">

    <div slot="details">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>

</lk-input-block>

<br>
<br>

<lk-radio-group
    guid="i4"
    group-name="i4"
    group-label="<Er dette et spørsmål?>"
    radio-labels='["Ja","Jo kanskje","Nei"]'
    required
    details-label="<Description for radio group>"
>
    <div slot="details">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>
</lk-radio-group>

<br>

<br>
<br>

<lk-checkbox-group
    guid="i5"
    group-name="i5"
    group-label="<Er dette et spørsmål?>"
    checkbox-labels='["Ja","Jo kanskje","Nei"]'
    required
    details-label="<Description for checkbox group>"
>
    <div slot="details">
        <p><b>Her er denne implementert som en slot på innsiden av komponenten</b></p>
        <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
        <p>Det er ønskelig å bruke denne minst mulig:</p>
        <ul>
            <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
            <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
        </ul>
        <p><a href="#">Her er en testlenke</a></p>
    </div>
</lk-checkbox-group>

<br>


<!-- Manuell implementering: -->

<h2>Som egen komponent: </h2>

<fieldset> 
    <div class="title-with-helptext-wrapper">
        <legend class="title-required-sign">Radio eksempel (default)</legend>
        <lk-details details-label="&lt;Description for radio markup&gt;">
            <p>Details vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Details brukes.</li>
            </ul>
            <p><a href="#">Her er en testlenke</a></p>
        </lk-details>
    </div>
    <label class="interactive-radio" for="interactive-radio-default">
        <input type="radio" id="interactive-radio-default" name="interactive-radio-default" required>
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">
    
                <circle class="interactive-radio__path" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker til bruk av mine data</span>
    </label>
    <br>
    
    <label class="interactive-radio" for="interactive-radio-default2">
        <input type="radio" id="interactive-radio-default2" name="interactive-radio-default" required>
        <span class="interactive-radio__span">
            <svg aria-hidden="true" focusable="false" role="presentation" version="1.1" id="Layer_1"
                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                viewBox="0 0 27.4 27.4" style="enable-background:new 0 0 27.4 27.4;" xml:space="preserve">
    
                <circle class="interactive-radio__path" cx="12" cy="15" r="10"></circle>
                <circle class="interactive-radio__path-checked path-checked" cx="12" cy="15" r="10"></circle>
            </svg>Jeg samtykker ikke til bruk av mine data</span>
    </label>
</fieldset>

Hvor finner jeg denne koden?