ForgeComponenten
nl

Componenten

j-UIStudio

jComponent 20 · jcomponent@20 component

De component loopt een Flow UI Studio-applicatie via zijn geconfigureerde eindpunt. Set url naar dat eindpunt en handleert metadata of applicatie-updates met onmeta en onapp.

Deze component geeft de app volgens het Total.js Flow UI Studio schema.


Configuratie:

  • url {String} de navigatie-endpoint die POST-verzoeken accepteert en JSON-stapmetadata terugbrengt
  • css {Boolean} is een app-stijl voor het huidige element (default: true)
  • ssid {String} optioneel, voegt een sessie-identificator toe aan de URL voor de stroom
  • title {Boolean} optioneel, herschrijft document.title door de app naam
  • plus {String} optioneel, het werkt alleen met title:true en het voegt title - config.plus toe
  • onmeta {String} optioneel, een link naar de function(meta) opneemt een meta-gegevens
  • onapp {String} optioneel, een link naar de function(app) opneemt een nieuw UI-ontwerp
  • origin {String} optie
  • onrequest {String} optioneel, een link naar de function(payload) kan verzoeksgegevens wijzigen
  • flowoutput {Boolean} optioneel, alleen uitgangsmaatregelen van de FlowOutput-component (default: true)

eigenschappen:

  • component.app bevatten een app Instantie

Goed om te weten:

De component vergroot de app-instantie door het toevoegen van de eigenschap van breadcrumb {Array}.

Gebruik

<ui-component name="uistudio"
  config="url:/api/studio/;onapp:studioLoaded;loading:false"></ui-component>
<script>
  function studioLoaded(app) {
    console.log(app);
  }
</script>

Het bestanddeel stuurt een POST-verzoek naar het geconfigureerde eindpunt. de verzoek draagt de huidige navigatiestatus, waaronder origin, query, een optionele ssid, en de huidige id, output en data wanneer een aanvraag een uitgang geeft.

Terug een id voor de stap en een url voor zijn geëxporteerde UI Builder ontwerp:

{
  "id": "home",
  "url": "/ui/home.json",
  "data": {}
}

Het ontwerp dat wordt uitgevoerd uit UI Builder bij /ui/home.jsonDe component downloadt het met GET en creëert de applicatie door UIBuilder.build()Als de reactie een inputDe component noemt de applicatie in met input en dataDe onmeta Callback ontvangt de reactie van de stap, en onapp ontvangt de gecreëerde aanvraaginstantie.

loading:false schakelt de lading-indicator uit. Om deze te tonen, verklaart u een j-Loading component en maakt u loading in staat.

De bron: Total.js componentenCopyright Peter Širka en bijdragen. Mijn licentie.