WebItem

WebItem[expr]

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

  • 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,spec1,spec2,] allows the speci to be any list or sequence of the following:
  • opt1val1,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
    Italictext italic
    Boldtext bold
    Underlinedtext underlined
    Dashedborder drawn dashed
    Dottedborder drawn dotted
    Thickness[],Thick,Thinborder thickness
    Mouseover[]switch formatting based on mouseover
  • A few common explicit options include:
  • Backgroundbackground color
    FontSizefont size
    FontFamilyfont family
    FontSlantfont slant (Plain, Italic, )
    FontWeightfont weight (Plain, Bold, )
    Alignmentalignment of the content
    Scrollbarsscrollbar specification
    Framewhether to put a frame around the plot
    FrameStylestyle specifications for the frame
    ImageMarginsabsolute 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:

Wolfram Research (2021), WebItem, Wolfram Language function, https://reference.wolfram.com/language/ref/WebItem.html.

Text

Wolfram Research (2021), WebItem, Wolfram Language function, https://reference.wolfram.com/language/ref/WebItem.html.

CMS

Wolfram Language. 2021. "WebItem." Wolfram Language & System Documentation Center. Wolfram Research. https://reference.wolfram.com/language/ref/WebItem.html.

APA

Wolfram Language. (2021). WebItem. Wolfram Language & System Documentation Center. Retrieved from https://reference.wolfram.com/language/ref/WebItem.html

BibTeX

@misc{reference.wolfram_2022_webitem, author="Wolfram Research", title="{WebItem}", year="2021", howpublished="\url{https://reference.wolfram.com/language/ref/WebItem.html}", note=[Accessed: 03-July-2022 ]}

BibLaTeX

@online{reference.wolfram_2022_webitem, organization={Wolfram Research}, title={WebItem}, year={2021}, url={https://reference.wolfram.com/language/ref/WebItem.html}, note=[Accessed: 03-July-2022 ]}