Färdiga komponenter i temat

Det finns ett par färdiga komponenter som kan användas och utökas i temat.

Accordion

Denna komponent används för att kunna öppna och stänga innehåll. Den används ofta för FAQ/"Frågor och svar" men kan också användas till annat. Den använder <details> och <summary>, vilket är element som är tillgänglighetsanpassade. Komponenten innehåller färdig styling som går bra att ändra efter hur designen ska se ut.

Exempel

<x-accordion title="Dolore minim ad est?">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, facilis!
</x-accordion>

Attribut

title - Är texten som kommer synas i <summary> elementet. I exemplet ovan:

Dolore minim ad est?

Slot

Via slot skickar man med innehållet till <details> elementet. I exemplet ovan:

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, facilis!

Alert

Denna komponent visar en notis i en ruta.

Attribut

Använd attributet type för att bestämma utseendet på notisen. Värdet som skickas med avgör text-, ikon- och bakgrundsfärg samt typ av ikon. Följande värden accepteras:

• default default - Ger en blå notis med i-ikon
• success - Ger en grön notis med checkbox-ikon.
• caution - Ger en gul notis med !-ikon.
• danger - Ger röd notis med x-ikon.

Detta går enkelt att anpassa i komponent-mallen alert.blade.php i components-mappen.

Övriga attribut

Alla attribut som skickas med utöver type kommer läggas till på ett omslutande <div>-element.

Slot

Det går att skicka med <x-slot>-komponent med attributet name="body". Inuti den läggs notisens body-text. Det är inte obligatoriskt att använda den.

Exempel

Detta är ett exempel på hur den kan användas:

<x-alert class="mb-4" type="default">
  Default
  <x-slot name="body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum in quam consequuntur veritatis accusantium magnam ea cum tenetur perferendis culpa modi dicta, explicabo ipsum voluptatibus optio qui aliquam animi molestiae.
  </x-slot>
</x-alert>

Go to main

Detta är en enkel komponent som endast innehåller en länk för att hoppa till huvudinnehållet. Komponenten tar inte emot några attribut.

Image

Denna komponent visar angiven bild i olika storlekar baserat på skärmstorleken, inuti en <picture>-tagg.

Attribut

Den accepterar tre attribut:

1. id - int (frivillig) - Attachment id för bilden som ska visas. Om inget anges används den utvalda bildens attachment id.
2. sizes - array (frivillig) - En associativ array med storlek och brytpunkt.
3. loading - string (frivillig) - Bestämmer om bilden ska laddas direkt eller när den blir synlig. Giltiga värden är lazy (när den blir synlig) och eager (direkt). Standardvärdet är lazy.

Exempel

Visar samma bild som the_post_thumbnail() hade gjort, men med utökad funktionalitet.

<x-image />

Ett lite mer avancerat exempel med att skicka med storlekar och brytpunkter.

<x-image
  :id="$my_id"
  :sizes="['my-sm-size' => 'max-width: 700px', 'my-md-size' => 'min-width: 700px', 'my-lg-size' => 'min-width: 2000px']"
  loading="eager"
/>

Detta exempel visar storleken my-sm-size mellan 0-700px, my-md-size mellan 700-2000px och my-lg-size från 2000px upp till oändligheten. Den laddar bilden som eager, alltså oavsett om den är synlig eller inte.

Load more

Denna komponent används för att ladda fler inlägg av speciferad post type.

Attribut

Den accepterar tre attribut:

1. postType - string - Post typen som ska hämtas.
2. container - string - Selector för containern där de nya inläggen ska läggas till.
3. category - string (frivillig) - Begränsar taxonomi

Exempel

Det här exemplet laddar mer inlägg och lägger dem i en div med klassen posts:

<x-load-more post-type="post" container=".posts" />

Nav menus

Toast

Denna komponent används för att omsluta ett annat element som är tänkt att visas vid ett senare tillfälle programmatiskt. För att göra det används ett till tillhörande Javascript/Typescript ramverk. Denna komponent används exempelvis tillsammans med en alert, men kan användas till vilket annat HTML-element som ska vara dolt, och sen visas vid tillfälle.

Attribut

1. handle string (obligatorisk) - En referens som används i det tillhörande Javascript/Typescript ramverket. Om flera element har samma referens kommer de visas eller gömmas tillsammans.

Exempel

<x-toast handle="my-example-handle-name" class="mb-4">
  <x-alert type="success">
    Success
    <x-slot name="body">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum in quam consequuntur veritatis accusantium magnam ea cum tenetur perferendis culpa modi dicta, explicabo ipsum voluptatibus optio qui aliquam animi molestiae.
    </x-slot>
  </x-alert>
</x-toast>

Övriga attribut

Alla attribut som skickas med utöver handle kommer läggas till på ett omslutande <div>-element.

Tillhörande Javascript/Typescript

För att använda det tillhörande ramverket importeras först ToastsHolder från ./components/toast. Sen initieras en ny instans av ToastsHolder. Här plockas alla "toasts" upp och läggs till i minnet temporärt. De är nu redo att användas.

Instansen ger tillgång till följande metoder:

• resetAll - Återställer alla "toasts" till att vara gömda med .hidden.
  • Returnerar void.
• show - Visar alla "toasts" med handle som referens.
  • Parameter:
    • handle string (obligatorisk) - Referens till en eller flera "toasts" som ska visas.
  • Returnerar void.
• hide - Visar alla "toasts" med handle som referens.
  • Parameter:
    • handle string (obligatorisk) - Referens till en eller flera "toasts" som ska gömmas.
  • Returnerar void.
• toggle - Visar eller gömmer alla "toasts" med handle som referens.
  • Parameter:
    • handle string (obligatorisk) - Referens till en eller flera "toasts" som ska visas eller gömmas.
  • Returnerar void.
• triggerDestructible - Visar och sen gömmer alla "toasts" med handle som referens efter time tid.
  • Parametrar:
    • handle string (obligatorisk) - Referens till en eller flera "toasts" som ska visas och sen gömmas.
    • time number (frivillig) - Tid (ms) som alla "toasts" med handle ska visas.
  • Returnerar void.
• isActive - Se om alla "toasts" med handle är aktiva (synliga) eller ej (dolda).
  • Parameter:
    • handle string (obligatorisk) - Referens till en eller flera "toasts".
  • Returnerar boolean.

Dessa metoder menade för mer avancerad användning.

• getToast Returnerar Toast-objekt med handle som referens.
  • Parameter:
    • handle string (obligatorisk) - Referens till en Toast med attributet handle.
  • Returnerar Toast eller null.
• findToastRunCallback Se ifall handle finns inom den nuvarande instansen, och kalla sen på funktionen callback om den finns.
  • Parametrar:
    • handle string (obligatorisk) - Referens till en Toast med attributet handle.
    • callback callable (obligatorisk) - Function som ska köras efter funnen Toast.
  • Returnerar void.
• setActive Sätter attributet active av Toast till värdet av parametern active.
  • Parameter:
    • handle string (obligatorisk) - Referens till en Toast med attributet handle.
    • active boolean (obligatorisk) - Värdet att sätta active till.
  • Returnerar void.
• setTimerId Sätter attributet timerId av Toast till värdet av parametern timerId.
  • handle string (obligatorisk) - Referens till en Toast med attributet handle.
  • timerId number|null (obligatorisk) - Värdet att sätta timerId till.
  • Returnerar void

Tillgängliga event

Det skapas tre event för varje Toast, alltså varje unik handle, som initieras i ToastHolder.

• show-<handle> - Visar toast med <handle>.
• hide-<handle> - Tar bort toast med <handle>.
• toggle-<handle> - Visar/gömmer med <handle>.

Det skapas även ett event som triggas när alla toasts återställs.

• reset-all

Dessa används av de grundläggande metoderna, men kan också anropas manuellt.

Exempel enkel användning

import { ToastsHolder } from './components/toast';

const toasts = new ToastsHolder;

document.addEventListener('example-event', () => {
  toasts.toggle('caution')
});

Exempel för formulär

import { ToastsHolder } from './components/toast';

const toasts = new ToastsHolder;

document.querySelector('#my-form')?.addEventListener('submit', async (event) => {
  event.preventDefault();

  // Återställ ifall formuläret skickades med ett error
  toasts.resetAll();

  const data = new FormData(event.target);

  try {
    toasts.show('caution');

    // Exempel API
    const response = await api(data);

    // Återställ `caution`
    toasts.hide('caution');

    toasts.show('success'); // 🎉
  } catch (error) {
    toasts.show('danger'); // 🚨

    console.error(error);
  }
});

Exempel för avancerad användning av event

import { ToastsHolder } from './components/toast';

const toasts = new ToastsHolder;

document.querySelector('#my-example-button')?.addEventListener('click', async (event) => {
  const toast = toasts.getToast('example-handle');

  // Trigga Toast att visas genom event
  toast.dispatchEvent(toast.events.show);

  toast.toggle('example-handle-2');
});

// Lyssna efter triggat event
toasts.addEventListener('example-handle-show', () => {
  // Gör något
});

// Lyssna efter event som triggas efter .toggle().
// Event skapas även vid .show(), .hide() och .resetAll()
toasts.addEventListener('example-handle-toggle', () => {
  // Gör något annat
});