CoreUI Vue + Bootstrap Admin Template - Part 2

Overview

In part 1 of this article we learned how to install CoreUI Vue Bootstrap Admin template and we added some basic elements into it. In this article we’ll learn how to add pagination, create responsive form, add toasts and alert messages.

Topics Covered

1. Pagination
2. Responsive Form
3. Toast
4. Alert

1. Pagination

In the previous article we added 3 cards to the template but what if we want to display n number of cards but not all at the same time. For that we’ll use pagination.

Let’s start by modifying our custom page code from previous article. First and foremost let’s define our data to be displayed in the card under scripts tag.

Now for using pagination we need to define the default value for current page and also need to set total number of pages. For this example we will be showing one card per page.

Now we don’t need redundant code for creating multiple cards, so let’s use loop for that and delete the redundant card code. Next we will add CPagination tag to display the pagination elements and modify our card loop accordingly to include currentPage number. This is how our code should look now.

You can find more about the props, slots and events for pagination here.

2. Responsive Form

Now we will add a form with basic elements such as textbox, textarea, radio buttons, checkboxes along with submit button within our template. To make the form more presentable we’re going to use the card class.

For input type=”text” we use <CInput/>. We’ll add type=”password” attribute to convert the input box to password field. To display labels we can use attribute label=”password”. For describing what the input field is use attribute description=”Some text here”, this will appear below the input field for which this attribute is added to.

For textarea use element <CTextarea/>. To limit the numbers of rows, use row=”3” attribute.

For dropdown use element <CSelect/>. To add options within the dropdown use :options=”[‘option 1’, ‘option 2’]” attribute. You can also define options in the script and pass the variable here.

For radio button we use <CInputRadioGroup/>. Add options the same way as above. If you’d like to display all the options inline use attribute inline=1.

For checkbox we use <CInputRadioGroup>. Add options the same way as before.

<CButton/> is used for adding a button.

Try adding the below given form code in the custom page and play with different attributes, elements available here. If you resize your window you’ll notice that all the elements will stack and automatically resize.

<div class="card">
      <div class="card-body">
        <div>
          <CRow>
            <CCol sm="12">
              <CInput
                label="Username"
                placeholder="Enter your username"
              />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="12">
              <CInput
                label="Password"
                description="Please enter a complex password"
                placeholder="Enter your password"
                type="password"
                autocomplete="current-password"
              />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="12">
              <CTextarea
                label="About me"
                placeholder="Content..."
                rows="9"
              />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="4">
              <CSelect
                label="Month"
                :options="['January','February','March','April','May','June','July','August','September','October','November','December']"
              />
            </CCol>
            <CCol sm="4">
            Gender
              <CInputRadioGroup
                class="col-sm-9"
                inline = 1
                :options="['Male','Female','Other']"
              />
            </CCol>
            <CCol sm="4">
              Card<br>
                <CInputCheckbox
                  v-for="(option, optionIndex) in checkbox"
                    :label="option"
                    :value="option"
                    :name="option"
                    inline = 1
                />
            </CCol>
          </CRow>
          <CRow>
            <CCol sm="2">
            <div class="form-actions">
                <CButton type="submit" color="primary">Save changes</CButton>
            </div>
            </CCol>
          </CRow>
        </div>
      </div>
    </div>

3. Toast

It is very simple to add a toast to the template. Add this snippet in your custom page file and you should see a toast in the browser.

<CToast
      :show="true"
      position="static"
      title="Toast"
    >
      Hello! This is a <b>toast</b>.
    </CToast>

This is how you add multiple toast which will disappear after 1 second.

<CToaster :autohide="1000">
        <CToast
          :show="true"
          header="Toast"
        >
          Hello! This is a <b>toast 1</b>.
        </CToast>
        <CToast
          :show="true"
          header="Toast"
        >
          Hello! This is a <b>toast 2</b>.
        </CToast>
    </CToaster>

Learn more about toast here.

4. Alert

To add alert messages use the snippet below.

<CAlert color="primary">This is an alert.</CAlert>

Use color attribute for background color, default value is null. You can use different attributes such closeButton to display close button on the alert message, fade to fade the alert etc. Learn more about it here.

And that’s it for this article, for more information on CoreUI visit coreui.io.