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

It generates a Dialog with the vs-dialog component, this component is very customizable since it provides a slot to put and make any type of interface to the user's need

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

You can easily create the most common types of dialogs such as Alert, Confirm or Prompt using the different slots for the structure of the header,default, footer dialog

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

Add a loading animation to the dialog with the loading property

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

You can remove the close button with the not-close property

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

There are cases where you need a scroll because there is a lot of information within the dialog for this you can use the scroll property

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

If you need to remove the page scroll when opening the dialog you can do it with the overflow-hidden property

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

If you need to remove the padding from the dialog to make a more personalized interface you can do it with the not-padding property

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

You can nest as many vs-dialog as you need without problem

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

If you need the dialog to be the total window size you can do it with the full-screen property

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

You can add a blur style to all the elements behind the dialog with the blur property, this functionality depends on the css property 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

Change the dialog style by removing the border radius and making it 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

With the prevent-close property you do not close the dialog by clicking outside or pressing the esc key

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