ஐகான் தீம்கள் ​

CSS மாறிகள் மூலம் விங், முன்னோட்டம், முழுத்திரை, பேனல், ஒப்பீடு, அட்டவணை வரிசைப்படுத்தல் ஐகான்களை மாற்றலாம். SVG, WebP, PNG கோப்புகளைக் கலந்து பயன்படுத்தலாம்; குறிப்பிடாத ஐகான்கள் இயல்புநிலை கோப்புகளைப் பயன்படுத்தும்.

கோப்புகளைத் தேர்ந்தெடுத்தல் ​

CSSஐ ஏற்றி, எடிட்டர் அல்லது பொதுப் பெற்றோர் உறுப்பில் தீம் வகுப்பைச் சேர்க்கவும். படங்களின் அசல் நிறங்கள், ஒளிபுகுதன்மை, விகிதம் நீடிக்கும்.

import 'nabi-note/nabi.css'

<div class="nabi paper-note">...</div>

.paper-note {
  --nabi-icon-toolbar-b: url("/icons/bold.svg");
  --nabi-icon-view-preview: url("/icons/preview.webp");
  --nabi-icon-view-fullscreen-enter: url("/icons/expand.svg");
  --nabi-icon-view-fullscreen-exit: url("/icons/shrink.webp");
  --nabi-icon-panel-preview-close: url("/icons/close.svg");
}
.paper-note[data-nabi-theme="dark"] {
  --nabi-icon-view-preview: url("/icons/preview-dark.webp");
}

/icons/... போன்ற வேர் பாதைகள் அல்லது முழுமையான HTTPS URLகளைப் பயன்படுத்தவும். சார்புப் பாதைகள் தீம் கோப்பின் அருகிலிருந்து கணக்கிடப்படும் என்ற உறுதி இல்லை. CSSஐ நீங்களே ஹோஸ்ட் செய்தால் அதே பதிப்பின் dist/icons/ஐ nabi.css அருகில் நகலெடுக்கவும். படம் ஏறாவிட்டால் ஐகான் காலியாகும்; பொத்தானின் பெயர், உதவிக்குறிப்பு, செயல் தொடர்ந்து கிடைக்கும்.

மற்ற ஐகான்களைக் கண்டறிதல் ​

ஐகான் உறுப்பின் data-nabi-icon மதிப்புக்கு முன் --nabi-icon- சேர்த்தால் CSS மாறி கிடைக்கும். எடுத்துக்காட்டாக diff-close என்பது --nabi-icon-diff-closeஐப் பயன்படுத்தும். சூழல், மெனு, சேமிப்பு, வரலாறு உள்ளிட்ட விசைகளின் விதிகள் மற்றும் சிறப்பு எழுத்துகளின் குறியாக்கத்திற்கு ஐகான் ஒப்பந்தத்தை பார்க்கவும்.

இருண்ட முறை மற்றும் பேனல்கள் ​

தீம் வகுப்பு அல்லது CSS மாறியை மாற்றினால் மீண்டும் mount செய்யாமல் ஐகான்கள் புதுப்பிக்கப்படும். இயல்புநிலை ஐகான்கள் வெளிர்/இருண்ட தீமைப் பின்பற்றும். தனிப்பயன் கோப்புகள் currentColorஐப் பெறாது; தேவைப்பட்டால் மேலுள்ளபடி இருண்ட மாற்றுக் கோப்புகளை வழங்கவும். body கீழ் திறக்கும் பேனல்களும் மூல எடிட்டரின் ஐகான் தீம் மற்றும் வகுப்பு/பாணி மாற்றங்களைப் பின்பற்றும். மாறிகளை டூல்பாரின் உள்ளே மட்டும் வைக்காமல் எடிட்டர் அல்லது பொதுப் பெற்றோரில் வைக்கவும்.

இயல்புநிலை பொத்தான்களைக் காட்டுதல் ​

showPreview, showFullscreen இரண்டின் இயல்புநிலையும் true. false கொடுத்தால் அந்தப் பொத்தான், அதன் கவன இலக்கு, நிகழ்வுகள் நீக்கப்படும். இரண்டும் false எனில் காலியான கருவிப் பகுதியும் உருவாகாது.

import { mountViewTools, renderViewToolsHtml } from 'nabi-note'

const visibility = { showPreview: false, showFullscreen: true }
const toolsHtml = renderViewToolsHtml({ locale: 'en', ...visibility })
const tools = mountViewTools({
  nabi, surface, root, container, locale: 'en', ...visibility,
})

SSR மற்றும் mountக்கு ஒரே காட்சி விருப்பங்களைக் கொடுக்கவும். அமைப்பை மாற்ற tools.unmount() அழைத்துப் புதிய விருப்பங்களுடன் mount செய்யவும். இரு பொத்தான்களும் தேவையில்லை எனில் கருவிகளின் mount, SSR மார்க்அப் ஆகியவற்றை முழுவதும் தவிர்க்கும் பழைய முறையும் பயன்படும். openPreview(), setFullscreen() ஆகியவற்றை நேரடியாக அழைக்கலாம்.