Neo-Teyrall : ajout d’un tuto pour les lancé de jet

2025-10-08T16:27:24Z

ajout d’un tuto pour les lancé de jet

← Version précédente		Version du 8 octobre 2025 à 18:27
Ligne 60 :		Ligne 60 :
	You can find tutorials that use buttons here:		You can find tutorials that use buttons here:

	# Roll ~~a dice [TODO~~]		# [[Manage Roll]]
	# Hide and show elements [TODO]		# Hide and show elements [TODO]
	# Send information to the chat [TODO]		# Send information to the chat [TODO]
	# Move a view inside a repeater [TODO]		# Move a view inside a repeater [TODO]

Neo-Teyrall : Page créée avec « = Buttons = Buttons are components that can trigger multiple actions. There are three main ways to create a button: the first two are simple, while the third allows you to build more complex buttons. == Button with an icon == # Add an '''Icon''' component and choose the desired icon. # You can assign an action to the icon in two different ways: #* Fill in the '''Roll''' field with a dice roll and the roll’s title. #* Add the class '''clickable''' and [lin... »

2025-08-31T18:24:58Z

Page créée avec « = Buttons = Buttons are components that can trigger multiple actions. There are three main ways to create a button: the first two are simple, while the third allows you to build more complex buttons. == Button with an icon == # Add an '''Icon''' component and choose the desired icon. # You can assign an action to the icon in two different ways: #* Fill in the '''Roll''' field with a dice roll and the roll’s title. #* Add the class '''clickable''' and [lin... »

Nouvelle page

= Buttons =
Buttons are components that can trigger multiple actions.

There are three main ways to create a button: the first two are simple, while the third allows you to build more complex buttons.

== Button with an icon ==

# Add an '''Icon''' component and choose the desired icon.
# You can assign an action to the icon in two different ways:
#* Fill in the '''Roll''' field with a dice roll and the roll’s title.
#* Add the class '''clickable''' and [link|connect the button to a JS script].

== Button with a label ==

# Add a '''Label''' component and set the text to the value you want.
# Create an action for the button in two ways:
#* Fill in the '''Roll''' field with a dice roll and check the '''Clickable''' option.
#* Add the class '''clickable''' and connect the button to a JS script.

== Complex button with a container ==
Sometimes, you may want to create more advanced buttons by overlaying multiple elements (icons, labels, etc.).

# Place a '''Container'''.
# Add the elements you want to overlay inside this container.
# Add the '''position-absolute''' class to each of the components inside the container so that they overlap.
# Use m and p] classes to adjust positioning.
# Adjust opacity, size, and color to differentiate the elements.
# Finally, add the '''clickable''' class to the parent container so that the whole button reacts on hover.
# Assign an '''id''' to the container (e.g., ''button_action'') so you can connect it to your script.

== Connect the button to a script ==
To link a button to a scripted action:

# Define a clear '''id''' for your button (e.g., ''button_action'', ''button_roll'', ''button_hide''...).
# Create an initialization function to connect the button to an action.

init = function(sheet) {
if (sheet.id() === "main") {
initMain(sheet);
}
};
const initMain = function(sheet) {
// Main initialization
initButton(sheet);
};
const initButton = function(sheet){
log("START INIT BUTTON");
// Define the button action when clicked
const buttonAction = function () {
// Add instructions to execute here
};
// Get the button component using its ID
let button = sheet.get("button_action");
// Connect the "click" action to the buttonAction function
button.on("click", buttonAction);
log("END INIT BUTTON");
};

== Using buttons ==
You can find tutorials that use buttons here:

# Roll a dice [TODO]
# Hide and show elements [TODO]
# Send information to the chat [TODO]
# Move a view inside a repeater [TODO]

Button - Historique des versions

Neo-Teyrall : ajout d’un tuto pour les lancé de jet

Neo-Teyrall : ajout d’un tuto pour les lancé de jet