Web components tutorial

Branch

With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

Build and start app

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):

Then, start the app:

You should see something similar to where the previous step left off.

First row

In our first row we'll need a Breadcrumb component. First, let's import the components we need.

We can now add our component to the first row, replace the content of the div with class page-landing__banner with:

Second row

In our second row we’ll need Tabs and Button components. Add the following import:

The tabs come next going inside page-landing__r2 and before <cds-grid>.

Each of the cds-tab components has a target attribute. This is used to identify the content visible when that tab is selected.

Wrap the subgrid element immediately after the closing </cds-tabs> with the following. This is where we will place our first tab panel and a containing element for all three panels.

Replace the content of the first column 7/16 with:

The second column content 8/16 is replaced with:

The tab-illo.png image is already located in the public folder.

After the closing </div> of id="panel-about", inside the new page-landing__tab-panels we add two further tab panels. This one

and

Third row

Here we replace all four columns entirely adding some offsets for medium and large column sizes after the first column.

Page and tab layout

For consistent vertical spacing across page add the following SCSS.

First row

Row one styling is fairly straight forward with some typography and positional adjustment so to align it with our other content.

Second row

The styling for the second row adds further layout and typography changes. It also positions the image and prevents it from causing horizontal overflow. In order to make use of the Carbon SCSS mixin breakpoint-down we also add the breakpoint import to our list of @use near the top of the file.

Third row

Ta-da! You should see a step 2 complete landing page! Now we can move on to the repo page.

Add a grid to contain our content

Now in our repositories page we will first add a grid wrapping REPOSITORIES PAGE

Add a minimal amount of styling to move our content away from the edge of the page in style.scss.

Adding a table

Before we can add the table we need to import the web component. As this is only used in our repositories.html page lets create a new script file repos.js and then add.

We need to include this file in repositories.html which we can do by adding the following next to the script tag that includes main.js.

Next we add the table header and column titles to replace the text REPOSITORIES PAGE

The table header should already be visible on the repositories page.

Now we can add the rows replacing Table body goes here with:

Using HTML templates

With the app running we can see that the repositories page now hosts a table. However, it is not realistic to populate a table with hard coded data way so we’ll refactor to build the table from data.

This involves the use of HTML Templates, take a look at W3 Schools if you need a quick refresh.

In index.html remove the contents of the <cds-table-body> tag and return it to Table body goes here.

Then before the end of the html tag and after the body closing tag add the following to define our table row template.

Next in repos.js add the following data that we will use to populate the table rows.

Next we create the function updateTable and make a call to it to populate add our rows.

Verify that the table rows are being generated by changing the data and running the app.

Congratulations! We've now created our static repo page!

Git commit and push

First, stage and commit all of your changes:

Then, push to your repository: