மிதக்கும் பகுதி ​

சிறிய விளக்கம், படம் அல்லது சிறிய அட்டவணையை இடது அல்லது வலப்பக்கம் வைத்து முதன்மை உரை அதன் அருகில் பாயச் செய்யுங்கள். பகுதியின் உள்ளடக்கத்தையும் அதே தொகுப்பியில் நேரடியாக மாற்றலாம். கோட்டுத் துண்டு எல்லை திருத்தும்போது மட்டும் தெரியும்; முன்னோட்டம் மற்றும் வெளியிடப்பட்ட காட்சியில் உள்ளடக்கமும் அமைப்பும் மட்டுமே இருக்கும்.

கீழுள்ள எடுத்துக்காட்டில் பகுதிக்குள் இடஞ்சுட்டியை வைத்து பண்புக் கருவிகளில் திசையையும் அதிகபட்ச அகலத்தையும் மாற்றிப் பாருங்கள். முன்னோட்டத்தில் கோட்டுத் துண்டு எல்லையின்றி முதன்மை உரை தொடர்வதைப் பார்க்கலாம்.

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, boldWing, linkWing,
  headingWing, alignWing, dropCapWing, bulletListWing, orderedListWing,
  taskListWing, quoteWing, floatWing, detailsWing, codeWing,
  dividerWing, tableWings, imageWing, youtubeWing, uploadWing,
  mountUpload, mountUploadView, mountViewTools,
} from 'nabi-note'

const selected = [
  boldWing,
  linkWing,
  headingWing,
  alignWing,
  dropCapWing,
  bulletListWing,
  orderedListWing,
  taskListWing,
  quoteWing,
  floatWing,
  detailsWing,
  codeWing,
  dividerWing,
  ...tableWings,
  imageWing,
  youtubeWing,
  uploadWing,
]
const locale = createLocale('ta')
const { nabi, registry } = createNabiWith(selected, { locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')!, onFiles: upload.take })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')

const selected = wings().allBasic().build()

மிதக்கும் பகுதி அடிப்படை wing-களில் உள்ளது. தேவையான wing-களை மட்டும் அமைத்தால் wings().use('float') பயன்படுத்தவும் அல்லது floatWing ஐ நேரடியாகப் பதிவு செய்யவும். பகுதிக்குள் பயன்படுத்தும் படம், அட்டவணை, பட்டியல் போன்றவற்றின் wing-களையும் பதிவு செய்ய வேண்டும்.

உருவாக்குதல் மற்றும் இடமமைத்தல் ​

முதன்மை உரையில் இடஞ்சுட்டியை வைத்து மிதக்கும் பகுதி பொத்தானை அழுத்தினால் காலிப் பகுதி உருவாகும். இயல்பாக வலப்பக்கம், அதிகபட்ச அகலம் 40% ஆகும். பல பத்திகளைத் தேர்ந்தெடுத்து அழுத்தினால் தேர்வு தொட்ட முழுப் பத்திகளும் ஒரு பகுதியாகச் சுற்றப்படும். ஏற்கெனவே உள்ள மிதக்கும் பகுதியை மீண்டும் சுற்றவோ அதன் உள்ளே மற்றொரு மிதக்கும் பகுதியை உருவாக்கவோ முடியாது.

nabi.applyCommand('insertFloat', { side: 'right', w: 40 })

பகுதிக்குள் இடஞ்சுட்டி இருக்கும்போது பண்புக் கருவிகளில் இடது அல்லது வலது பக்கத்தையும் அதிகபட்ச அகலத்தையும் மாற்றவும். அதிகபட்ச அகலமாக 20%, 30%, 40%, 50% ஆகியவற்றில் ஒன்றைத் தேர்ந்தெடுக்கவும். இது முழுத் திரையின் அகலமல்ல, முதன்மை உரையின் அகலத்தை அடிப்படையாகக் கொண்டது; உள்ளடக்கம் குறைவாக இருந்தால் உண்மையான பகுதி இன்னும் குறுகியதாக இருக்கலாம்.

nabi.applyCommand('setFloatSide', { side: 'left' })
nabi.applyCommand('setFloatWidth', { w: 30 })

உரை, படம், அட்டவணையை ஒட்டுதல், தொகுதி மாற்றம், பதிவேற்றம் ஆகியவை பகுதிக்குள்ளேயே இருக்கும். உள்ளிருக்கும் அட்டவணையை நீக்கினால் அட்டவணை மட்டும் அகலும். பகுதியின் உள்ளேயும் வெளியேயும் பரவும் தேர்வில் உள் தொகுதிகளைச் சேர்க்கவோ மாற்றவோ முடியாது.

அகல மதிப்பிற்கு அருகிலுள்ள மிதக்கும் பகுதியை நீக்கு பொத்தான் உள்ளடக்கத்தை நீக்காமல் முதன்மை உரைக்குத் திருப்பும். உருவாக்குதல், இடமாற்றம், பகுதியைப் பிரித்தல் ஆகிய அனைத்தையும் செயல்தவிர்க்கவும் மீண்டும் செய்யவும் முடியும்.

nabi.applyCommand('unwrapFloat')

முதன்மை உரையுடன் பாயும் விதம் ​

பின்வரும் பத்திகள் பகுதியின் பக்கமாகப் பாய்ந்து, பகுதி முடிந்ததும் முதன்மை உரையின் முழு அகலத்திற்குத் திரும்பும். அடுத்த தலைப்பு, அட்டவணை, குறியீடு, பிரிப்பான் அல்லது புதிய மிதக்கும் பகுதி முந்தைய பகுதிக்குக் கீழே தொடங்கும்.

முதன்மை உரையின் அகலம் 36rem க்குக் குறைந்தால் பகுதியும் முதன்மை உரையும் ஒரே நெடுவரிசையில் அமைக்கப்படும். அச்சிடும்போதும் ஒரே நெடுவரிசை பயன்படுத்தப்படும்; சேமித்த திசையும் அதிகபட்ச அகலமும் பாதுகாக்கப்படும். ஆவண ஒப்பீட்டுக் காட்சி ஒவ்வொரு பகுதியின் திசை மற்றும் அதிகபட்ச அகலத்தை வைத்திருக்கும்; மாற்றங்களை எளிதாகப் படிக்க அடுத்த தொகுதியைத் தனியாகக் கீழே காட்டும்.

சேமித்தலும் ஏற்றுதலும் ​

JSON-இல் float முனையின் a.side, a.w மற்றும் உள் தொகுதிகள் ஒன்றாகச் சேமிக்கப்படும். HTML-இல் சாதாரண பொருள் பத்தியிலுள்ள div இல் data-nabi-float, data-nabi-float-width பண்புகள் பயன்படுத்தப்படும்.

<div data-nabi-p>
  <div data-nabi-float="right" data-nabi-float-width="40">
    <p>முதன்மை உரையின் அருகில் வைக்க வேண்டிய விளக்கம்.</p>
  </div>
</div>
<p>இந்தப் பத்தி பகுதியின் பக்கமாகத் தொடர்கிறது.</p>

Markdown ஏற்றுமதியில் பகுதி HTML ஆகப் பாதுகாக்கப்படும். தன்னிச்சையான CSS float பாணிகள் இறக்குமதியாகாது; எனவே சேமிக்கவும் மீட்கவும் NABI NOTE உருவாக்கிய JSON அல்லது HTML பயன்படுத்தவும். திசையும் அகலமும் மாறாமல் இருக்க தொகுப்பி, SSR, முன்னோட்டம், வெளியிடப்பட்ட காட்சியில் ஒரே wing-களையும் CSS ஐயும் இணைக்கவும்.

CSS பாணிகள் ​

பகுதியின் நிறங்களையும் இடைவெளியையும் [data-nabi-float] தேர்வியால் வடிவமைக்கலாம். வெளிப்புறப் பத்தி இடமமைப்பையும் அதிகபட்ச அகலத்தையும் நிர்வகிப்பதால் float, display அல்லது அகலத்தை நேரடியாக மாற்ற வேண்டாம்.

.brand-note .nabi-content [data-nabi-float] {
  background: var(--nabi-soft);
  border-radius: var(--nabi-radius);
  padding: .75rem;
}