Dialog

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Genera un Dialog con el componente vs-dialog, este componente es muy personalizable ya que proporciona un slot para poner y hacer cualquier tipo de interfaz a la necesidad de el usuario

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button @click="active=!active">
        Open Dialog
      </vs-button>
      <vs-dialog v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="email" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="password" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="remember">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Type

Puedes fácilmente crear los distintos tipos de dialogs mas comunes como Alert, Confirm o Prompt usando los diferentes slots para la estructura de el dialog header, default, footer

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button @click="active=!active">
        Alert
      </vs-button>
      <vs-button flat @click="active2=!active2">
        Confirm
      </vs-button>
      <vs-button border @click="active3=!active3">
        Prompt
      </vs-button>
      <vs-dialog width="550px" not-center v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-content">
          <p>
            Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
          </p>
        </div>

        <template #footer>
          <div class="con-footer">
            <vs-button @click="active=false" transparent>
              Ok
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <vs-dialog width="550px" not-center v-model="active2">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-content">
          <p>
            Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
          </p>
        </div>

        <template #footer>
          <div class="con-footer">
            <vs-button @click="active2=false" transparent>
              Ok
            </vs-button>
            <vs-button @click="active2=false" dark transparent>
              Cancel
            </vs-button>
          </div>
        </template>
      </vs-dialog>
      <vs-dialog width="300px" not-center v-model="active3">
        <template #header>
          <h4 class="not-margin">
            Welcome what is your <b>Name</b>
          </h4>
        </template>


        <div class="con-content">
          <vs-input v-model="input1" placeholder="Name"></vs-input>
        </div>

        <template #footer>
          <div class="con-footer">
            <vs-button @click="active3=false" transparent>
              Ok
            </vs-button>
            <vs-button @click="active3=false" dark transparent>
              Cancel
            </vs-button>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

loading

Agrega una animación de cargando al dialog con la propiedad loading

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button success flat @click="active=!active">
        Open Dialog Loading
      </vs-button>
      <vs-dialog loading v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Not close

Puedes quitar el botón de close con la propiedad not-close

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <button @click="active=!active">
        active
      </button>
      <vs-dialog not-close v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Scroll

Hay casos en que necesitas un scroll porque hay mucha información dentro de el dialog para ello puedes usar la propiedad scroll

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button shadow @click="active=!active">
        Open Dialog
      </vs-button>
      <vs-dialog scroll overflow-hidden not-close auto-width v-model="active">
        <template #header>
          <h3>
            Introduction
          </h3>
        </template>
        <div class="con-content">
          <h4>
            Whats is Vuesax?
          </h4>
          <p>
            Vuesax (pronounced / vjusacksː /, as view sacks) is a framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style, vuesax is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user

            We are focused on streamlining the work of the programmer by giving components created in their entirety and with independent customization and very easy to implement, so creativity is in our hands but we do not neglect that each project is different both visually and in its ecosystem

            Vuesax does not have a design line such as other component frameworks based on Material Design, we believe that there are already emaciated frameworks that look visually and in UI / UX and we don't want to be one more of the bunch, apart from that we love to create and design new experiences and surprise you with new elements or details that we can only do by being visually free.
          </p>

          <h4>
            Why Vuesax?
          </h4>

          <p>
            Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
            <br>
            <br>
            - Vuesax, unlike many frameworks, is designed from scratch and we are not anchored to any design line, this is something great since your project is going to be unique and very different from the others

            <br>
            <br>
            - We are focused on the quick and easy creation of projects giving a beautiful visual line but without forgetting the personalization and independence of the developer

            <br>
            <br>
            - Vuesax uses native css variables for better customization and production changes such as changing to dark theme or changing the main color of the entire application with few javascript lines
            <br>
            <br>

            - Vuesax is a frame designed to have a great visual impact and that is always in trend with respect to design.
            <br>
            <br>

            - An open-source community to create, improve and correct any component or function.
            <br>
            <br>

            - Independent components to avoid importing unnecessary code.
            <br>
            <br>

            - Markdown documents for better sustainability.
            <br>
            <br>

            - and much more.
          </p>
        </div>
      </vs-dialog>
    </div>
  </template>

Overflow Hidden Body

Si necesitas remover el scroll de la pagina al abrir el dialog puedes hacerlo con la propiedad overflow-hidden

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <button @click="active=!active">
        active
      </button>
      <vs-dialog overflow-hidden v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Not Padding

Si necesitas remover el padding de el dialog para hacer una interfaz mas personalizada puedes hacerlo con la propiedad not-padding

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <button @click="active=!active">
        active
      </button>
      <vs-dialog not-close auto-width not-padding v-model="active">
        <div class="con-image">
          <img src="/foto1.png" alt="">
        </div>
      </vs-dialog>
    </div>
  </template>

Nested Dialogs

Puedes anidar cuantos vs-dialog necesites sin problema

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button @click="active=!active">
        Open Dialog 1
      </vs-button>
      <vs-dialog overflow-hidden v-model="active">
        <template #header>
          <h3>
            Nested dialogs
          </h3>
        </template>
        <div class="con-content">
          <vs-button @click="active2=!active2">
            Open Dialog 2
          </vs-button>
        </div>
      </vs-dialog>
      <vs-dialog v-model="active2">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

full Screen

Si necesitas que el dialog sea de el tamaño total de la ventana puedes hacerlo con la propiedad full-screen

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button gradient warn @click="active=!active">
        Open Dialog
      </vs-button>
      <vs-dialog overflow-hidden full-screen v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

blur

Puedes agregar un estilo de blur a todos los elementos detrás de el dialog con la propiedad blur, esta funcionalidad depende de la propiedad css backdrop-filter

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <button @click="active=!active">
        active
      </button>
      <vs-dialog blur v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Square

Cambia el estilo de el dialog eliminando el border-radius y haciendo que sea rectangular

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button dark flat square @click="active=!active">
        Open Dialog
      </vs-button>
      <vs-dialog square v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

Prevent Close

Con la propiedad prevent-close haces que el dialog no se cierre al hacer click afuera o al pulsar la tecla esc

Code copied

• Template
• Script
• Style
• All

  <template>
    <div class="center">
      <vs-button danger @click="active=!active">
        Open Dialog
      </vs-button>
      <vs-dialog prevent-close v-model="active">
        <template #header>
          <h4 class="not-margin">
            Welcome to <b>Vuesax</b>
          </h4>
        </template>


        <div class="con-form">
          <vs-input v-model="input1" placeholder="Email">
            <template #icon>
              @
            </template>
          </vs-input>
          <vs-input type="password" v-model="input2" placeholder="Password">
            <template #icon>
              <i class='bx bxs-lock'></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="checkbox1">Remember me</vs-checkbox>
            <a href="#">Forgot Password?</a>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block>
              Sign In
            </vs-button>

            <div class="new">
              New Here? <a href="#">Create New Account</a>
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </template>

API