← Back

Gmail Demo

The demo has a list of emails. You can swipe left or right on an email to archive it or toggle its read/unread state. These overscroll regions do not have a commandbutton show them. This is fine because the actions can also be reached when going into a detail view of an email.

The Code

The archive and toggle read buttons are different elements. They are positioned in the right and left overscroll regions of the main content. They are positioned using the underlay modifier.

Creating the overscroll areas

.email {
    overscroll-areas: none --right[underlay] none --left[underlay];
    overscroll-sizes: none 100px none 100px;
}

Positioning Content

.overscroll-area-content[data-action="archive"] {
    overscroll-area: --right;
}

.overscroll-area-content[data-action="markasread"] {
    overscroll-area: --left;
}