Dyalog MiServer 3 Sample Site

This page illustrates some advanced ways to use _.Icon, mainly FontAwesome-Icons. FontAwesome provides various styles to easily generate spinning icons or ot layer icons and text or combine multiple icons. All these options are documented on FontAwesome's site - this page shows a few examples of how to apply these, mainly by providing data-fa-*-attributes to .Icon-Constructors. Most of these use-cases were hand-crafted and most likely a bit of fiddling with these will be required when combining multiple icons.

A spinning refresh/sync-icon

a dangerous file!

a dangerous file! (resized)

  a settings-file

Varying Sizes

No frowning here!

Hello!Friendly greeting

It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects.

• List icons
• can be used
• as bullets
• in lists

• fingerprintA double-spaced
• androidlist that uses
• shopping_cartGoogle's
• thumb_upicons

• Syncfusion image icon
• Syncfusion external link icon
• Syncfusion export icon

:Class IconAdvanced : MiPageSample 
⍝ Control:: _DC.Icon 
⍝ Description:: Advanced ways to use icons by combining/transforming them 
    ∇ Compose;p;i;cog;mylist;itm 
      :Access Public 
      
      Add _.p MarkdownFollows 
    ⍝### Advanced use of icons 
    ⍝ 
    ⍝ This page illustrates some advanced ways to use `_.Icon`, 
    ⍝ mainly FontAwesome-Icons. FontAwesome provides various 
    ⍝ styles to easily generate spinning icons or ot 
    ⍝ layer icons and text or combine multiple icons. 
    ⍝ All these options are documented on [FontAwesome's site](https://fontawesome.com/how-to-use/svg-with-js#additional-styling) - 
    ⍝ this page shows a few examples of how to apply these, mainly 
    ⍝ by providing `data-fa-*`-attributes to _.Icon-Constructors. 
    ⍝ Most of these use-cases were hand-crafted and most likely 
    ⍝ a bit of fiddling with these will be required when combining 
    ⍝ multiple icons. 
      
      (Add _.p).Add¨(_.Icon'fas fa-sync fa-spin')' A spinning refresh/sync-icon' 
      
   ⍝ Referencing multiple icons in one constructor will stack them: 
      (Add _.p).Add¨(_.Icon'far-file' 'fas-exclamation')' a dangerous file!' 
   ⍝ Admittedly the styling can be improved (but hardly with the simple constructor), so let's try what we can do there. 
      (Add _.p).Add¨(_.Icon'far-file'('data-fa-transform="shrink-6" style="color:red"'New _.Icon'fas-exclamation'))' a dangerous file! (resized)' 
      
   ⍝ You may also pass pre-defined Icon-Objects and they will be stacked. 
   ⍝ Defining them beforehand gives you more control over their 
   ⍝ styling and the positioning. 
      cog←'data-fa-transform="right-2 down-3" style="color:purple;"'New _.Icon'fas-cog' 
      (Add _.p).Add¨(_.Icon'far-file fa-2x'cog)'   a settings-file' 
      ⍝ NB: "far" works file even with (some icons of) FA Free! 
      
      p←'style=margin-top:2em;'Add _.div 
      ('style="color:green;"'p.Add _.Icon'far-file fa-3x'('data-fa-transform="right-10 down-11" style="font-size: 0.8em;"'New _.span'dws' '.fa-layers-text')) 
      'style=margin-left:1em;'p.Add _.span' custom file-type' 
      
      p←'style=margin-top:1em;'Add _.div 
      ('.fa-2x fa-fw'p.Add _.span).Add(New _.Icon'fas-calendar'('style="font-weight: 900;" data-fa-transform="shrink-8 down-2" class="fa-layers-text fa-inverse"'New _.span'42')) 
      p.Add' find that on your calendar!' 
      
      p←Add _.div'' ⍝'style=margin-top:1em;' 
      ('.fa-3x fa-fw'p.Add _.span).Add(New _.Icon'far-calendar'('style=color:green; data-fa-transform="shrink-10 down-2"'New _.Icon'fas-thumbs-up')) 
      p.Add' a positive day!' 
      
      p←Add _.p 
      p.Add(_.Icon'fas-camera')' ' 
      p.Add(_.Icon'fas-camera fa-2x')' ' 
      p.Add(_.Icon'fas-camera fa-3x')' ' 
      p.Add(_.Icon'fas-camera fa-4x')' ' 
      p.Add(_.Icon'fas-camera fa-5x')' ' 
      p.Add(_.Icon'fas-camera fa-6x')' ' 
      p.Add(_.Icon'fas-camera-retro fa-6x')' ' 
      p.Add(_.Icon'fas-camera-retro fa-5x')' ' 
      p.Add(_.Icon'fas-camera-retro fa-4x')' ' 
      p.Add(_.Icon'fas-camera-retro fa-3x')' ' 
      p.Add(_.Icon'fas-camera-retro fa-2x')' ' 
      p.Add(_.Icon'fas-camera-retro')' ' 
      p.Add'Varying Sizes' 
      
      p←Add _.p 
      i←'.fa-3x'p.Add _.Icon 
      '.far .fa-lg' i.Add _.span'' ⍝ Smiley face - specified in unusual way 
      'style="color: rgba(255,0,0,0.8);" data-fa-transform="left-2.6"'i.Add _.Icon'fas-ban fa-2x' 
      
      'style=margin-left:2em;'p.Add _.span'No frowning here!' 
      
     ⍝ The specs for data-fa-transform use numbers translating to 1/16em, 
     ⍝ so achieving a good result will most likely require a bit of fiddling... 
      p←'style=margin-top:4em;'Add _.p 
      i←p.Add _.Icon'far-comment fa-4x' 
      '.fa-layers-text'i.Add _.span'Hello!' 'data-fa-transform="right-28 up-2"' 
      'style=margin-left:4em;'p.Add _.span'Friendly greeting' 
      
      p←'style="margin-left: 25%; margin-right: 25%;"'Add _.p(New _.Icon'fas fa-quote-left fa-2x fa-pull-left fa-border') 
      p.Add ScriptFollows 
      ⍝ It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, 
      ⍝ for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most 
      ⍝ gratifying results of intellectual evolution is the continuous opening up of new and greater prospects. 
      
      p←Add _.p 
      mylist←'.fa-ul'Add _.ul 
      itm←mylist.Add _.li 
      itm.Add _.Icon'fa-li fa fa-check-square' 
      itm.Add'List icons' 
      
      mylist.Add _.li((New _.Icon'fa-li fa fa-check-square').Render,'can be used') 
      mylist.Add _.li((New _.Icon'fa-li fa fa-spinner fa-spin').Render,'as bullets') 
      (mylist.Add _.li'in lists').Insert _.Icon'fa-li fa fa-square' 
      
      mylist←'.fa-ul' 'style="line-height:2em;"'Add _.ul 
      (mylist.Add _.li'A double-spaced').Insert _.Icon'md-fingerprint fa-li' 
      (mylist.Add _.li'list that uses').Insert _.Icon'md-android fa-li' 
      (mylist.Add _.li'Google''s').Insert _.Icon'md-shopping_cart fa-li' 
      (mylist.Add _.li'icons').Insert _.Icon'md-thumb_up fa-li' 
      
      mylist←'.fa-ul'Add _.ul 
      
      (mylist.Add _.li'Syncfusion image icon').Insert _.Icon'e-image_01 fa-li' 
      (mylist.Add _.li'Syncfusion external link icon').Insert _.Icon'e-external-link_01 fa-li' 
      (mylist.Add _.li'Syncfusion export icon').Insert _.Icon'e-export fa-li' 
      
    ∇ 
 
:EndClass