theme

Description

Optional. Applies the specified theme for a component moved via the portal

Usage

theme?: "willow" | "willow-dark";

Example

<script setup>
  import { ref } from "vue";
  import { Modal, TextArea, Portal, Button } from "@svar-ui/vue-core";

  const custom = ref(false);
  const box = ref(null);
  function hideAll() {
    custom.value = false;
  }
</script>

<template>
  <Button @click="custom = !custom">Show Dialog</Button>

  <Portal v-if="custom" theme="willow-dark">
    <Modal>
      Some text here
      <TextArea placeholder="Some text" />
      <template #footer>
        <Button :onclick="hideAll">Yes</Button>
        <Button :onclick="hideAll">No</Button>
        <Button :onclick="hideAll">Maybe</Button>
      </template>
    </Modal>
  </Portal>
</template>

---

Related article: Setting the theme for a moved component