builds the div for a more complicated multiple grouped text-value boxes

four_value(text, value)

Arguments

text: The labels - character of length four
value: The value - A character vector of length four

Value

A tagList of the div tree to be rendered in the ui of a shiny app

Examples


text=c('BTC','ETH','DOG','KLI')
values=c('$3,034','$4,353','$496','$629')
four_value(text,values)
#> <div style="text-align:center;font-family:sans-serif;">
#>   <div class="flexfill-container flexfill-container-row" style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:90px;">
#>     <div class="flexfill-item" style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
#>       <div class="flexfill-item-inner" style="position:absolute;top:0;left:0;right:0;bottom:0;">
#>         <div class="hovernow click" style="border-style:solid;&#10;               border-color:lightgrey;&#10;               border-width:1px;&#10;               border-radius:15px 0px 0px 15px;">
#>           <h3>$3,034</h3>
#>           <p>BTC</p>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="flexfill-item" style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
#>       <div class="flexfill-item-inner" style="position:absolute;top:0;left:0;right:0;bottom:0;">
#>         <div class="hovernow click2" style="border-style:solid;&#10;               border-color:lightgrey;&#10;&#10;               border-width:1px 1px 1px 0px">
#>           <h3>$4,353</h3>
#>           <p>ETH</p>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="flexfill-item" style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
#>       <div class="flexfill-item-inner" style="position:absolute;top:0;left:0;right:0;bottom:0;">
#>         <div class="hovernow click3" style="border-style:solid;&#10;               border-color:lightgrey;&#10;&#10;               border-width:1px 0px">
#>           <h3>$496</h3>
#>           <p>DOG</p>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="flexfill-item" style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
#>       <div class="flexfill-item-inner" style="position:absolute;top:0;left:0;right:0;bottom:0;">
#>         <div class="hovernow click4" style="border-style:solid;&#10;               border-color:lightgrey;&#10;               border-width:1px;&#10;&#10;                   border-radius:0px 15px 15px 0px">
#>           <h3>$629</h3>
#>           <p>KLI</p>
#>         </div>
#>       </div>
#>     </div>
#>   </div>
#> </div>