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
Window(options: WindowOptions): string
Shadow(options: ShadowOptions): { translate: string, shadow: string }
Toolbar(options: ToolbarOptions): string
- Lib
- TODO
- Copyright
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'
Creates a @svag/window
.
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 |
Creates a @svag/shadow
. It will be able to resize on mobile Safari without the window's contents loosing quality.
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 |
Returns a new @svag/toolbar
either with or 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. | - |
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.
- Add a note about VS Code hints to the
@svag/lib
package.
(c) SVaG 2018