Iris

Cómo Proporcionar la Biblioteca

Para proporcionar tu biblioteca, necesitarás agregar las siguientes entradas a la tabla de tu historia:

Indice	Tipo	Descripción
iris   Obligatorio	Iris	La biblioteca de Iris que será utilizada

Cómo Renderizar Historias

UI Labs configurará Iris para que funcione en historias y creará una simulación de UserInputService. La configuración que seguirá UI Labs está basada en Este Ejemplo

Después de esto, la función story será ejecutada una vez, dentro de esta debes conectar a Iris.

Luau

local story = {
   iris = Iris,
   story = function(props)

      Iris:Connect(function()
         Iris.ShowDemoWindow()
      end)
   end,
}

Roblox-TS

const story = {
	iris: Iris,
	story: (props: InferIrisProps<typeof controls>) => {
		Iris.Connect(() => {
			Iris.ShowDemoWindow();
		});
	},
};

Cómo Usar Controles

UI Labs creará un Iris.State para cada control y los actualizará cuando el control cambie. Estos controles estarán disponibles en la tabla props.

Luau

local controls = {
   Title = "Ventana",
   IsUncollapsed = false,
}

local story = {
   iris = Iris,
   controls = controls,
   story = function(props)
      local controls = props.controls

      Iris:Connect(function()
         Iris.Window({ controls.Title:get() }, { isUncollapsed = controls.IsUncollapsed })
            ---
         Iris.End()
      end)
   end
}

Roblox-TS

const controls = {
	Title: "Ventana",
	IsUncollapsed: false,
};

const story = {
	iris: Iris,
	controls: controls,
	story: (props: InferIrisProps<typeof controls>) => {
		const controls = props.controls;

		Iris.Connect(() => {
			Iris.Window([controls.Title.get()], { isUncollapsed: controls.IsUncollapsed });
			///
			Iris.End();
		});
	},
};

Limpieza

UI Labs llamara Iris.Shutdown automáticamente cuando la historia sea desmontada y destruirá la simulación de UserInputService.

Además, si necesitas hacer limpieza adicional, puedes regresar una función que se ejecutará cuando la historia sea desmontada.

Ejemplo

Luau

local story = {
   iris = Iris,
   controls = controls,
   story = function(props)

      Iris:Connect(function()
         Iris.ShowDemoWindow()
      end)

      return function()
         print("La historia está siendo desmontada")
      end
   end
}

Roblox-TS

const story = {
	iris: Iris,
	controls: controls,
	story: (props: InferIrisProps<typeof controls>) => {
		Iris.Connect(() => {
			Iris.ShowDemoWindow();
		});

		return () => {
			print("La historia está siendo desmontada");
		};
	},
};

Cómo Usar el Creador de Historias

Puedes usar el Creador de Historias del Paquete de Utilidades para crear tu historia. Estos inferirán los tipos de controles para Roblox-TS.

UILabs.CreateIrisStory(info, story):IrisStory

Ejemplo

Luau

local Iris = require(...)

local UILabs = require(...)
local CreateIrisStory = UILabs.CreateIrisStory

local controls = { ... }

local story = CreateIrisStory({
   iris = Iris,
   controls = controls,
}, function(props)

   Iris:Connect(function()
      Iris.ShowDemoWindow()
   end)
end)

Roblox-TS

import Iris from "@rbxts/iris"
import { CreateIrisStory } from "@rbxts/ui-labs"

const controls = { ... }

const story = CreateIrisStory({
   fusion: Fusion,
   controls: controls,
}, (props: InferIrisProps<typeof controls>) => {

   Iris.Connect(() => {
      Iris.ShowDemoWindow()
   })
})