Draw Rulers And Mange Guidelines – Guides

Category: Javascript , Others | July 30, 2023
Author:daybrush
Views Total:209 views
Official Page:Go to website
Last Update:July 30, 2023
License:MIT

Preview:

Draw Rulers And Mange Guidelines – Guides

Description:

Guides is a component library for creating customizable rulers and guidelines which facilitate accurate layout design and content placement.

With support for Vanilla JavaScript as well as Angular, React, Vue, Preact, and Svelte, this component can be integrated into any frontend stack.

How to use it:

1. Install and import the Guides component.

# NPM
$ npm i @scena/guides
// ES Module
import Guides from "@scena/guides";
// Browser
<script src="/dist/guides.min.js"></script>

2. Create a ruler on your web app.

const myGuides = new Guides(document.querySelector(".rulerContainer"), {
      
      // or 'vertical'
      type: "horizontal",
      // displays drag position
      displayDragPos: true,
      // additional ruler styles
      rulerStyle: { left: "30px", width: "calc(100% - 30px)", height: "100%" },
      // uses resize observer API
      useResizeObserver: true,
});

3. All possible component options/props.

className: "",
type: "horizontal",
zoom: 1,
style: {},
snapThreshold: 5,
snaps: [],
digit: 0,
displayDragPos: false,
dragPosFormat: v => v,
defaultGuides: [],
lockGuides: false,
showGuides: true,
guideStyle: {},
dragGuideStyle: {},
guidePosStyle: {},
defaultGuidesPos: 0,
// callbacks
onClickRuler: () => { },
onChangeGuides: () => { },
onRequestScroll: () => { },
onDragStart: () => { },
onDrag: () => { },
onDragEnd: () => { },

4. API methods.

  • getGuides
  • loadGuides
  • scroll
  • scrollGuides
  • resize
  • getElement
  • getRulerElement
  • forceUpdate
  • getRulerScrollPos
  • getGuideScrollPos
  • zoomTo

5. Events.

  • changeGuides
  • requestScroll
  • dragStart
  • drag
  • dragEnd
  • clickRuler

Changelog:

v0.29.2 (07/29/2023)

  • bugfix

v0.29.1 (07/24/2023)

  • bugfix

v0.29.0 (07/23/2023)

  • add guidesZoom prop

v0.27.0 (06/01/2023)

  • Bugfixes

v0.26.5 (05/15/2023)

  • Bugfixes

You Might Be Interested In:


Leave a Reply