🎉 v0.5.4 is released. Read more →
GuidesUniver SheetsFeaturesCrosshair Highlight

Crosshair Highlight

Facade APIHas Paid PlanUniver ServerUniver on Node.jsPreset
✅---❌ import via plugins

Crosshair highlight highlights the row and column of the selected cell to make it easier for users to identify the currently selected cell.

This feature includes the following plugin packages:

Presets Installation

npm install @univerjs/sheets-crosshair-highlight
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight';
import sheetsCrosshairHighlightEnUS from '@univerjs/sheets-crosshair-highlight/locale/en-US';
 
import '@univerjs/sheets-crosshair-highlight/lib/index.css';
 
import '@univerjs/sheets-crosshair-highlight/facade';
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      sheetsCrosshairHighlightEnUS 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsCrosshairHighlightPlugin
  ],
});

Piecemeal Installation

npm install @univerjs/sheets-crosshair-highlight
import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetsCrosshairHighlightPlugin } from '@univerjs/sheets-crosshair-highlight';
import SheetsCrosshairHighlightEnUS from '@univerjs/sheets-crosshair-highlight/locale/en-US';
 
import '@univerjs/sheets-crosshair-highlight/lib/index.css';
 
import '@univerjs/sheets-crosshair-highlight/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      SheetsCrosshairHighlightEnUS
    ),
  },
});
 
univer.registerPlugin(UniverSheetsCrosshairHighlightPlugin);

Facade API

Toggle Crosshair Highlight

univerAPI.setCrosshairHighlightEnabled(true);
 
univerAPI.setCrosshairHighlightEnabled(false);

Set Crosshair Highlight Color

univerAPI.setCrosshairHighlightColor('red');

Links

Find & ReplaceZen Editor
Was this page helpful?