Angular Material Tutorial - 14 - Grid List

Codevolution
11 Mar 201905:04

Summary

TLDRThis video tutorial introduces the Material Grid List, a two-dimensional list view in Angular Material. It explains the process of importing the necessary module, creating a grid with a specified number of columns, and adding grid tiles with titles. The video also covers advanced customization options such as row and column spanning, row height adjustments, and gutter size for spacing between tiles. By the end, viewers will understand how to create and style a dynamic grid layout effectively.

Takeaways

  • 📦 The material grid list is a two-dimensional list view organized in a grid-based layout.
  • 🔄 To use the grid list, first import the MatGridListModule from @angular/material and add it to the NgModule's imports array.
  • 📊 The grid list is created with the mat-grid-list component, which requires a 'cols' attribute to define the number of columns.
  • 🎨 Children of the grid list are mat-grid-tile components, which can be customized with titles and background colors.
  • 🔢 The number of rows in the grid list is determined by the number of tiles and the specified number of columns.
  • 🔽 Tiles can span multiple rows or columns using the 'rowSpan' and 'colSpan' attributes, but 'colSpan' must not exceed the 'cols' attribute value.
  • 📏 The height of each row in the grid list can be set explicitly using the 'rowHeight' attribute with pixel values, ratios, or 'fit' to match the container's height.
  • 🎨 The 'rowHeight' can be a ratio relative to the column width, such as 2:1, making the row height half of the column width.
  • 🏗️ When using 'rowHeight' set to 'fit', a specific height for the container must also be defined for the rows to fit within the container's height.
  • 🔄 The spacing between tiles in the grid list is controlled by the 'gutterSize' property, which can be adjusted in pixels.

Q & A

  • What is a material grid list in the context of the video?

    -A material grid list is a two-dimensional list view that arranges items into a grid-based layout.

  • How do you create a grid list in Angular Material?

    -To create a grid list in Angular Material, you first import the MatGridListModule from '@angular/material/grid-list' and add it to your NgModule's imports array.

  • What attribute of the mat-grid-list component specifies the number of columns?

    -The cols attribute of the mat-grid-list component specifies the number of columns in the grid.

  • How many columns did the video tutorial use for the grid list example?

    -The video tutorial used two columns for the grid list example.

  • How does the number of rows in a grid list get determined?

    -The number of rows in a grid list is determined by the number of columns specified and the number of tiles. It is calculated based on the division of total tiles by the number of columns.

  • What happens if you have an odd number of tiles in relation to the number of columns?

    -If you have an odd number of tiles, the grid list will create additional rows to accommodate all the tiles, resulting in an uneven number of tiles per row.

  • How can you specify that a tile should span multiple rows or columns?

    -You can use the rowSpan and colSpan attributes on a mat-grid-tile component to specify that it should span multiple rows or columns.

  • What is the default height of a row in a grid list?

    -By default, the height of a row in a grid list is equal to the width of a column.

  • What are the three ways to specify the row height in a grid list?

    -The three ways to specify the row height are: 1) a fixed pixel value, 2) a ratio relative to the column width, and 3) fitting the height based on the container's height.

  • How do you adjust the spacing between the tiles in a grid list?

    -You can adjust the spacing between the tiles using the gutterSize property on the mat-grid-list component.

  • What is the consequence of setting a colSpan value that exceeds the number of columns specified by the cols attribute?

    -If the colSpan value exceeds the number of columns specified by the cols attribute, it will result in an error.

  • What is the purpose of the rowHeight attribute in a grid list?

    -The rowHeight attribute allows you to override the default height of rows in the grid list, providing options to set a fixed height, a ratio relative to column width, or fit the height to the container.

Outlines

00:00

📊 Introduction to Material Grid List

This paragraph introduces the concept of a Material Grid List, a two-dimensional list view organized in a grid-based layout. It explains the initial step of importing the required module from Material UI and setting up the grid list with a specified number of columns. The example uses two columns and demonstrates how the grid automatically arranges the tiles into rows based on the number of columns and tiles. It also touches on how to customize the grid by adding background colors to the tiles and how to control the number of rows and columns each tile occupies using 'rowSpan' and 'colSpan' attributes. The paragraph concludes with a discussion on adjusting the height of each row using 'rowHeight' attribute and adding spacing between tiles with 'gutterSize'.

05:00

🎥 Upcoming Video Content

The paragraph briefly mentions that the next video will continue the series, implying that there is more content to cover following the current video on Material Grid Lists.

Mindmap

Keywords

💡Material Grid List

The Material Grid List is a UI component that organizes items into a two-dimensional, grid-based layout. It is a part of the Material Design system, which is known for its clean, modern aesthetic and emphasis on user experience. In the video, the Material Grid List is used to display tiles in a structured manner, with the ability to specify the number of columns and rows, as well as individual tile properties like row and column span.

💡Import Module

Importing a module refers to the process of bringing in external code or components into a current programming context. In the context of the video, importing the Material Grid List module is necessary to use the grid list component in an Angular application. This is a fundamental concept in modular programming, allowing developers to reuse code and build applications more efficiently.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. In the video, CSS is used to style the grid tiles by setting their background color to light blue, which enhances the visual appeal and clarity of the grid list layout.

💡Columns

In the context of a grid list, columns refer to the vertical divisions that determine how many items can be displayed side by side. The number of columns in a grid list directly affects the layout and organization of the content. In the video, the 'cols' attribute is set to two, meaning each row of the grid will contain two tiles.

💡Rows

Rows in a grid list are the horizontal divisions that contain the columns and tiles. The number of rows is determined by the number of columns and the total number of tiles. Each row can have a specific height, which can be adjusted to fit the content or the design requirements.

💡Grid Tile

A grid tile is an individual cell within a grid list that holds content. Each tile can be customized with various attributes, such as background color, size, and the number of rows or columns it spans. Tiles are the building blocks of a grid list, and their arrangement and styling contribute to the overall appearance and functionality of the layout.

💡Row Span

Row span is an attribute that determines how many rows a grid tile will occupy. By using the 'rowSpan' attribute, a tile can be made to extend across multiple rows, which is useful for displaying larger or more important content in a grid list. This attribute allows for greater flexibility in the layout and design of the grid.

💡Col Span

Col span, similar to row span, is an attribute that defines how many columns a grid tile will span. By specifying a 'colSpan' value greater than one, a tile can expand to occupy more than one column, altering the layout and providing space for more prominent or wider content.

💡Row Height

Row height refers to the vertical space allocated to each row in a grid list. By default, the height of a row is equal to the width of a column, but this can be overridden with the 'rowHeight' attribute. This customization allows for better control over the visual aspect of the grid, accommodating different content sizes and improving the overall user experience.

💡Container Height

Container height is the specified height of the parent element that holds the grid list. By setting the container height, developers can control how the rows of the grid list fit within the given space, either by fixing the height in pixels or by using the 'fit' value to adjust the row height dynamically based on the container's dimensions.

💡Gutter Size

Gutter size refers to the spacing between the grid tiles in a grid list. Adjusting the gutter size can enhance the visual appeal and readability of the grid by providing appropriate white space between the tiles. This attribute allows for fine-tuning the layout to achieve the desired aesthetic and usability balance.

Highlights

The introduction of the material grid list, a two-dimensional list view arranged in a grid-based layout.

Importing the necessary module from the material library and adding it to the material array map grid list module.

Creating a grid list with the 'mat-grid-list' component and specifying the number of columns using the 'cols' attribute.

Adding 'mat-grid-tile' components as children to the grid list and setting up the basic structure with titles.

Applying a background color to the grid tiles for better visibility and aesthetics.

Explanation of how the number of rows is determined by the number of columns and tiles, with a practical example of 4 tiles fitting into 2 rows.

Adjusting the layout by specifying the number of rows or columns a tile should occupy using 'rowSpan' and 'colSpan' attributes.

Demonstration of how 'rowSpan' affects the tile's row occupation, with a tile taking up two rows instead of one.

Illustration of 'colSpan' in action, showing a tile occupying two columns instead of one.

Ensuring that 'colSpan' does not exceed the 'cols' attribute value to avoid errors.

Customizing the height of each row in the grid, with options to set a fixed pixel value, a ratio relative to column width, or fitting to the container's height.

Setting a row height to a fixed pixel value, such as 100 pixels, to uniformly adjust all rows.

Adjusting row height based on a ratio relative to the column width, like 2:1, to create a dynamic height-to-width relationship.

Fitting the row height to the container's height and specifying a container height to evenly distribute rows within the container.

Adding spacing between the tiles using the 'gutterSize' property for improved visual separation.

Conclusion of the grid list discussion in Angular Material, summarizing the key points and inviting viewers to engage with future content.

Transcripts

00:00

all right let's take a look at the

00:02

material grid list in this video the

00:05

grid list is basically a two dimensional

00:08

list view that arranged ourselves into

00:10

grid-based layout now the first step is

00:14

to import the module so in material

00:16

Mario Diaz import mat grid list module

00:20

and added to the material array map grid

00:25

list module now we can create a grid

00:28

list the component is mat grid list and

00:33

this component requires a calls

00:37

attribute which specifies the number of

00:39

columns in the grid let's go with two

00:43

columns so calls is equal to two as

00:46

children to this component we specify

00:49

math grid tile components

00:53

title 1 and similarly let's create three

00:57

more also to be able to clearly see the

01:02

grid let's add a background color to the

01:05

tiles so in the CSS file Matt grid tile

01:11

background color light blue now if we

01:16

save this and take a look at the browser

01:18

you can see the grid with two columns

01:20

and two rows the question is how did it

01:25

create the two rows for a grid we always

01:29

specify the number of columns and the

01:31

number of rows is determined by how many

01:33

columns we want and the number of tiles

01:36

specified since we have 4 tiles and two

01:40

columns it can fit only two tiles in

01:43

each row

01:44

hence it creates an additional row to

01:47

fit the next two tiles if you were to

01:50

have five tiles there would be three

01:52

rows so the number of rows is determined

01:55

by some basic math of course you can

01:59

also specify how many rows or columns

02:02

each tile should take up that can be

02:06

specified using the row span and called

02:08

span attributes on tile one if I said

02:12

row span is equal to two and take a look

02:16

at the browser you can see that it takes

02:19

up two rows instead of one similarly if

02:23

I said call span is equal to two

02:28

you can see that it takes up two columns

02:31

instead of one when specifying call span

02:35

though you need to make sure that it

02:37

does not exceed the calls attribute if

02:40

it does it throws an error all right

02:43

next let's talk about the height of each

02:46

row in the grid by default the height of

02:50

a row is equal to the width of a column

02:53

however you can override this using the

02:57

row height attribute and you can specify

03:00

one of the three values the first one is

03:03

a straightforward value so row height is

03:06

equal to a hundred pixels take a look at

03:11

the browser and you can see that each

03:13

row will be a hundred pixels tall the

03:17

second option is to specify the row

03:19

height as a ratio with respect to the

03:23

column width

03:24

for example row height is equal to 2 is

03:29

to 1 this implies that the row height is

03:32

1/2 the column width if the column width

03:35

is 200 pixels then the row height is a

03:39

hundred pixels take a look at the

03:41

browser and you can clearly see from

03:43

each style that the height looks half

03:47

the width the third option is to fit the

03:51

height based on the container so row

03:54

height is equal to fit but this time we

03:58

also need to specify a height for the

04:01

container so style height 200 pixels now

04:06

if we take a look at the browser the

04:09

rows are fit into the container height

04:11

of 200 pixels so each row has a height

04:15

of 100 pixels if there were four rows

04:19

each row would be 50 pixels so as to fit

04:22

the total container height of 200 pixels

04:25

all right the last attribute I want to

04:28

discuss on a good list is the gutter

04:31

size that is spacing between the tiles

04:35

we can specify gutter size using the

04:38

gutter size property let's go with

04:41

gutter size

04:43

is equal to 10 pixels if you save the

04:48

file and take a look at the browser you

04:51

should now see additional spacing

04:52

between the different tiles all right

04:55

that is about the grid list in angular

04:58

material thank you guys for watching

05:00

feel free to subscribe I'll see you guys

05:02

in the next video

Rate This

5.0 / 5 (0 votes)

相关标签
AngularMaterialGridListLayoutDesignFrontendDevCSSStylingResponsiveUIWebDevelopmentRowSpanColumnSpan
您需要『中文』的总结吗?