View Source SurfaceFontAwesome.CounterLayer (surface_font_awesome v0.4.2)

This component will display a counter. It can be put on top of other icons by adding it to a <Layers> component. Whatever is put inside the default slot will be the value of the counter. Positioning of the counter can be done using its position prop.

Example:

~F"""
  <Layers>
    <Icon icon="sms">
    <CounterLayer position="top-right">233</CounterLayer>
  </Layers>
"""

properties

Properties

  • size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon

  • transform :string - Transformations of the icon. Use rotate-#, grow-#, shrink-#, right-#, left-#, up-#, down-# in any combination. Rotations are in degrees, placement and scaling are in 1/16th em

  • style :string, default: "" - Styles for the component

  • class :css_class - CSS classes for the component

  • position :string, values: ["bottom-left", "bottom-right", "top-left", "top-right"]

slots

Slots

  • default

Link to this section Summary

Link to this section Functions

Callback implementation for Surface.Component.render/1.