NABI NOTE
Nyaraka

Jedwali ​

Chagua safu mlalo na safu wima kutoka kwenye upau wa zana ili kuunda jedwali. Ndani ya seli, maudhui huendelea kwa kuvunja mistari badala ya aya nyingi, na Tab na Shift+Tab husogea hadi seli inayofuata au iliyotangulia.

Kuongeza na kufuta safu mlalo au safu wima, kuunganisha seli, na kuwasha au kuzima seli za kichwa hufanya kazi kuzunguka seli zilizochaguliwa. Ili kutumia upangaji wa safu wima kwenye mwonekano uliochapishwa baada ya kuhifadhi jedwali kama linaloweza kupangwa, unganisha attachViewer() kutoka nabi-note/viewer. Majedwali yenye seli zilizounganishwa hayapangwi.

Mabawa
Aina msingi ya herufiKipenyo
HTMLKihariri kinapakiwa…
JSONnabi-treeKihariri kinapakiwa…
Sakinisha
npm install nabi-note
Msimbo
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, taskListWing, tableWings, imageWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  taskListWing,
  ...tableWings,
  imageWing,
]
const { nabi, registry } = createNabiWith(selected)

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

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'sw' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
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()))
ts
const selected = wings().use('table').build()

Mitindo ya CSS ​

Tia mtindo kwenye jedwali kwa .nabi-content table, na seli kwa .nabi-content :is(th, td). Usibadilishe muundo wa seli au kitufe cha kupanga kinachoingizwa na kitazamaji.

css
.article-body table { inline-size: 100%; border-collapse: collapse; }
.article-body :is(th, td) { padding: .6rem .75rem; border: 1px solid var(--nabi-line); }
.article-body th { background: var(--nabi-soft); font-weight: 700; }
.article-body tr:nth-child(even) td { background: color-mix(in srgb, var(--nabi-soft) 45%, transparent); }

Kitazamaji kikiunganishwa, hifadhi kitufe cha .nabi-sort. Ukibatilisha kwa lazima position ya seli au nafasi ya kulia, kinaweza kufunika kitufe cha kupanga.