PopupDraft

Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
Open in new window
View RTL
<template>
  <div class="n-stack n-stack-horizontal">
    <BaseButton aria-controls="popout" aria-haspopup="true"> Text </BaseButton>
    <BasePopout id="popout">Just a popout with plain content</BasePopout>

    <BaseButton aria-controls="read-only" aria-haspopup="true">
      Read only
    </BaseButton>
    <BasePopout id="read-only">
      <ReadOnlyField label="Label" value="Input data" />
    </BasePopout>

    <BaseButton aria-controls="field-placeholder" aria-haspopup="true">
      Field placeholder
    </BaseButton>
    <BasePopout id="field-placeholder">
      <FieldPlaceholder
        label="Label"
        button-text="Add label"
        inline-edit
        @show-content="console.log('show content')"
      />
    </BasePopout>

    <BaseButton aria-controls="edit-info" aria-haspopup="true">
      Edit info
    </BaseButton>
    <BasePopout id="edit-info">
      <EditableStack label="Edit" @edit="console.log('Edit button clicked')">
        <ReadOnlyField label="Label" value="Input data" />
      </EditableStack>
    </BasePopout>
  </div>
</template>

Integration

This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).


Troubleshooting

If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page