Accessibility: Not Needed

Translations: Not Needed

Migration Guide: Full

Content Wrap

The Content Wrap component is a foundational layout component that provides consistent styling, and notification support across the application. It serves as a wrapper for its child components.

Basic Usage

This content is wrapped in the default ContentWrap component

<template>
  <HLContentWrap>
    <div class="p-4 border rounded">This content is wrapped in the default ContentWrap component</div>
  </HLContentWrap>
</template>
<script setup>
  import { HLContentWrap } from '@platform-ui/highrise'
</script>

Full Screen Mode

This content occupies the entire screen with no padding applied

<template>
  <HLContentWrap :fullScreen="true">
    <div class="border rounded">This content occupies the full screen with no padding applied</div>
  </HLContentWrap>
</template>
<script setup>
  import { HLContentWrap } from '@platform-ui/highrise'
</script>

RTL (Right-to-Left) Support

The ContentWrap component supports RTL text direction for internationalization with languages like Arabic, Hebrew, Persian, and Urdu.

Basic RTL Usage

هذا المحتوى باللغة العربية من اليمين إلى اليسار

هذا المحتوى باللغة العربية من اليمين إلى اليسار

<template>
  <!-- LTR (Left-to-Right) - Default -->
  <HLContentWrap dir="ltr">
    <div>Left-to-right content</div>
  </HLContentWrap>

  <!-- RTL (Right-to-Left) -->
  <HLContentWrap dir="rtl">
    <div>محتوى من اليمين إلى اليسار</div>
  </HLContentWrap>
</template>
<script setup>
  import { HLContentWrap } from '@platform-ui/highrise'
</script>

Dynamic Direction Based on Locale

<template>
  <HLContentWrap :dir="direction" :locale="locale">
    <YourApp />
  </HLContentWrap>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { HLContentWrap } from '@platform-ui/highrise'

  const locale = ref('en-US')

  // RTL languages
  const RTL_LANGUAGES = ['ar', 'he', 'fa', 'ur']

  const direction = computed(() => {
    const lang = locale.value.split('-')[0]
    return RTL_LANGUAGES.includes(lang) ? 'rtl' : 'ltr'
  })
</script>

Notification Configuration

The ContentWrap component includes a notification system that can be customized through the notificationConfig prop:

<template>
  <HLContentWrap
    :notificationConfig="{
    containerClass: 'custom-notification',
    containerStyle: { top: '24px' },
    placement: 'top-right',
    max: 5,
    scrollable: true
  }"
  >
    <!-- Content with custom notification settings -->
  </HLContentWrap>
</template>
<script setup>
  import { HLContentWrap } from '@platform-ui/highrise'
</script>

Imports

import { HLContentWrap } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
dir	'ltr' | 'rtl'	'ltr'	Text direction for RTL (Right-to-Left) language support
fullScreen	boolean	false	When true, removes the default padding (32px) from the container
locale	string	'en-US'	Sets the language for localization. See supported languages above
notificationConfig	object	{}	Configuration object for the notification system
namespace	string	'platform-ui__highrise'	Class name of the container of detached parts of components inside HLContentWrap

Note

namespace MUST be used when using CSS style overrides that are not scoped and must include the app name passed to the tailwind-prefix-wrapper plugin. ref

Example:

/* Correct - using namespace */
.paymentLinksApp {
  .custom-button {
    color: red;
  }
  // ... other global / unscoped styles
}

/* Incorrect - global styles */
.custom-button {
  color: red;
}

NotificationConfig Properties

Name	Type	Description
containerClass	string	Custom class for the notification container
containerStyle	object	Custom styles for the notification container
to	string	Target element to mount notifications
placement	string	Position of notifications ('top-right', 'top', etc.)
max	number	Maximum number of notifications to show
scrollable	boolean	Whether notifications should be scrollable

Slots

Name	Description
default	The content to be wrapped by the component

Best Practices

1. Always wrap your main application content with HLContentWrap to ensure consistent theming across all HighRise components.
2. Use HLContentWrap as the wrapper when integrating GHL-UI components with HighRise components.
3. Enable fullScreen mode when creating custom layouts that require removing the default padding.
4. Customize the notification system according to your application's requirements using the notificationConfig prop.