Chip

3 minutes
Share the link to this page
Copied
  Completed
A Material Design chip. Chips represent complex entities in small blocks, such as a contact.

Transcript

Hello, in this video I am going to show you the chip class. The chip class is great for providing some compact information. Now using elements such as text and widgets is obviously great just to provide a little bit of information next to some other widgets. There are other chips as well they can you can have input chips, which allows you to you know, basically do some input you can have choice chips, filtered chips, and action chip, I want to provide the link to the documentation for all of the chip stuff, you can check that out, but this video will cover the foundations. So we're gonna add a chart, I'm gonna put chip in here we need to have we need to specify a label for add label, text here, it's any sort of widget box, text and I'm gonna say my name and I think these appear And that's the chip styling.

But you know the built in chip style. Clicking it doesn't do anything that's not really the purpose of a chip. And we can also put an avatar, and the avatar is to circle. And in here, we'll put a child and the child, we could put no text. So let's put some text in here. Let's put, I'm gonna put the number three, you can put whatever you want.

But let's save that and see what we save that as you can see, this little thing, it's almost like, you know, maybe this contact has free number, the free notification. So you can probably start seeing the benefits of using cheap, it's got some nice built in styling, you can modify for the circle avatar, the radius, the background color, if you want to add a background image, all of that cool stuff and I'll recommend an extra task experimented with that instead. of adding a show like that you could add an icon and you could add an icon. icon start with an account. And there we go, we have an account in there. And obviously, you can modify the background colors to gain the sort of default performance watch that I am using right here.

This is actually from something they'll do previously. So get rid of that. And also in the chip, you can again mess around with background color padding, you can have some other you know, icon colors as well, you can have a delete icon, which essentially will have a separate icon and when clicked, it will trigger this event. That's where I'm wanting you to try and do as an extra test. If you'd be watching anything do videos on buttons or anything really, you're probably very familiar with it and you're, you know, get through it with ease. If not, feel free to drop me a message and as usual, I will help you.

Also, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.