Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-dynamic-page-title): implement snapped title on mobile #9898

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

kgogov
Copy link
Member

@kgogov kgogov commented Sep 18, 2024

Overview

We have introduced a new feature in the ui5-dynamic-page-title component that enhances the user experience on mobile devices. When the DynamicPageHeader is in its collapsed (snapped) state, you can now display a simplified, single-line title specifically designed for mobile screens. This feature helps optimize the use of limited screen space on mobile devices by showing a concise title that remains always visible.

New Properties

  • snappedTitleOnMobile: Boolean (default: false)

    • When set to true, this property enables the display of a simplified, single-line title on mobile devices when the header is in its snapped state.
  • snappedTitleOnMobileText: String

    • Specifies the text content of the snapped title that will be displayed on mobile devices when the header is snapped. This text overrides any other title content set in the DynamicPageTitle slots during the snapped state on mobile devices.

Example:

<ui5-dynamic-page>
  <ui5-dynamic-page-title
    snapped-title-on-mobile
    snapped-title-on-mobile-text="Mobile Snapped Title">
    <!-- Additional title content -->
  </ui5-dynamic-page-title>

  <!-- DynamicPageHeader and content slots -->

</ui5-dynamic-page>

- Introduced `snappedTitleOnMobile` property to display a simplified
  title on mobile when the header is snapped.
- Added `snappedTitleOnMobileText` to define the text for the
  mobile-specific snapped title.
- This feature optimizes title display on small screens, improving
  mobile usability.
- Clicking the snapped title on mobile expands the header.
- On non-mobile devices, the standard title is displayed, ignoring the
  mobile-specific title.
@kgogov kgogov force-pushed the feat-dp-snapped-title-on-mobile branch from 4c95948 to d61f6d6 Compare September 19, 2024 15:07
@kgogov kgogov marked this pull request as ready for review September 19, 2024 15:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant