Crosshair Highlight
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | - | - | - | ❌ 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-highlightimport { 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-highlightimport { 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
Full event type definitions, please refer to Events .
Toggle Crosshair Highlight
univerAPI.setCrosshairHighlightEnabled(true);
univerAPI.setCrosshairHighlightEnabled(false);Get Crosshair Highlight Status
console.log(univerAPI.getCrosshairHighlightEnabled());Set Crosshair Highlight Color
univerAPI.setCrosshairHighlightColor('red');Get Crosshair Highlight Color
console.log(univerAPI.getCrosshairHighlightColor());Event Listening
Full event type definitions, please refer to Events .
CrosshairHighlightEnabledChanged event will be triggered when the crosshair highlight status changes.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightEnabledChanged, (params) => {
const { enabled, workbook, worksheet } = params;
console.log(params);
});
// Remove the event listener, use `disposable.dispose()`CrosshairHighlightColorChanged event will be triggered when the crosshair highlight color changes.
const disposable = univerAPI.addEvent(univerAPI.Event.CrosshairHighlightColorChanged, (params) => {
const { color, workbook, worksheet } = params;
console.log(params);
});
// Remove the event listener, use `disposable.dispose()`Last updated on