@svag/toolbar

@svag/toolbar is a macOS toolbar.

yarn add -E @svag/toolbar

Table Of Contents

• Table Of Contents
• API
  • toolbar(options: ToolbarOptions)
    • ToolbarOptions
    • Without A Title
• TODO
• Copyright

API

The package is available by importing its default function:

import toolbar from '@svag/toolbar'

toolbar(  options: ToolbarOptions,): void

Generate a part of the SVG which represents a macOS toolbar.

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. | - |

import Toolbar from '@svag/toolbar'

const res = Toolbar({
  title: '👾 Terminal',
  width: 400,
})

<g id="Toolbar">
  <defs>
    <linearGradient x1="50%" x2="50%" y2="100%" id="toolbar">
      <stop stop-color="#FFFFFF" offset="0%"/>
      <stop stop-color="#F5F4F5" offset="5%"/>
      <stop stop-color="#D3D3D3" offset="100%"/>
    </linearGradient>
  </defs>
  <path d="M6,0 L394,0 C 397 0, 400 3, 400 6 L400,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0"
        fill="url(#toolbar)"/>
  <text x="200" y="16" font-family="HelveticaNeue, Helvetica Neue" font-size="13"
        letter-spacing="0.4" fill="#464646" text-anchor="middle">
    👾 Terminal
  </text>
  <g transform="translate(9, 6)">
    <g>
      <circle stroke="#E33E32" stroke-width="1" cx="5" cy="5" r="5.5"/>
      <circle fill="#FF5F52" cx="5" cy="5" r="5.25"/>
    </g>
    <g>
      <circle stroke="#E2A100" stroke-width="1" cx="25" cy="5" r="5.5"/>
      <circle fill="#FFBE05" cx="25" cy="5" r="5.25"/>
    </g>
    <g>
      <circle stroke="#17B230" stroke-width="1" cx="45" cy="5" r="5.5"/>
      <circle fill="#15CC35" cx="45" cy="5" r="5.25"/>
    </g>
  </g>
</g>

Without A Title: To generate a toolbar without a title, the title option can be omitted.

import Toolbar from '@svag/toolbar'

const res = Toolbar({
  width: 400,
})

<g id="Toolbar">
  <defs>
    <linearGradient x1="50%" x2="50%" y2="100%" id="toolbar">
      <stop stop-color="#FFFFFF" offset="0%"/>
      <stop stop-color="#F5F4F5" offset="5%"/>
      <stop stop-color="#D3D3D3" offset="100%"/>
    </linearGradient>
  </defs>
  <path d="M6,0 L394,0 C 397 0, 400 3, 400 6 L400,22 L0,22 L0,16 L0,6 C 0 3, 3 0, 6 0"
        fill="url(#toolbar)"/>
  <g transform="translate(9, 6)">
    <g>
      <circle stroke="#E33E32" stroke-width="1" cx="5" cy="5" r="5.5"/>
      <circle fill="#FF5F52" cx="5" cy="5" r="5.25"/>
    </g>
    <g>
      <circle stroke="#E2A100" stroke-width="1" cx="25" cy="5" r="5.5"/>
      <circle fill="#FFBE05" cx="25" cy="5" r="5.25"/>
    </g>
    <g>
      <circle stroke="#17B230" stroke-width="1" cx="45" cy="5" r="5.5"/>
      <circle fill="#15CC35" cx="45" cy="5" r="5.25"/>
    </g>
  </g>
</g>

TODO

• [ ] Add CSS styles to change the appearance of the traffic lights on hover.

Copyright

(c) SVaG 2018