CrowlKit - knoppen

In een app of webapp behoren knoppen tot de normale interactie-onderdelen.

Het is heel eenvoudig om een knop te maken. 

<button>OK</button>

Maa zo'n knop doet natuurlijk niets, we moeten er nog een "actie" aan koppelen. 

Ingebouwde functionaiteit 

Je kan een knop koppelen aan een ingebouwde functie.

  • appdata: de bewaarde data tonen in de console.
  • fs: de pagina openen over het volledige scherm. Hiervoor moet het element fullscreen-button aanwezig zijn in de pagina.
  • opendialog: een dialoogvenster openen
  • print: het dialoogvenster om de pagina af te drukken start.
  • saveform: de inhoud van het formulier waar de knop zich in bevindt, bewaren
  • themeselector: werkt niet samen met een knop, maar kan je enkel toekennen aan een select-element. 

Voorbeeldgebruik: 

<full-screen hide></fullscreen-button>
<button data-function="fs">Volledig scherm</button>

Je kan ook één specifiek onderdeel van je pagina fullscreen openen i.p.v. de ganse pagina.

<app-data id="tekenprogramma">
    Enkel dit deel wordt getoond in fullscreen-modus.
</app-data>
<full-screen hide target="tekenprogramma"></fullscreen-button>
<button data-function="fs">Volledig scherm</button>

De pagina afdrukken:

<button data-function="print">Afdrukken</button>

De inhoud van een formulier bewaren:

<form>
   <input-text name="name" placeholder="Vul je naam in en bewaar"></input-text>
   <button data-function="saveform">Bewaar naam</button>
</form>

Zelf acties programmeren

Wil je zelf acties programmeren, dan moet je elke knop die je toevoegt, een unieke id geven. Zoals je weet, mag een id enkel "letters" en "-" bevatten, ook geen hoofletters. 

<button id="warning">Toon waarschuwing</button>

Deze knop gaat nog niets doen, tot je er een actie voor programmeert. Hierover leer je meer op de pagina over KitCode, maar hier tonen we alvast een werkend voorbeeld. 

<button id="warning">Toon waarschuwing</button>

<script>
app.ready(function() {
      id("warning").after("click").do(
            function(){
                  appalert("Dit is een laatste waarschuwing!");
            }
      );
});
</script>
Volgende pagina