Kit NUI
Créer ta propre interface avec le kit CSS / JS de tc-ui et la fonction tc.ui.
#Page NUI de ta ressource : tc.ui
Côté Lua, tc.ui pilote la page NUI de ta ressource.
| Fonction | Rôle |
|---|---|
tc.ui.open(view, data, onClose, extra) | Monte TC.views[view] côté web et donne le focus ; onClose(silent) est appelé à la fermeture. Forme table : tc.ui.open(view, data, { onClose, extra, focus = false }) |
tc.ui.close(silent) | Ferme la vue (le callback NUI close est enregistré automatiquement) |
tc.ui.send(action, data) | SendNUIMessage({ action, data }) |
tc.ui.view / tc.ui.isOpen() | Vue actuellement ouverte |
tc.ui.proxy({ 'nom:action', ... }, handler, maxArgs) | Callback server utilisé par TC.server(...) : seuls les noms listés passent |
tc.ui.callback(name, fn, onError) | RegisterNUICallback protégé par pcall : l'interface reçoit { ok = false } en cas d'erreur |
#Charger le kit dans ta 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"> <!-- optionnel -->
<script src="https://cfx-nui-tc-ui/web/kit/tc.js"></script>
<script>
TC.setBrand('M', 'S', 'MON SCRIPT');
TC.register('menu', {
mount(root, data) { /* construis ta vue dans root */ },
escape() { TC.nui('close'); },
});
TC.start(); // options : { root, defaultView, escapeClose }
</script>tc-ui laisse ses fichiers web/ en clair justement pour que d'autres ressources les chargent.
#Contenu du kit
| Fichier | Contenu |
|---|---|
tc.css | Variables --tc-*, boutons, champs, interrupteurs, pastilles, barres, toasts |
components.css | Coque tablette (.tablet, .side, .nav, .main), .drawer, .prompt (modale), .panel, .table, .kpis, .segmented, .chips, .lines, .steps, .timeline, sélecteur de couleur |
keypad.css + keypad.js | Digicode partagé : vue standard keypad et composant TC.keypad(host, opts) |
tc.js | Fonctions TC.* (voir ci-dessous) |
Seul TC est global : le reste du kit est privé, ta page peut donc déclarer ses propres ICONS, toast…
#Fonctions TC.*
TC.h, clear, esc, nui, post, server, toast, notify, result, confirmButton, modal, colorPicker, copy, icon / addIcons (59 icônes), brandEl / setBrand, avatar, initials, money, num, percent, date, when, formatDate, toDate, ago, clock, fill, plural, hex, rgb, debounce, beep(freq, secondes, type, volume), errorText, sectionTitle, info, empty, et le routeur (register, start, on).
TC.h insère le texte avec createTextNode : seul l'attribut html injecte du HTML, à réserver aux chaînes écrites en dur dans ton code, jamais à du texte venant d'un joueur.
#Thème
Les couleurs viennent des variables --tc-*. Pour personnaliser, surcharge-les dans le CSS de ta page :
:root {
--tc-accent: #5566c1;
--tc-accent-2: #7384e8;
--tc-surface: #11141b;
--tc-text: #f1f3f8;
--tc-radius: 14px;
}Variables principales : --tc-accent, --tc-accent-2, --tc-ok, --tc-warn, --tc-bad, --tc-bg, --tc-surface (et -2, -3), --tc-line, --tc-text (et -2, -3), --tc-radius, --tc-shadow, --tc-font.