Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vuetify

Vuetify — Flex Layouts

white long coat small dog

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Unique Layouts

We can add layouts with various rows and columns.

The number of columns a column take can be set according to breakpoints:

<template>  
  <v-container class="grey lighten-5">  
    <v-row>  
      <v-col cols="12" md="8">  
        <v-card class="pa-2" outlined tile>.col-12 .col-md-8</v-card>  
      </v-col>  
      <v-col cols="6" md="4">  
        <v-card class="pa-2" outlined tile>.col-6 .col-md-4</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have a row with columns that have different sizes.

The first column takes 12 columns by default and takes 8 if it’s md and up.

The 2nd takes 6 columns by default and takes 4 if it’s md and up.

The columns will be rearranged so that they always fit on the screen.

Vertical Alignment

We can change the vertical alignment of flex items and their parents with the align and align-self props.

For example, we can write:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row align="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the v-col components with the align prop to put the columns on the left.

Other values for align include center to put items in the center and end to put the columns at the end.

Horizontal Alignment

The horizontal alignment of flex items with the justify property:

<template>  
  <div>  
    <v-container class="grey lighten-5 mb-6">  
      <v-row justify="start" no-gutters>  
        <v-col v-for="n in 3" :key="n" cols="2">  
          <v-card class="pa-2" outlined tile>column</v-card>  
        </v-col>  
      </v-row>  
    </v-container>  
  </div>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

No Gutters

The no-gutters prop remove the gutters between the columns:

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col cols="12" sm="5" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
      <v-col cols="6" md="6">  
        <v-card class="pa-2" outlined tile>col</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Column Wrapping

If there are more than 12 columns in a row, then the extra columns will wrap onto a new line.

Order Classes

We can change the order of the grid items with the order prop on the v-col :

<template>  
  <v-container class="grey lighten-5">  
    <v-row no-gutters>  
      <v-col>  
        <v-card class="pa-2" outlined tile>First, but unordered</v-card>  
      </v-col>  
      <v-col order="3">  
        <v-card class="pa-2" outlined tile>Second, but last</v-card>  
      </v-col>  
      <v-col order="1">  
        <v-card class="pa-2" outlined tile>Third, but first</v-card>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Conclusion

We can create layout with various flexbox classes and props.

Categories
Vuetify

Vuetify — Customize Slider

dog holding mushroom

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Disabled Slider

We can disable the slider with the disabled prop:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider disabled label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Readonly Slider

A slider can also be disabled with the readonly prop. The difference between disabled and readonly is that a read-only slider looks a regular one.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider readonly label="Disabled" value="30"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

Icons

Icons can be added to a slider.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="sound" prepend-icon="mdi-plus"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    sound: 0,  
  }),  
};  
</script>

to add an icon to the left of the slider with the prepend-icon prop.

We can do the same with the append-icon prop to add the icon to the right.

Also, we can listen to clicks on icons with the @click:append and @click:prepend directives.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider  
          v-model="zoom"  
          prepend-icon="mdi-minus"  
          append-icon="mdi-plus"  
          @click:append="zoomIn"  
          @click:prepend="zoomOut"  
        ></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    zoom: 100,  
  }),  
  methods: {  
    zoomOut() {  
      this.zoom = this.zoom - 10 || 0;  
    },  
    zoomIn() {  
      this.zoom = this.zoom + 10 || 100;  
    },  
  },  
};  
</script>

We set the zoomIn and zoomOut methods as the values of the directives to change the value of this.zoom and the slider value.

Vertical Sliders

The vertical prop makes a slider display vertically.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" vertical label="Regular"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Thumb

We can display a label for the slider dot.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always"></v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

The thumb-label prop displays the slider.

We can add a custom label by populating the thumb-label slot:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-slider v-model="value" thumb-label="always">  
          <template v-slot:thumb-label="{ value }">{{ value }}</template>  
        </v-slider>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    value: 100,  
  }),  
};  
</script>

Conclusion

We can add sliders to let users set the value to what we want.

Categories
Vuetify

Vuetify — Dividers

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Dividers

We can use dividers to divide content.

For instance, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-card>
          <v-list two-line>
            <template v-for="(item, index) in items.slice(0, 6)">
              <v-divider v-if="item.divider" :key="index" :inset="item.inset"></v-divider>
              <v-list-item v-else :key="index">
                <v-list-item-avatar>
                  <img :src="item.avatar" />
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title v-html="item.title"></v-list-item-title>
                  <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
        title: "title",
        subtitle: "subtitle",
      },
      { divider: true, inset: true },
      {
        avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
        title: "title",
        subtitle: "subtitle",
      },
    ],
  }),
};
</script>

We add the v-divider component to divide the rows with the divider.

It’s flush with the v-list-item .

Vertical Dividers

We can add vertical dividers with the vertical prop.

For example, we can write:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-divider with the vertical prop to add the vertical divider.

It’s also flush with the toolbar.

Vertical Inset Dividers

We can use the inset prop to add margins with the divider:

<template>
  <v-container>
    <v-row>
      <v-col col="12">
        <v-toolbar color="purple" dark>
          <v-toolbar-title>Title</v-toolbar-title>
          <v-divider class="mx-4" vertical inset></v-divider>
          <span class="subheading">My Home</span>
          <v-spacer></v-spacer>
          <v-toolbar-items class="hidden-sm-and-down">
            <v-btn text>News</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Blog</v-btn>
            <v-divider vertical inset></v-divider>
            <v-btn text>Music</v-btn>
            <v-divider vertical inset></v-divider>
          </v-toolbar-items>
          <v-app-bar-nav-icon></v-app-bar-nav-icon>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Conclusion

We can add dividers for menu items and rows.

Categories
TypeScript

TypeScript any and unknown Types

girl crawling on white floor while smiling

In TypeScript, there’re 2 data types that can hold anything.

They’re the any and unknown types.

Since they have different names, they’re different.

In this article, we’ll look at the difference between them and what can we do with them.

The any Type

The any type variable lets us assign anything to it.

If it’s used as a parameter, then we can pass in anything.

For example, we can write:

function func(value: any) {
  const foo = 5 * value;
  const bar = value[1];
}

The TypeScript compiler doesn’t restrict what we can do with a variable or parameter that has an any type.

If we have a variable, we can assign anything to it.

For instance, we can write:

let bar: any;

bar = null;
bar = true;
bar = {};

We can assign anything to a variable with the any type.

Also, we can assign an any variable to variables, with any type:

function func(baz: any) {
  const a: null = baz;
  const b: boolean = baz;
  const c: object = baz;
}

A real example would be JSON.parse . Its signature in TypeScript’s type definition is:

JSON.parse(text: string): any;

The unknown type doesn’t exist yet in TypeScript with it’s added to the type definition, so the any type is used as the return type.

The unknown type is a better alternative to any for typing things that don’t have a known structure.

The unknown Type

The unknown type is a safer version of any .

This is because any lets us do anything, but unknown has more restrictions.

Before we can do anything with a value with an unknown type, we’ve to make the type known first by using type assertions, equality, type guards, or assertion functions.

To add type assertions, we can use the as keyword.

For example, we can write:

function func(value: unknown) {
  return (value as number).toFixed(2);
}

Since we casted the value parameter to a number with as , we can call the toFixed method with it to round the number.

The TypeScript compiler can also determine the data type with equality comparison.

For example, we can write:

function func(value: unknown) {
  if (value === 123)
    const rounded =  value.toFixed(2);
  }
}

We check if value is 123.

This way, if it is, then the TypeScript compiler knows it’s a number.

So we can call toFixed on it.

We can do the same with type guards.

To use them, we use the typeof operator to check the type.

So we can write:

function func(value: unknown) {
  if (typeof value === 'number')
    const rounded =  value.toFixed(2);
  }
}

and the compiler will also know that value is a number.

We can also use assertion functions to do the same thing.

For example, we can write:

function func(value: unknown) {
  assertNum(value);
  const rounded = value.toFixed(2);
}

function assertNum(arg: unknown): asserts arg is number {
  if (typeof arg !== 'number') {
    throw new TypeError('not a number');
  }
}

We create a assertNum function to check if arg is a number.

If it’s not, then an exception is thrown.

We then call it in our func function before doing any operation.

This way, the compiler also knows value is a number.

Conclusion

The any type is too flexible for most cases.

unknown type lets us store anything, but we’ve to determine the type of it before doing anything.

Categories
TypeScript

Using TypeScript — Literal Types, Object Types, and Type Aliases

selective focus photography of sleeping baby

TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.

However, not everyone knows how it actually works.

In this article, we’ll look at how to define and use literal value types, object types, and type aliases.

Literal Value Types

A literal value type is a data type with a specific set of values and only the ones specified are allowed.

This lets us treat a set of values as a distinct type.

For instance, we can write:

let val: 1 | 2 = 1;

Then we have val which can take on the value 1 or 2.

If we assigned something that we haven’t explicitly allow, then we get:

let val: 1 | 2 = 100;

Then we get the error ‘Type ‘100’ is not assignable to type ‘1 | 2’.ts(2322)‘

Literal Value Types in Functions

We can use literal types in functions.

This lets us restrict a parameter to allow us to set to only several kinds of values.

For instance, we can write:

const totalPrice = (quantity: 1 | 2, price: number) => {
  return quantity * price;
};

Then we can only pass in 1 or 2 for quantity .

Mixing Value Types in a Literal Value Type

We can narrow value types to a literal type.

For instance, we can write:

const randomNum = () => {
  return Math.floor(Math.random() * 3) as 1 | 2 | 3;
};

Then we narrow the type of the returned value of randomNum from number to 1 | 2 | 3 .

randomNum can only return 1, 2, or 3.

Overloads with Literal Value Types

We can use literal types in function overloads.

For instance, we can write:

function foo(val: 1): "foo";
function foo(val: 2): "bar" | "baz";
function foo(val: number): string {
  switch (val) {
    case 1: {
      return "foo";
    }
    case 2: {
      return "bar";
    }
    default: {
      return "baz";
    }
  }
}

Then we can take on various values because of the overloads.

It can return the value based on the value of val that we pass into foo .

Type Aliases

To avoid repeatedly defining the same type, TypeScript has a type alias feature.

We can assign type combinations to an alias so we can use them throughout our code.

For instance, we can write:

type combo = 1 | 2 | 3;

The type operator lets us define a type alias with the name we want.

In our example, our type alias name is combo .

Objects

JavaScript objects are collections of properties that can be created using the literal syntax, or returned by constructors or classes.

Objects can be altered once they’re created.

We can add or remove properties and receive values of different types.

To provide type features for objects, TypeScript lets us specify the structure of an object.

Object Shape Type Annotations

One way to define the shape of an object is to use the object shape type annotation.

We define the property and the type of each property in the object.

For instance, we can write:

const obj: { foo: number } = { foo: 1 };

The code above defined the object obj which can have the property foo which is a number.

Then we assigned something that has such property and value from the right side.

How Shape Types Fit

An object must define all the properties in the shape with the given data type to match the object shape type annotation.

We’ll get an error if the property structure or the data type doesn’t match.

Optional Properties

We can make a property of an object type optional with a ? .

For instance, we can write:

const obj: { foo: number; bar?: sting } = { foo: 1 };

Then bar is optional and we don’t have to add a value to it.

Conclusion

We can define literal types to restrict the value of a parameter or variable to a few values.

Also, we can define object types with properties and types of them.

Finally, we can define type aliases so that we don’t have to repeat the same data type annotation everywhere.