Declarative interactions

Hover here.
Open something there.

Connect a trigger to a view with a small rule. Try a pointer, the Tab key, or a tap. Press Escape or tap outside to close.

01 / HTML

Reveal a panel

Hover or focus the button. You can move into the panel and follow its link.

See the HTML rule

<slc-interaction
  source-id="html-trigger"
  target-id="html-panel"
  trigger="hover-focus"
  action="show"
  close-delay-ms="180">
</slc-interaction>

02 / RDF

Open a resource preview

This rule loads from Turtle. Hover or focus to read a small RDF document in the existing preview component.

See the RDF rule

@prefix sli:
  <https://semantic-linked-components.org/interaction#> .

<#preview> a sli:Interaction ;
  sli:sourceId "rdf-trigger" ;
  sli:targetId "rdf-preview" ;
  sli:trigger "hover-focus" ;
  sli:action "open-resource" ;
  sli:resource <./sample.ttl> ;
  sli:closeDelayMs 180 .

Open the configuration file →