@page "/notification"
@page "/docs/guides/components/notification.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Notification
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Notification</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase toast notifications using <code>NotificationService</code> with different severity levels (Success/Info/Warning/Error), customizable positioning with inline styles, click handlers, custom summary and detail content templates, and duration progress indicators.
</RadzenText>

<HelpPrerequirements />

<RadzenText Anchor="notification#severity" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Notification severity
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use NotificationMessage Severity to set custom position.
</RadzenText>
<RadzenExample ComponentName="Notification" Example="NotificationSeverityConfig">
    <NotificationSeverityConfig />
</RadzenExample>

<RadzenText Anchor="notification#position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom Notification position
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use NotificationMessage Style to set custom position.
</RadzenText>
<RadzenExample ComponentName="Notification" Example="NotificationPosition">
    <NotificationPosition />
</RadzenExample>

<RadzenText Anchor="notification#click-handler" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom click handler
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use NotificationMessage Click action to set custom click handler.
</RadzenText>
<RadzenExample ComponentName="Notification" Example="NotificationClickHandler">
    <NotificationClickHandler />
</RadzenExample>

<RadzenText Anchor="notification#custom-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Custom content
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use NotificationMessage SummaryContent and DetailContent to set custom content.
</RadzenText>
<RadzenExample ComponentName="Notification" Example="NotificationCustomContent">
    <NotificationCustomContent />
</RadzenExample>

<RadzenText Anchor="notification#duration-progress" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Duration progress
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use NotificationMessage ShowProgress to show duration progress.
</RadzenText>
<RadzenExample ComponentName="Notification" Example="NotificationDurationProgress">
    <NotificationDurationProgress />
</RadzenExample>