https://github.com/svagco/window
A simple macOS window with a shadow and toolbar.
https://github.com/svagco/window
javascript macos mockup svg ui
Last synced: 2 months ago
JSON representation
A simple macOS window with a shadow and toolbar.
- Host: GitHub
- URL: https://github.com/svagco/window
- Owner: svagco
- License: mit
- Created: 2018-09-08T01:28:39.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-10T23:16:41.000Z (almost 8 years ago)
- Last Synced: 2025-05-20T11:56:47.476Z (about 1 year ago)
- Topics: javascript, macos, mockup, svg, ui
- Language: JavaScript
- Homepage: https://svag.co
- Size: 69.3 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @svag/window
[](https://npmjs.org/package/@svag/window)
`@svag/window` is a simple macOS-style window with a shadow and toolbar.
```sh
yarn add -E @svag/window
```
## Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
* [`window(options: WindowOptions): string`](#windowoptions-windowoptions-string)
* [`WindowOptions`](#windowoptions)
* [without a shadow](#without-a-shadow)
- [TODO](#todo)
- [Copyright](#copyright)
## API
The package is available by importing its default function:
```js
import Window from '@svag/window'
```
### `window(`
`options: WindowOptions,`
`): string`
Creates a complete `SVG` representing a macOS window.
__`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` |
```js
import { makeElement } from '@svag/lib'
import Window from '@svag/window'
const line = makeElement('text', {
attributes: {
'font-family': 'Monaco, Courier',
'font-size': '12px',
x: 0,
y: 10,
},
content: `Last login: ${new Date().toDateString()} on ttys013`,
})
const line2 = makeElement('text', {
attributes: {
'font-family': 'Monaco, Courier',
'font-size': '12px',
x: 0,
y: 25,
},
content: 'svag-macbook:~ svag$ ',
})
const res = Window({
title: '🚞 Terminal',
width: 350,
height: 100,
noStretch: true,
content: [line, line2],
minify: false,
})
```
```svg
🚞 Terminal
Last login: Tue Sep 11 2018 on ttys013
svag-macbook:~ svag$
```
To generate a window without a shadow, the `noShadow` option can be set. When `minify` attribute is not set to `false`, the whitespace will be removed.
```js
import { makeElement } from '@svag/lib'
import Window from '@svag/window'
const line = makeElement('text', {
name: 'text',
attributes: {
'font-family': 'Monaco, Courier',
'font-size': '12px',
x: 0,
y: 10,
},
content: `Last login: ${new Date().toDateString()} on ttys013`,
})
const line2 = makeElement('text', {
attributes: {
'font-family': 'Monaco, Courier',
'font-size': '12px',
x: 0,
y: 25,
},
content: 'svag-macbook:~ svag$ ',
})
const res = Window({
title: '🚞 Terminal',
width: 350,
height: 100,
noStretch: true,
content: [line, line2],
noShadow: true,
})
```
```svg
🚞 Terminal
Last login: Tue Sep 11 2018 on ttys013
svag-macbook:~ svag$
```
## TODO
- [ ] Add cursor to the preview.
## Copyright
(c) [SVaG][1] 2018
[1]: https://svag.co