Components

These Angular components are used to abstract the boilerplate of defining the html needed for generating placeholders.

As we add more placeholder styles, they will end up here as their own components for ease of use.

Inputs

All of these components share the same Inputs. The only differences are in the pluginOptions accepted and the preloaderType passed under the hood.

  • src string

    The url or path for the img.

  • pixelWidth number

    The width of the img in the page. This is used primarily for layout purposes. Also used to resize the original image. If you do not pass this or a pixelHeight, the image is considered "fluid".

  • pixelHeight number

    The height of the img in the page. This is used primarily for layout purposes. Also used to resize the original image. If you do not pass this or a pixelWidth, the image is considered "fluid".

  • fluidMaxWidth number

    The maximum width of the resized version of the original image. This is used primarily for resizing purposes. If you do not pass this or a fluidMaxHeight, the original image is used as the final loaded src.

  • fluidMaxHeight number

    The maximum height of the resized version of the original image. This is used primarily for resizing purposes. If you do not pass this or a fluidMaxWidth, the original image is used as the final loaded src.

  • lazy boolean
    Default value: true

    Whether the image should wait until an intersection observer event or start preloading immediately.

  • pluginOptions blurOptions | primitivesOptions | tracedOptions
    Default value: {}

    Options to be passed to the underlying plugins. See individual Interfaces for specific details.

  • preloader PreloaderTypes.blur
    Default value: {}

    A type from the PreloaderTypes enum. Warning: this is used by the plugins themselves as part of the boilerplate. Altering this value can have unexpected results.

    • <scully-blur-image>

    Example Placeholder
    Live Preview

    pluginOptions

    • width number
      Default value: 42

      The pixel value to use for the width of the blurred up image. This is meant to be a low value and css will smooth it out in the browser.

    <scully-traced-image>

    Example Placeholder
    Live Preview

    pluginOptions

    • turnPolicy tracedTurnPolicies
      Default value: TURNPOLICY_MINORITY

      How to resolve ambiguities in path decomposition. See Enums section.

    • turdSize number
      Default value: 2

      Suppress speckles of up to this size

    • alphaMax number
      Default value: 1

      Corner threshold parameter

    • optCurve boolean
      Default value: true

      Curve optimization

    • optTolerance number
      Default value: 0.2

      Curve optimization tolerance

    • threshold number
      Default value: THRESHOLD_AUTO

      Threshold below which color is considered black. Should be a number in range 0 - 255 or THRESHOLD_AUTO in which case threshold will be selected automatically

    • blackOnWhite boolean
      Default value: true

      specifies colors by which side from threshold should be turned into vector shape

    • color string
      Default value: COLOR_AUTO

      Fill color. (default: COLOR_AUTO, which means black or white, depending on blackOnWhite property)

    • background string
      Default value: COLOR_TRANSPARENT

      Background color.

    <scully-primitives-image>

    Example Placeholder
    Live Preview

    scullyImageTraced

    pluginOptions

    • numSteps number
      Default value: 200

      Number of steps to process [1, 1000]

    • minEnergy number

      Minimum energy to stop processing early [0, 1]

    • shapeAlpha number
      Default value: 128

      Alpha opacity of shapes [0, 255]

    • shapeType string
      Default value: triangle

      Type of shapes to use

    • numCandidates number
      Default value: 1

      Number of top-level candidates per step [1, 32]

    • numCandidateShapes number
      Default value: 50

      Number of random candidate shapes per step [10, 1000]

    • numCandidateMutations number
      Default value: 100

      Number of candidate mutations per step [10, 500]

    • numCandidateExtras number

      Number of extra candidate shapes per step [0, 16]

    <scully-pixels-image>

    Example Placeholder
    Live Preview

    pluginOptions

    • width number
      Default value: 8

      Amount of pixels per row

    • pixelSize number
      Default value: 100

      Width of each pixel