search

daybrush / ruler

A Ruler component that can draw grids and scroll infinitely.
https://daybrush.com/ruler/
MIT License
334 stars 39 forks source link

Custom styling of a ruler #37

Closed bytasv closed 1 year ago

bytasv commented 1 year ago

Environments

All?

Description

Hey, I was trying to find if there is a way to change certain style things in the ruler and couldn't find if it's possible.

CleanShot 2023-01-26 at 20 28 24@2x

Questions:

  1. How can I change ruler height to 20px without hiding numbers? ☝️
  2. Is there a way to hide those "minor" (red) ruler lines and keep only "major" (green)?
  3. Is it possible to render shorter "major" (green) line and render number above it?

I understand 3rd might be tricky, but if it's possible to do 1 and 2 would be awesome. Thank you

Desired looks would be something like this 👇

CleanShot 2023-01-26 at 20 31 15@2x
bytasv commented 1 year ago

Ok, sorry for bother, but I think I found the answer to:

no.1 - basically by a combination of answers below I can get desired looks

no.2, I didn't see there are props mainLineSize, longLineSize and shortLineSize - if I use 0px values I can get rid of the lines 👍 (for others that might also be looking for the same)

no.3 - need to use textOffset (adjust per your needs)