Nicely Printed Maps

    svag

    1.1.2 • Public • Published

    svag

    npm version

    svag is the ultimate collection of SVaG elements which can be used to create mockups of the UI by dynamically generating SVGs. It contains all packages from the @svag scope.

    yarn add -E svag

    Table Of Contents

    API

    The package is available by importing its named exports which are the components. The library methods can be imported from svag/lib alias.

    import {
      Window,
      Shadow,
      Toolbar,
    } from 'svag'
    import {
      makeElement,
      roundedCorner,
      minify
      svg,
      rect,
    } from 'svag/lib'

    Window(
      options: WindowOptions,
    ): string

    Creates a @svag/window.

    A window with a shadow.A window without a shadow.

    WindowOptions

    Name Type Description Default
    content* string The content to display inside of the window. -
    width* number The width of the content. -
    height* number The height of the content. -
    backgroundColor string The color of the window. #000000
    foregroundColor string The foreground color of the container group which will hold the content. #FFFFFF
    noStretch boolean Do not stretch the SVG when embedded as an image. This is achieved by explicitly setting width and height attributes on the svg element. false
    title string An optional title for the window. -
    attributes object Any additional attributes to set on the holder of the content, e.g., font-family. -
    minWidth number The minimum width that the window should take. If the content's width is greater than this value, the height will adjust to the content. -
    minHeight number The minimum height that the window should take. If the content's height is greater than this value, the height will adjust to the content. -
    paddingY number The padding on the Y-axis (top and bottom). 5
    paddingX number The padding on the X-axis (left and right). 5
    noShadow boolean Disable the dropping shadow. false
    minify boolean Remove whitespace between tags (e.g., between > and <). If there are any problems with generated SVG, this could be disabled. true

    Shadow(
      options: ShadowOptions,
    ): { translate: string, shadow: string }

    Creates a @svag/shadow. It will be able to resize on mobile Safari without the window's contents loosing quality.

    An SVG shadow element.

    ShadowOptions: Options to generate macOS like shadow using a blur filter.

    Name Type Description Default
    width* number The width of the window. -
    height* number The height of the window. -
    rx number The x corner radius of a window which drops the shadow. 6
    ry number The y corner radius of a window which drops the shadow. 6
    offsetY number The offset from the top of the window. 25
    stdDeviation number The standard deviation for the blur. It will spread twice this distance in each direction. 27.5

    Toolbar(
      options: ToolbarOptions,
    ): string

    Returns a new @svag/toolbar either with or without a title.

    A macOS toolbar. A macOS toolbar without a title.

    ToolbarOptions: Options to make a toolbar.

    Name Type Description Default
    width* number The width of the toolbar. -
    title string An optional title to display in the toolbar. -

    Lib

    The @svag/lib has a number of methods to create dynamically generated SVGs.

    • makeElement: create a new SVG element.
    • roundedCorner: write a C directive of the path to make a rounded corner, e.g., to create rectangles with only some rounded corners.
    • minify: remove whitespace between tags.

    Elements: For easier access to elements, some of them were converted into methods, along with their documentation. The autocompletion hints can be accessed by hitting ctrlspace combination when writing a call to any API function.

    • svg: make a complete svg image.
    • react: draw a rectangle.

      VS Code Autocomplete Hints.

    TODO

    • Add a note about VS Code hints to the @svag/lib package.

    Copyright

    (c) SVaG 2018

    Install

    npm i svag

    DownloadsWeekly Downloads

    0

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • zvr