WebRow

WebRow[{expr1, expr2, }]

represents an HTML column containing the expri.

WebRow[expr,options]

displays with expr formatted using the specified option settings.

Details

  • WebRow is used to arrange and style expressions on a webpage.
  • WebRow can be used with WebColumn and WebItem to provide a webpage layout.
  • WebRow[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
    Largerlarger size specification
    Smallersmaller size specification
    n (any number) dimension with pixel size n
    Tiny, Small, etc. absolute size specification
    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 WebRow to the cloud:

Use Scaled to specify a full-page layout:

Scope  (2)

By default, a WebRow expands to fit the available viewport:

When used inside another WebRow, it will expand to fit the remaining size:

Elements that do not fit the viewport are automatically wrapped:

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

A list can be used to specify width and height:

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

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 WebRow:

Use only a horizontal scrollbar:

Applications  (1)

Define a reusable media component:

Use the component in a simple layout:

Properties & Relations  (2)

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

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

Specify a row that collapses to a column on a mobile device:

ExportString can be used to compile WebRow to HTML:

Possible Issues  (1)

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

Neat Examples  (2)

Write a centered layout:

Now test how it looks with some content:

Write a layout in which the order of elements depends on the width of the screen:

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

Text

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

CMS

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

APA

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

BibTeX

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

BibLaTeX

@online{reference.wolfram_2022_webrow, organization={Wolfram Research}, title={WebRow}, year={2021}, url={https://reference.wolfram.com/language/ref/WebRow.html}, note=[Accessed: 07-October-2022 ]}