Enable JavaScript to interact with content and submit forms on Wolfram websites. Learn how

WebItem

represents an HTML element containing expr.

WebItem[expr,options]

represents an HTML element formatted using the specified option settings.

WebItem[XMLElement[expr,…],options]

represents an XMLElement formatted using options.

Details and Options

WebItem is used to style how an expression renders on a webpage.
WebItem is typically nested inside WebRow or WebColumn expressions to provide a webpage layout.
WebItem[expr,spec₁,spec₂,…] allows the spec_i to be any list or sequence of the following:

	opt₁val₁,…	explicit options
	"class"	a named class name from the current stylesheets
	color directive	color (Red, RGBColor[…], …)
	size directive	a size (width, {width,height}, …)
	InterfaceSwitched[…]	switch formatting based on the environment
	Scaled[…]	dimension relative to window size
	n (any number)	dimension with pixel size n
	Italic	text italic
	Bold	text bold
	Underlined	text underlined
	Dashed	border drawn dashed
	Dotted	border drawn dotted
	Thickness[…],Thick,Thin	border thickness
	Mouseover[…]	switch formatting based on mouseover

A few common explicit options include:

	Background	background color
	FontSize	font size
	FontFamily	font family
	FontSlant	font slant (Plain, Italic, …)
	FontWeight	font weight (Plain, Bold, …)
	Alignment	alignment of the content
	Scrollbars	scrollbar specification
	Frame	whether to put a frame around the plot
	FrameStyle	style specifications for the frame
	ImageMargins	absolute margins to leave around the item

You can specify an option that is an arbitrary CSS property, like "box-shadow"  "10px 5px 5px black".

Examples

open allclose all

Basic Examples (1)

Deploy a single WebItem to the cloud:

Deploy a list using WebItem, wrapped in a WebRow:

Scope (3)

WebItem is normally sized to fit the content:

The second argument can be used to specify the size of the element:

A list can be used to specify width and height:

Simple mathematical operations are allowed:

Use Automatic to specify that the size should fit the content, or Full to specify that it should fit all the remaining space:

Compare different size specifications:

Any desired CSS properties can be set directly:

WebItem can be used to directly style a custom HTML element:

Options (10)

Alignment (1)

Define a series of elements:

Use the Alignment option to specify how the contents should be aligned within the available area:

Background (1)

The Background option can be used to specify a background color using any color specification, such as RGBColor:

Any CSS specification can be used:

FontFamily (1)

Use FontFamily to specify the font:

FontSize (1)

The FontSize option accepts a variety of specifications and allows for inheritance:

Any CSS specification can be used:

FontSlant (1)

Use FontSlant to specify slanted characters in text:

The Italic directive can be given instead of explicitly using the FontSlant option:

FontWeight (1)

Use FontWeight to specify how heavy the characters in a font should be:

The Bold directive can be given instead of explicitly using the FontWeight option:

Frame (1)

Draw a frame around the whole graphic:

FrameStyle (1)

Specify the overall frame style:

ImageMargins (1)

Have 20-point margins on all sides:

Scrollbars (1)

Specify both horizontal and vertical scrollbars for WebItem:

Use only a horizontal scrollbar:

Properties & Relations (4)

WebItem is often used with WebRow and WebColumn to create a webpage layout:

InterfaceSwitched can be used to switch the content of a WebItem based on viewport size:

InterfaceSwitched can also be used to switch the value of a property:

Mouseover can be used to wrap any specification:

ExportString can be used to compile WebItem to HTML:

Possible Issues (1)

CloudDeploy uploads the HTML generated from the page expression at the time it is executed:

Use Delayed to cause the page to be generated anew on every webpage request:

Neat Examples (1)

Deploy a simple full-screen page layout:

Use Nest to create the effect of perspective:

Top