Naked Panda Meditations

    @svag/toolbar

    1.0.1 • Public • Published

    @svag/toolbar

    npm version

    @svag/toolbar is a macOS toolbar.

    yarn add -E @svag/toolbar

    Table Of Contents

    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.

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

    Toolbar without a title.

    TODO

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

    Copyright

    (c) SVaG 2018

    Install

    npm i @svag/toolbar

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • zvr