Categories
Buefy

Buefy — Tags and Tooltips

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Tag List

We add a list of tags with the b-taglist component.

To add it, we write:

<template>
  <div id="app">
    <b-taglist>
      <b-tag type="is-info">First</b-tag>
      <b-tag type="is-info">Second</b-tag>
      <b-tag type="is-info">Third</b-tag>
    </b-taglist>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We just put all the b-tag components inside.

The attached prop will attach 2 tags together:

<template>
  <div id="app">
    <b-taglist attached>
      <b-tag type="is-dark">npm</b-tag>
      <b-tag type="is-info">6</b-tag>
    </b-taglist>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Also, we can combine fields to group attached tags:

<template>
  <div id="app">
    <b-field grouped group-multiline>
      <div class="control">
        <b-tag type="is-primary" attached closable>Technology</b-tag>
      </div>
      <div class="control">
        <b-tag type="is-primary" attached closable>Vuejs</b-tag>
      </div>
      <div class="control">
        <b-tag type="is-primary" attached closable>CSS</b-tag>
      </div>
    </b-field>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We put them all in the b-field component with the grouped and grouped-multiline props to group them together.

Sizes and Types

We can change the color with the type prop:

<template>
  <div id="app">
    <b-tag type="is-info">Technology</b-tag>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

And we can change the size with the size prop:

<template>
  <div id="app">
    <b-tag size="is-large">Technology</b-tag>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Toast

We can add toasts to display notifications.

For example, we can write:

<template>
  <div id="app">
    <button class="button is-medium" @click="toast">Launch toast</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    toast() {
      this.$buefy.toast.open("toast");
    }
  }
};
</script>

We called the this.$buefy.toast.open method to display a toast with the text in the argument.

Also, we can set the background color with the type property. message has the message.

We can also change the duration that it’s displayed and its position with the duration and position properties:

<template>
  <div id="app">
    <button class="button is-medium" @click="toast">Launch toast</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    toast() {
      this.$buefy.toast.open({
        duration: 5000,
        message: `Something's <b>not good</b>`,
        position: "is-bottom",
        type: "is-danger"
      });
    }
  }
};
</script>

is-bottom places it at the bottom of the page.

Tooltip

Buefy comes with its own tooltip.

For example, we can write:

<template>
  <div id="app">
    <b-tooltip label="Tooltip right" position="is-right">
      <button class="button is-dark">Right</button>
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

The b-tooltip component is wrapped around the trigger of the tooltip.

label has the tooltip text.

position has the position. It can be changed to other positions like is-left , is-bottom , etc.

We can add a delay with the delay prop:

<template>
  <div id="app">
    <b-tooltip label="Tooltip right" position="is-right" :delay="1000">
      <button class="button is-dark">Right</button>
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Multilined Tooltip

The multilined prop makes it multilined:

<template>
  <div id="app">
    <b-tooltip label="Tooltip right" position="is-right" multilined>
      <button class="button is-dark">Right</button>
    </b-tooltip>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Conclusion

We can add tags and tooltips to our Vue app with Buefy.

Categories
Buefy

Buefy — Customize Tabs and Tags

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Tab Size

We can change the tab size with the size prop.

To do that, we write:

<template>
  <div id="app">
    <b-tabs size="is-small" class="block">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

is-small makes the tabs extra small. We can also set it to is-medium or is-large .

Types

We can change the shape of the tab with the type prop. For example, we can write:

<template>
  <div id="app">
    <b-tabs type="is-toggle">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

is-toggle changes it to a toggle button.

is-boxed is the default type which looks like tabs.

is-toggle-rounded make the buttons rounded.

Expanded

The expanded prop makes the tabs expanded to fill the width of the screen:

<template>
  <div id="app">
    <b-tabs expanded>
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Custom Headers

We can populate the header slot to customize the header of the tab item.

For example, we can write:

<template>
  <div id="app">
    <b-tabs expanded>
      <b-tab-item>
        <template slot="header">
          <b>Pictures</b>
        </template>
      </b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Now the Pictures tab is bolded.

Vertical Tabs

We can make the tabs vertical with the vertical prop:

<template>
  <div id="app">
    <b-tabs expanded vertical>
      <b-tab-item label="Pictures">pictures</b-tab-item>
      <b-tab-item label="Music">music</b-tab-item>
      <b-tab-item label="Videos">videos</b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Tags

Tags are labels we can insert anywhere.

For example, we can write:

<template>
  <div id="app">
    <div class="field">
      <b-tag>Tag 1</b-tag>
    </div>
    <div class="field">
      <b-tag rounded>Tag 2</b-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can add tags with the b-tag component and the tag text in between the tags.

Closable Tags

We can make a tag closeable with the closeable tag:

<template>
  <div id="app">
    <div class="field">
      <b-tag
        v-if="isTagActive"
        type="is-primary"
        closable
        @close="isTagActive = false"
      >closable tag</b-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isTagActive: true
    };
  }
};
</script>

The close event should be emitted when we click the close button that’s displayed.

This way, we can use a reactive property to control when the tag is displayed.

Conclusion

We can customize our tabs and create tags with Buefy.

Categories
Buefy

Buefy — Tabs

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Tabs

We can add tabs with the b-tabs component from Buefy.

To add them, we can write:

<template>
  <div id="app">
    <b-tabs v-model="activeTab">
      <b-tab-item label="Pictures">Lorem ipsum dolor sit amet.</b-tab-item>
      <b-tab-item label="Music">Lorem ipsum</b-tab-item>
      <b-tab-item visible label="Books">What light is light, if Silvia be not seen?</b-tab-item>
      <b-tab-item label="Videos" disabled>Nunc nec velit nec libero vestibulum eleifend.</b-tab-item>
    </b-tabs>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeTab: undefined
    };
  }
};
</script>

We add the b-tabs component as the wrapper.

b-tab-item has the tab item.

label has the tab headings.

visible prop makes the tab item visible.

disabled prevents us from clicking the tab.

The v-model sets the index of the active tab as we click the tab.

We can also set the index to change the tab programmatically.

Dynamic Tabs

We can toggle tabs on and off dynamically:

<template>
  <section>
    <div class="block">
      <b-switch v-model="showBooks">Show books item</b-switch>
    </div>
    <b-tabs v-model="activeTab" :multiline="multiline">
      <template v-for="tab in tabs">
        <b-tab-item
          v-if="tab.displayed"
          :key="tab.id"
          :value="tab.id"
          :label="tab.label"
        >{{ tab.content }}</b-tab-item>
      </template>
    </b-tabs>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "pictures",
      showMusic: true,
      showBooks: false,
      multiline: true
    };
  },
  computed: {
    baseTabs() {
      return [
        {
          id: "pictures",
          label: "Pictures",
          content: "Pictures: Lorem ipsum",
          displayed: true
        },
        {
          id: "music",
          label: "Music",
          content: "Music: Lorem ipsum",
          displayed: this.showMusic
        },
        {
          id: "videos",
          label: "Videos",
          content: "Videos: Lorem ipsum",
          displayed: true
        }
      ];
    },
    tabs() {
      const tabs = [...this.baseTabs];
      if (this.showBooks) {
        tabs.splice(tabs.length - 2, 0, this.bookTab);
      }
      return tabs;
    },
    bookTab() {
      return {
        id: "books",
        label: "Books",
        content: "Books: Lorem ipsum.",
        displayed: true
      };
    }
  }
};
</script>

We have the tabs computed property to insert the Books tab when the showBooks reactive property is true .

Position

We can change the positions of the tabs with the position prop:

<template>
  <section>
    <b-tabs position="is-centered" class="block">
      <b-tab-item label="Pictures"></b-tab-item>
      <b-tab-item label="Music"></b-tab-item>
      <b-tab-item label="Videos"></b-tab-item>
    </b-tabs>
  </section>
</template>

<script>
export default {};
</script>

is-centered centers the tabs. is-right puts the tabs on the right.

Icons

We can add icons to the tab items with the icon and icon-pack props:

<template>
  <section>
    <b-tabs position="is-centered" class="block">
      <b-tab-item label="Pictures" icon="address-book" icon-pack="fa"></b-tab-item>
      <b-tab-item label="Music" icon="bandcamp" icon-pack="fa"></b-tab-item>
      <b-tab-item label="Videos" icon="drivers-license-o" icon-pack="fa"></b-tab-item>
    </b-tabs>
  </section>
</template>

<script>
export default {};
</script>

We have the icon-pack prop to set the icon pack name.

fa is for Font Awesome.

We add the CSS into the public/index.html file:

<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />

Conclusion

We can add tabs to our Vue app with Buefy.

Categories
Buefy

Buefy — Sticky Headers and Footers

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Sticky Headers and Columns

We can add the sticky-header prop to show a scrolling table with fixed headers.

For example, we can write:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header height="100px"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

to add the prop and set the height so that we can see the scrolling content with the sticky header.

We can add the sticky property to make a column sticky when we scroll:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true,
          sticky: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

Toggle Columns

We can show and hide columns with the visible prop:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" sticky-header></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true,
          visible: true
        },
        {
          field: "first_name",
          label: "First Name",
          visible: true
        },
        {
          field: "last_name",
          label: "Last Name",
          visible: false
        }
      ]
    };
  }
};
</script>

We set the visible property on the column definition object to show and hide columns.

Footer

We can populate the footer slot with the columns. For example, we can write:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns">
      <template slot="footer">
        <th>
          <div class="th-wrap is-numeric">ID</div>
        </th>
        <th>
          <div class="th-wrap">First Name</div>
        </th>
        <th>
          <div class="th-wrap">Last Name</div>
        </th>
      </template>
    </b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

We add the th elements into the footer to populate the cells.

Conclusion

We can add sticky headers and footers. Also, we can toggle the visibility of the columns.

Categories
Buefy

Buefy — Customize Table Rows and Columns

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Row Status

We can set the row-class prop by checking the row data with a function.

For example, we can write:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns" :row-class="(row, index) => row.id === 1 && 'is-info'"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true
        },
        {
          field: "first_name",
          label: "First Name"
        },
        {
          field: "last_name",
          label: "Last Name"
        }
      ]
    };
  }
};
</script>

<style>
tr.is-info {
  background: #167df0;
  color: #fff;
}
</style>

to add the is-info class to add the class to the given row.

Custom Headers

We can customize the header by populating the header slot. To do that, we write:

<template>
  <div id="app">
    <b-table :data="data">
      <b-table-column field="id" label="ID" width="40" numeric>
        <template v-slot:header="{ column }">
          <b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
        </template>
        <template v-slot="props">{{ props.row.id }}</template>
      </b-table-column>

      <b-table-column field="user.first_name" label="First Name">
        <template v-slot:header="{ column }">
          <b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
        </template>
        <template v-slot="props">{{ props.row.first_name }}</template>
      </b-table-column>

      <b-table-column field="user.last_name" label="Last Name">
        <template v-slot:header="{ column }">
          <b-tooltip :label="column.label" append-to-body dashed>{{ column.label }}</b-tooltip>
        </template>
        <template v-slot="props">{{ props.row.last_name }}</template>
      </b-table-column>
    </b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data
    };
  }
};
</script>

We add the b-table-column component to add the column.

The header slot lets us populate the content we want in the column headers.

column is an object that has the column data including the label property.

Subheadings

We can add subheadings with the subheadings property.

For example, we can write:

<template>
  <div id="app">
    <b-table :data="data" :columns="columns"></b-table>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    const data = [
      {
        id: 1,
        first_name: "james",
        last_name: "smith"
      },
      {
        id: 2,
        first_name: "mary",
        last_name: "jones"
      },
      {
        id: 3,
        first_name: "alex",
        last_name: "wong"
      }
    ];
    return {
      data,
      columns: [
        {
          field: "id",
          label: "ID",
          width: "40",
          numeric: true,
          subheading: "Total:"
        },
        {
          field: "first_name",
          label: "First Name",
          subheading: 100
        },
        {
          field: "last_name",
          label: "Last Name",
          subheading: 200
        }
      ]
    };
  }
};
</script>

We add the subheading property to the column definition objects.

Conclusion

We can add various things for table rows and columns with Buefy.