packages/docs/src/examples/v-dialog/usage.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-dialog/usage.vue

85 строк2 KB

John Leider

docs(VDialog): update page content and examples (#19272)

25 фев 2024, 23:39

25 фев 2024, 23:39c0f061b

<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div class="text-center">
      <v-dialog
        v-model="dialog"
        v-bind="props"
      >
        <template v-slot:activator="{ props: activatorProps }">
          <v-btn v-bind="activatorProps">
            Open Dialog
          </v-btn>
        </template>

        <template v-slot:default="{ isActive }">
          <v-card title="Dialog">
            <v-card-text>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>

              <v-btn
                text="Close Dialog"
                @click="isActive.value = false"
              ></v-btn>
            </v-card-actions>
          </v-card>
        </template>
      </v-dialog>
    </div>
  </ExamplesUsageExample>
</template>

<script setup>
  const name = 'v-dialog'
  const model = ref('default')
  const dialog = ref(false)
  const options = []

  const props = computed(() => {
    return {
      'max-width': '500',
    }
  })

  const slots = computed(() => {
    return `
  <template v-slot:activator="{ props: activatorProps }">
    <v-btn
      v-bind="activatorProps"
      color="surface-variant"
      text="Open Dialog"
      variant="flat"
    ></v-btn>
  </template>

  <template v-slot:default="{ isActive }">
    <v-card title="Dialog">
      <v-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>

        <v-btn
          text="Close Dialog"
          @click="isActive.value = false"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </template>
`
  })

  const code = computed(() => {
    return `<v-dialog${propsToString(props.value)}>${slots.value}</v-dialog>`
  })
</script>