Tile

A Tile is a surface that displays content and actions on a single topic. The Tile component is composed of several subcomponents to handle various use cases:

Tile: a surface-level container for grouping related components.
TileMedia: a component for displaying images and additional media next to the TileContent.
TileContent: the wrapper for the Tile’s main content.
TileHeader: a component for the Tile header, to be used as part of TileContent.
TileFooter: a wrapper for the Tile footer, to be used as part of TileContent.
TileActions: an optional wrapper that groups a set of actions, to be used as a child of TileContent.

How to Use


local Neuron = require(Packages.Neuron)
local Tile = Neuron.Tile
local MediaType = Neuron.Enums.MediaType
local MediaShape = Neuron.Enums.MediaShape
 
local Button = Neuron.Button
local ButtonSize = Neuron.Enums.ButtonSize
local ButtonVariant = Neuron.Enums.ButtonVariant
...
local tokens = useTokens()
 
return React.createElement(Tile.Root, {
    FillDirection = Enum.FillDirection.Vertical,
    Size = UDim2.fromOffset(150, 275),
    spacing = tokens.Gap.Small,
    backgroundStyle = tokens.Color.Shift.Shift_200,
}, {
    Tile.Media = React.createElement(Tile.Media, {
        id = 123456,
        type = MediaType.Asset,
        shape = MediaShape.Square,
        background = tokens.Color.Shift.Shift_200,
    }),
    TileContent = React.createElement(Tile.Content, {
        spacing = tokens.Gap.XSmall,
        padding = tokens.Padding.Small,
    }, {
        TileHeader = React.createElement(Tile.Header, {
            title = {
                text = "Item",
                fontStyle = tokens.Typography.HeadingSmall,
                numLines = props.controls.numLines,
            },
            subtitle = {
                text = "Price",
                fontStyle = tokens.Typography.BodyLarge,
                colorStyle = tokens.Color.Content.Muted,
            },
            spacing = tokens.Gap.Small,
        }),
        TileFooter = React.createElement(Tile.Footer, {}, {
            -- Any custom footer
        }),
        TileActions = React.createElement(Tile.Actions, {
            Visible = isHovering,
        }, {
            Button = React.createElement(Button, {
                text = "Purchase",
                size = ButtonSize.Small,
                variant = ButtonVariant.Emphasis,
                fillBehavior = FillBehavior.Fill,
            }),
        }),
    }),
})