UI Helpers

ZhinNX includes small UI helpers so deadline projects do not need to rebuild basic feedback patterns.

toast()

toast('Saved')

modal()

modal({
  title: 'Details',
  content: 'This modal is rendered by ZhinNX.'
})

confirm()

const accepted = await confirm({
  title: 'Reset data?',
  content: 'This action cannot be undone.'
})

if (accepted) {
  console.log('reset')
}

sheet()

sheet({
  title: 'Actions',
  content: '<button @click="closeSheet">Close</button>'
})

loading()

const stop = loading('Loading data')
await api.get('/api/items')
stop()

cx()

cx() joins classes conditionally.

const className = cx('button', isActive && 'active')