Skip to content

README.md

Latest commit

 

History

History
57 lines (39 loc) · 1.48 KB

README.md

File metadata and controls

57 lines (39 loc) · 1.48 KB

PlatformBlock

Conditionally renders its slotted content only when the current build platform matches one of the specified platform names. Replaces the legacy comment-block pattern (<!-- Angular, React -->…<!-- end: Angular, React -->).

Import

import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';

Props

Prop Type Description
for string Comma-separated list of platform names to show content for.

Valid platform names: Angular, React, WebComponents, Blazor

Examples

{/* Single platform */}
<PlatformBlock for="Angular">
  This paragraph only appears in Angular docs.
</PlatformBlock>

{/* Multiple platforms */}
<PlatformBlock for="Angular, React">
  Visible in Angular and React docs only.
</PlatformBlock>

{/* All platforms (just write the content without PlatformBlock) */}

Platform context

The active platform is read from the PLATFORM environment variable via getPlatformContext(). Set it in astro.config.ts:

createDocsSite({ platform: 'angular' });
// → only <PlatformBlock for="Angular"> blocks render

Or in the environment directly:

PLATFORM=React astro build

MDX global registration

To avoid importing PlatformBlock in every MDX file, register it globally in mdx-components.ts:

// src/mdx-components.ts
export { default as PlatformBlock } from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';