Pular para o conteúdo
RéguaDocumentação

Props

As props definem os valores padrão. Quem usa pode mudá-los no painel de configurações da Régua, e o que for salvo tem precedência; Use defaults volta para as props. As mesmas opções valem para mountRegua e para o elemento <regua-overlay>.

Referência

Props de Regua, com tipo, valor padrão e descrição
PropDescriçãoPadrão
highlightColor
string
Cor do contorno de hover e de seleção.oklch(0.62 0.18 255)
guideColor
string
Cor das guias.oklch(0.63 0.26 29.23)
arrowColor
string
Cor das setas.oklch(0.63 0.26 29.23)
guideHighlightEnabled
boolean
Destaca guias com hover ou selecionadas.true
hoverHighlightEnabled
boolean
Contorna o elemento sob o cursor. Com false, clicar desseleciona.true
layoutDetailsEnabled
boolean
Mostra gap e padding abaixo do elemento selecionado.true
persistOnReload
boolean
Mantém o workspace entre recarregamentos.false
persistSession
boolean
Mantém o workspace durante a sessão da aba.false
shortcutsEnabled
boolean
Ativa os atalhos de teclado.true
theme
"system" | "light" | "dark"
Tema da interface da Régua."system"
portalTarget
HTMLElement | ShadowRoot
Onde a Régua é renderizada. Aceita um shadow root, que recebe os estilos.document.body
persistKey
string
Chave do workspace no storage.uma por aba e instância
colorPickerFormats
ColorPickerFormat[]
Formatos do conta-gotas, na ordem exibida. Aceita também "hsl".["hex", "rgb", "oklch"]
colorPickerClickFormat
ColorPickerFormat
Formato copiado ao clicar com o conta-gotas."hex"
snapEnabled
boolean
Encaixa a seleção em elementos próximos.true
snapGuidesEnabled
boolean
Encaixa guias em outras guias.true
snapArrowsEnabled
boolean
Encaixa as pontas das setas em elementos.true
arrowClickToPlace
boolean
Cria setas com cliques em vez de arrastar.false
selectNewGuideEnabled
boolean
Seleciona a guia recém-criada.true
multiMeasureEnabled
boolean
Mantém as medidas anteriores na tela.false
guideStyle
Partial<GuideStyle>
Aparência das guias. pattern: "solid", "dashed" ou "dotted".{ opacity: 1, width: 1, pattern: "solid", dashLength: 6, gap: 4 }
rulerSettings
Partial<RulerSettings>
Opacidade das réguas e revelação pelas bordas da tela.{ opacity: 1, edgeReveal: false }
textStyle
Partial<TextStyleSettings>
Fonte e cor das notas de texto.{ font: "sans-serif", color: "#000000" }
features
ReguaFeatures
Desliga partes da Régua: { screenshot, rulers, settings }.tudo ligado
initialState
object
Estado inicial quando nada foi salvo: enabled, minimized, toolMode, guias, setas, traços, textos, medidas e comentários.—
persistence
ReguaPersistence
Store próprio para configurações e workspace.localStorage
onPersistenceError
(error: unknown) => void
Chamado quando o storage está indisponível ou uma gravação falha.—
captureVisibleTab
() => Promise<Blob>
Fornece um PNG da aba visível para a captura. Sem ela, a captura pede ao navegador para compartilhar a aba atual (getDisplayMedia).—
extensionRecording
ExtensionRecordingSession
Grava a tela por uma extensão de navegador em vez da página.—
extensionRecordingPlayer
string
URL da página da extensão que reproduz as gravações.—

Exemplo

TSX
<Regua
  theme="dark"
  guideStyle={{ pattern: "dashed" }}
  initialState={{ minimized: true }}
/>

Persistência

Configurações e workspace (guias, medidas, setas, traços, textos, comentários) são salvos separadamente. As configurações valem entre recarregamentos. O workspace é descartado ao recarregar, a menos que persistOnReload ou persistSession estejam ligados.

O padrão é localStorage, com um workspace por aba e por instância. Use persistKey para fixar a chave, ou passe um persistence próprio para guardar em outro lugar. O pacote exporta os blocos para isso: createLocalStoragePersistence, createPageScopedPersistence (um workspace por página dentro do mesmo store), normalizeStoredSettings, normalizeStoredWorkspace e REGUA_STORAGE_VERSION.

TypeScript
import { createLocalStoragePersistence, createPageScopedPersistence } from "regua"

const persistence = createPageScopedPersistence(
  createLocalStoragePersistence(window, "meu-app:regua"),
  () => location.pathname,
)