scinote-web/app/views/design_elements/_modals.html.erb

34 lines
912 B
Text

<div>
<h1>Modals</h1>
<div id="modals" class="flex items-center gap-4 flex-wrap mb-6">
<div ref="wizardModal">
<button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
<wizard-modal
v-if="showWizard"
@close="showWizard = false"
@alert="fireAlert"
:params="wizardParams"
:config="wizardConfig"
/>
</div>
<div ref="infoModalWrapper">
<button @click="showInfo = true" class="btn btn-primary">Show Info Modal</button>
<info-modal
v-if="showInfo"
@close="showInfo = false"
ref="modal"
:start-hidden="false"
:info-params="infoParams"
title="Some title"
help-text="Help">
<div>I am a component that gets consumed by the slot</div>
</info-modal>
</div>
</div>
</div>
<%= javascript_include_tag 'vue_design_system_modals' %>