A wider screen, please

This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.

Morpheus v0.3.0
v0.3.0
Morpheus Components If platform Settings

If platform#

Component <neo-if-platform> is a platform gate. It shows its content only on the operating systems its attributes select, and hides it elsewhere. Use it only for what CSS can't check. CSS @media already handles touch, dark mode, and the like. To gate on the connection state, use <neo-if-network> .

Reference#

Attributes #

NameTypeDefaultDescription
macosboolean observedunsetmacOS.
iosboolean observedunsetiOS and iPadOS, including iPadOS Safari, which reports a Mac.
windowsboolean observedunsetWindows.
linuxboolean observedunsetDesktop Linux. Android and ChromeOS have their own attributes.
androidboolean observedunsetAndroid.
chromeosboolean observedunsetChromeOS.

Slots #

NameDescription
defaultShown only on the platforms the attributes select (see Platform rules).

Platform rules#

Each platform attribute is a boolean command the server can set:

  • Platforms set true are an OR, since a device has 1 platform. <neo-if-platform macos linux> shows on either.
  • x="false" hides the content on x. <neo-if-platform windows="false"> shows everywhere but Windows.
  • With no platform attribute the content shows everywhere.
  • A misspelled attribute is ignored. <neo-if-platform macso> shows everywhere.

Examples#

Platform branch#

Each branch carries platform-specific wording and shows only on its OS. You're seeing the one for your system. iOS and Android match no branch.

On macOS, press to run the demo action.On Windows, press to run the demo action.On Linux and ChromeOS, press to run the demo action.
HideHTMLTempl

This static demo shows only your own OS's branch, and swaps it in after the script loads, a brief flash. A templ server avoids that. Pass the request user agent to IfPlatformOpts.UserAgent and the matching branch renders up front, with no flash. To preview another OS here, open DevTools, go to Network conditions and then User agent client hints, set Platform, and reload.

Multiple platforms#

Set several platforms to show on any of them. Here one branch covers the Ctrl platforms, the other the Command platforms.

Ctrl-based shortcuts (Windows, Linux and ChromeOS).Command-based shortcuts (macOS and iOS).
HideHTMLTempl

Exclude platforms#

Download links per store. Phones get their app store, and the branch with ios="false" android="false" covers every other platform.

Get the app on the App Store.Get the app on Google Play.Download the desktop app for your computer.
HideHTMLTempl

Settings

Theme

DefaultSunshineOceanMatrixRose☀ ◐ ☾

Accessibility

Playgrounds

Server Simulator