Condition#
Component <neo-condition> is a conditional wrapper: it shows its content only when a condition is true, and hides it otherwise. Right now that condition is the operating system. Use it only for what CSS can't check. CSS @media already handles touch, dark mode, and the like.
Reference#
| Name | Type | Default | Description |
|---|---|---|---|
platform | string | none | Which platforms to show on. One or more of apple, windows, linux, separated by spaces to match any (windows linux). Prefix not to invert (not apple). Leave empty to show everywhere. |
| Name | Description |
|---|---|
| default | Shown only while platform matches the current platform. |
Condition syntax#
platform names the operating systems to show on:
apple: macOS or iOS (aliasesmac,macos,ios).windows(aliaswin).linux(also Android / ChromeOS).
platform="windows linux" matches either; platform="not apple" matches everything but Apple.
Examples#
Platform branch#
Each branch carries platform-specific wording and shows only on its OS: you're seeing the one for your system.
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 ConditionOpts.UserAgent and the matching branch renders up front, no flash. To preview another OS here, open DevTools → Network conditions → User agent client hints → Platform, then reload.
Multiple platforms#
List several tokens to match any of them. Here one branch covers Windows and Linux together; the other is Apple-only.