Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.


iPhone X-XS – 1

A drag-able sheet with custom content that can either be visible from the bottom or the top. It let’s people interact with a different set of actions within a page or to view specific content without being navigated.

Required properties:

  • Background should be grayed when sheet is visible
    • Tapping the grayed area should hide the sheet
  • Programmatically set the direction the sheet should display to top or bottom
  • Content should be completely customizable.
  • Programmatically show/hide the sheet.
  • Programmatically set the position of the sheet
  • Hitbox should be a little higher than the sheet, this will be helpful for people when they drag it.
  • The component should respect the keyboard and move it’s content respectively.

Optional properties:

  • Drag-able by using a handle.
  • Snap to snap-points when it is dragged


  • Should the component go over the navigation bar when it is full-sized?
    • The component will not go over the navigation bar for the first iterations.

API Changes

Add a ModalityLayout with a new SheetBehavior:

                    <Label Text="My label inside of the sheet" />


The sheet should either be visible from the bottom or at the top of the screen.

The default alignment should be Bottom (pic).

<dxui:SheetBehavior IsOpen="True" 
                    Alignment="Top" />

iPhone X-XS – 1


When people drag the sheet, it should be able to snap to points on the screen. The position of the points will have to be defined by the consumer. The number of positions should be limited, but can be increased in the future.

Each snap point should be a number between 0-1 (representing 0 - 100% of the screen height)

<dxui:SheetBehavior IsOpen="True"
                    SnapPoints="0.2, 0.8" />

iPhone X-XS – 1

Set position programmatically

The consumer of the sheet should be able to programatically set the position of the sheet. The provided method should accept a number between 0 - 1 (representing 0 - 100%)

Half size:

<dxui:SheetBehavior IsOpen="True"
                    Position="0.5" />

iPhone X-XS – 1

Full size:

<dxui:SheetBehavior IsOpen="True"
                    Position="1" />

iPhone X-XS – 1


- - -Detect if keyboard is open

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

darkwoodcommented, Jan 17, 2020

I think “Direction” is misleading word. I would suggest “Alignment” or “Align” <SheetView IsOpen="True" Align="Top" />

haavamoacommented, Jan 22, 2020

The back button should close the modal. The dxui PopupLayout navigates to the previous page.

Is this discussed with our designers? We have had this discussion before and we did end up with navigating back and not closing the modals when we Tapped the back button. We have created an seperste issue for it : #98

I had not discussed this. In the lab result modals that I tested, ux is bad when it navigate to the previous page.

Let’s discuss this internally and demonstrate it. I agree that the back button on Android feels natural that it closes the modal, but it feels unnatural that the back arrow in the navigation bar should close the modal.

Let’s keep the spec for Sheet clean and continue discussion in #98 if it is needed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is a Spec Sheet? (with pictures)
A specification sheet, commonly abbreviated to “spec sheet,” is a technical document that sets out the details of how, exactly, a certain ...
Read more >
Product Spec Sheets: What Are They and How to Use Them
A product spec sheet is a set of information and data about the summary of a product. That information and data may contain:...
Read more >
What Is A Spec Sheet (Explained: All You Need To Know)
A spec sheet, short for specification sheet, is a document where you find a detailed description and explanation of how a product works, ......
Read more >
Spec sheet Definition & Meaning
Spec sheet definition, a list describing the specifications of a product or property that is for sale See more.
Read more >
246 'Spec Sheet' Design Examples
Here you'll find 246 “Spec Sheet” full-page screenshots annotated with research-based UX insights, sourced from Baymard's UX benchmark of 214 e-commerce ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found