[Vue] How to make Modal Sheet Swipe Step partially opened by default?

Questions
1

I have a modal sheet component with the following structure:

<f7-sheet
        class="myClass"
        style="height: auto"
        swipe-to-step
        :backdrop="false"
    >
      <div class="sheet-modal-inner">
          <div class="sheet-modal-swipe-step">
             ...
          </div>
      </div>

      <template #static>
          <MyComponent></MyComponent>
      </template>
</f7-sheet>

Currently, I have to click a button to display the partial Modal Sheet, which I can then swipe up to reveal the full content:

<f7-button sheet-open=".myClass">Swipe To Step</f7-button>

My goal is to have the partial Modal Sheet displayed by default, hence remove the need to click a button. If I add “opened” to , the whole sheet is open at once, not just the swipe-step part.

Does anyone have an idea how to achieve this?
Thank you.

3

Do it with opened prop. But set it to true, for example, when parent page component mounted or within the parent page’s page:init event

1 Like
4

Thank you @nolimits4web very much! I modified the code like this:

<f7-sheet 
  v-model:opened="isOpened"
  ...
>
</f7-sheet>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    let opened = ref(null);

    onMounted( () => {
      opened.value = true;
    });

    return {
      isOpened: opened
    }
  }
}
</script>

and now it works as intended. Could you please briefly explain the rationale behind this solution?

5

When it creates with opened flag it suggests (like any other modals) to be created in fully opened state and without animation. When you switch it later, then it does proper opening routing

1 Like