-
Notifications
You must be signed in to change notification settings - Fork 128
MODDINGWIKI Developers General 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.Header>{this.renderHeader()}</MainPage.Header>
<MainPage.Body>{this.renderBody()}</MainPage.Body>
</MainPage>Header
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 |
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. |
Common usages of normal React components but type completion will let you use anything and that isn't really very helpful.
<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 |
This wiki and the Vortex Readme document contains a lot of information, please take your time and read these instructions carefully.
We provide detailed changes for each Vortex release.
If you have any questions about Vortex usage or want to share some information with the Vortex community, please go to one of the following places:
- About
- Install
- Troubleshooting
- Troubleshooting
- Developers
- Troubleshooting
- Developers
- Valheim
- Bannerlord
- BepInEx
- How to test a game extension
- How to package a game extension
- How to upload an extension to Nexus
- How to submit a game extension for review
Warning
The below documentation has not been checked for quality since migrating to GitHub Wiki and the information contained is potentially out of date and\or repeated.
- Frequently Asked Questions
- Getting Started
- Deployment Methods
- Downloading from Nexus Mods
- Managing File Conflicts
- Managing your Load Order
- Managing Save Games
- Setting up Profiles
- Keyboard Shortcuts
- How to create mod installers
- External Changes
- The Vortex Approach to Load Order
- Moving Vortex to a new PC
- Modding Skyrim Special Edition with Vortex
- Modding Mount & Blade II: Bannerlord with Vortex
- Modding Monster Hunter: World with Vortex
- Modding The Witcher 3 with Vortex
- Modding Baldur's Gate 3 with Vortex
- Modding Stardew Valley with Vortex
- Modding Valheim with Vortex
- Error Messages
- Misconfigured Documents Folder
- .NET 6 Install Issues
- Downgrading Extensions
- Command Line Parameters
- Introduction to Vortex extensions
- Creating a game extension (JavaScript)
- Creating a theme
- Game detection
- Adding a main page
- Adding a load order page
- Building UI with Vortex and React
- Packaging an extension
- Introduction
- Packaging extensions
- Project management
- Harmony Patcher Exectuable
- Vortex Harmony Mod Loader
- Setting up your dev environment
- Creating a theme
- Creating a game extension