MODDINGWIKI Developers General Building UI with Vortex and React

Building UI with Vortex and React

The UI of Vortex is created using React-Bootstrap v0.33.1 (Bootstrap 3). This has been expanded on and Vortex has a number of extra controls that can be used.

MainPage

<MainPage>
	<MainPage.Header>{this.renderHeader()}</MainPage.Header>
	<MainPage.Body>{this.renderBody()}</MainPage.Body>
</MainPage>

Header

FlexLayout

FlexLayout.Fixed and FlexLayout.Flex can be used to structure the DOM

<FlexLayout type="column">
	<FlexLayout.Fixed id="instructions">
		<p>Stays at the top of the column</p>
	</FlexLayout.Fixed>
	<FlexLayout.Flex>
		<Table tableId="bannerlord-savegames" />
	</FlexLayout.Flex>
</FlexLayout>

type	string	column or row
fill	boolean	(optional) description

Table

This component is used everywhere within Vortex. Mods page, Games page etc. It is VERY customizable and this is only touching the surface on what is possible but will cover the common things.

<Table
	tableId="bannerlord-savegames"
	data={this.sortedSaveGames}
	staticElements={this.tableAttributes}
	actions={saveActions}
	multiSelect={false}
	hasActions={false}
	showDetails={false}
	onChangeSelection={(ids) => this.Table_OnChangeSelection(this.sortedSaveGames[parseInt(ids[0])][1])}
/>

tableId	string	column or row, description
data	[rowId: string]: any	Object containing row data.
actions	ITableRowAction[]	description
staticElements	any[]	(optional) used to create column definitions
dataId	number	(optional)
columnBlacklist	string[]	(optional)
detailsTitle	string	(optional)
multiSelect	boolean	(optional)
defaultSort	string	(optional)
showHeader	boolean	(optional)
showDetails	boolean	(optional)
hasActions	boolean	(optional)
group	string	(optional)
defaultSort	string	(optional)
onChangeSelection	(ids: string[]) => void	(optional) event called when a row is selected. ids is a string array of the row (or rows) selected. A rows id is set through the data property above.

React-Bootstrap

Common usages of normal React components but type completion will let you use anything and that isn't really very helpful.

Radio

<Radio
	name="radioGroup"
	defaultChecked={saveGame.name == storedSaveGame}
	id={`bannerlord-savegames-radio${saveGame.index}`}
	onChange={() => this.Radio_OnChange(saveGame)}
></Radio>

name	string	(optional) creates a radio group with anything that shares this name
id	string	(optional) useful for styling and css selecting, usual html attribute
defaultChecked	boolean	(optional) if true, makes this the default selected button
name	string	(optional) creates a radio group with anything that shares this name
onChange	() => void	(optional) event called when a button in same radio group is pressed