This project is a (fully TypeScript compatible) port of RageMP-NativeUI Kar for alt:V. It provides a simple way to use NativeUI menus in your clientside scripts. A lot of credits to datWeazel who made the initial port of the RageMP-NativeUI.
package.json
location a file named .npmrc
and add this line:
@durtyfree:registry=https://npm.pkg.github.com
npm install --save @durtyfree/altv-nativeui
.import * as NativeUI from "@durtyfree/altv-nativeui";
.zip
archive you want from releases page.# nativeui-min
import * as NativeUI from "nativeui/nativeui.min.js";
# nativeui
import * as NativeUi from "nativeui/nativeui.js";
client-files
section of your resource.cfg
(if needed)See examples folder for alt:V resource examples.
import * as NativeUI from 'includes/NativeUIMenu/NativeUI.mjs';
const ui = new NativeUI.Menu("NativeUI Test", "Test Subtitle", new NativeUI.Point(50, 50));
ui.AddItem(new NativeUI.UIMenuListItem(
"List Item",
"Description for List Item",
new NativeUI.ItemsCollection(["Item 1", "Item 2", "Item 3"])
));
ui.AddItem(new NativeUI.UIMenuSliderItem(
"Slider Item",
["Fugiat", "pariatur", "consectetur", "ex", "duis", "magna", "nostrud", "et", "dolor", "laboris"],
5,
"Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.",
true
));
ui.AddItem(new NativeUI.UIMenuCheckboxItem(
"Checkbox Item",
false,
"Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint."
));
ui.ItemSelect.on(item => {
if (item instanceof NativeUI.UIMenuListItem) {
alt.log(item.SelectedItem.DisplayText, item.SelectedItem.Data);
} else if (item instanceof NativeUI.UIMenuSliderItem) {
alt.log(item.Text, item.Index, item.IndexToItem(item.Index));
} else {
alt.log(item.Text);
}
});
Result: