NUI kit
Build your own interface with the tc-ui CSS / JS kit and the tc.ui function.
#Your resource's NUI page: tc.ui
On the Lua side, tc.ui drives the NUI page of your resource.
| Function | Role |
|---|---|
tc.ui.open(view, data, onClose, extra) | Mounts TC.views[view] on the web side and gives focus; onClose(silent) is called when closed. Table form: tc.ui.open(view, data, { onClose, extra, focus = false }) |
tc.ui.close(silent) | Closes the view (the close NUI callback is registered automatically) |
tc.ui.send(action, data) | SendNUIMessage({ action, data }) |
tc.ui.view / tc.ui.isOpen() | Currently open view |
tc.ui.proxy({ 'name:action', ... }, handler, maxArgs) | server callback used by TC.server(...): only the listed names get through |
tc.ui.callback(name, fn, onError) | RegisterNUICallback protected by pcall: the interface receives { ok = false } on error |
#Load the kit in your page
<link rel="stylesheet" href="https://cfx-nui-tc-ui/web/kit/tc.css">
<link rel="stylesheet" href="https://cfx-nui-tc-ui/web/kit/components.css"> <!-- optional -->
<script src="https://cfx-nui-tc-ui/web/kit/tc.js"></script>
<script>
TC.setBrand('M', 'S', 'MY SCRIPT');
TC.register('menu', {
mount(root, data) { /* build your view in root */ },
escape() { TC.nui('close'); },
});
TC.start(); // options: { root, defaultView, escapeClose }
</script>tc-ui leaves its web/ files in clear text precisely so other resources can load them.
#Kit contents
| File | Content |
|---|---|
tc.css | --tc-* variables, buttons, fields, switches, pills, bars, toasts |
components.css | Tablet shell (.tablet, .side, .nav, .main), .drawer, .prompt (modal), .panel, .table, .kpis, .segmented, .chips, .lines, .steps, .timeline, colour picker |
keypad.css + keypad.js | Shared keypad: standard keypad view and TC.keypad(host, opts) component |
tc.js | TC.* functions (see below) |
Only TC is global: the rest of the kit is private, so your page can declare its own ICONS, toast…
#TC.* functions
TC.h, clear, esc, nui, post, server, toast, notify, result, confirmButton, modal, colorPicker, copy, icon / addIcons (59 icons), brandEl / setBrand, avatar, initials, money, num, percent, date, when, formatDate, toDate, ago, clock, fill, plural, hex, rgb, debounce, beep(freq, seconds, type, volume), errorText, sectionTitle, info, empty, and the router (register, start, on).
TC.h inserts text with createTextNode: only the html attribute injects HTML, so reserve it for strings hard-coded in your own code, never for text coming from a player.
#Theme
Colours come from the --tc-* variables. To customise, override them in your page's CSS:
:root {
--tc-accent: #5566c1;
--tc-accent-2: #7384e8;
--tc-surface: #11141b;
--tc-text: #f1f3f8;
--tc-radius: 14px;
}Main variables: --tc-accent, --tc-accent-2, --tc-ok, --tc-warn, --tc-bad, --tc-bg, --tc-surface (and -2, -3), --tc-line, --tc-text (and -2, -3), --tc-radius, --tc-shadow, --tc-font.