Taking a look at Code Components that Framer offer we discover layout options as well as custom properties to give designers access to options in your code component.
Get started with Framer NOW! https://www.framer.com?via=fullstackme
Special Promo 3 Months Free on Annual Plan: partner25proyearly
Transcript
Hello and welcome to another episode of webflow and code where I teach you the underlying code you’re writing in webflow
Today we’re going to be continuing on with the missing framer documentation series now this is probably going to be the last one I do as the previous one was met with lackluster reports basically on people watching it so this was more out of my own sanity to try and figure this stuff out because as mentioned in my previous episode the documentation that framer provides sucks.
In this episode what we’re going to be doing is taking a look into the layout options that Framer gives you with regards to your code component and also going to be looking at the properties that you’re able to control certain things from outside of the component inside of the component now if you haven’t if you don’t know much about code components I really suggest watching this first episode cuz I just sort of explained things and I I think it’s pretty much necessary watching at this point but saying that let’s dive into framer let’s play around with the final few JavaScript options and wrap up this short but sweet code series on framer code components.
Framer please sort your documentation out! Actually on that note I have noticed something else so there is code examples which I said there wasn’t any code examples you can just see here there’s just no code examples there is you’ve just got to make your window smaller and then they appear like framy you’re not doing a very good job at convincing us you guys experts at web development here if this stupid little uh I found out what the problem is it’s a CSS property to say that if an attribute is present and display none but I just don’t understand it anyway I digress
.So there’s actually some dummy code for our first layout options there’s actually some dummy code given to us already inside the um inside of the component let’s actually go back here and make this smaller and show you so that we’re referencing something that um so it’s not all completely alien so layer options basically is stating or Auto sizing is stating how your component behaves or what the sizing options are based on your component and you can set sort of a wrapping element how that wrapping element uh behaves basically and that will come clear as we work through it but there are four settings that we can have you can have Auto which is the default you can have fixed any or any prefer fixed and we’re going to run through these uh I’m not well-versed in clever ways to use these I can only make assumptions at this point but let’s just go through them so the first is um Auto so let’s what we’ve got here is basically the comment here these are decorators you leave them as comments you don’t touch these as they are um and auto is the default if you wanted to you could potentially just remove these comments here uh and it will read that but let’s just leave that as it is so Auto is as I say the default it’s just going to the the wrapping element that wraps your component is just going to be the size of your component but what we can do is actually change these to fixed which on the front end if we open up our page will give us this bounding box that we can change basically or change whatever size now this is interesting because again the only assumption I can make at this point is that if you set it as fixed that gives you a style property that is only only there when a a component is in this way so what I mean by that is and we have to do some clever stuff here because um framers a bit weird anyway is I’m going to take my card style and combine it with this is what this is doing props do style now let me just console log what props dostyle is and if we go back into our Pages here and we play that if I inspect so in these we’ve got style a style attribute that’s only present according to the documentation anyway according to the documentation is only apparent when we have fixed styling the what you can do with that then is and I don’t know why you wouldn’t you couldn’t just put width and height 100% but you can see it’s width and height 100% I’ve merged these two together so I’m taking the style that’s here the background color red and the color that’s white merging it with width and height and then I will just put that in there and you can see that that box now has just expanded the entire width and if we go to our page here and um see that you can see now that this component is going to change the shape and size based on the wrapping element so again I’m not a genius like I’m not necessarily sure of different ways to use that but just know that we can obviously do that with the um when things are fixed but we don’t have to do that of course we can just remove that in fact let’s just revert all of that stuff and you don’t even have to respond to it whatsoever but I guess there is a benefit to um making it fixed other than just moving other components around you can see this text element here is kind of it’s pushing it around and whatever so outside of affecting other elements you can then affect the the element on the inside so there’s that you can also make it fixed width so so we could have and these are pixels you could have a width of um 500 or and you can have a height of 100 if we save that can still change it but it’s the it’s the height that I gets inserted at so there that’s another option that we can have and in true frame documentation style it doesn’t tell you that you need frame of supported layout width as fixed to be able to set the intrinsic height what other stuff have we got we’ve got any so if we pop any in here and we drag a new component in here then we can we can change it to whatever we want whereas in uh fixed drag that in then we can’t do actually might be able to do auto yeah we can’t do automatic let uh yeah fit content so you’re just sort of changing the options that you have available from that wrapping wrapping element let’s get rid of some of these and then any prefer fixed is obviously let’s actually put that in so there we go we can actually change it to Auto if we need to so just lots of options basically on that one so the next thing we’re going to look at is actually the uh property controls here so let’s take that and again this is given the user the ability to manipulate some of the values or some of the settings of the component itself and then it’s the developers choice of what they want to give access to and what the interface looks like uh giving access to those things so let’s just run through them all and uh get something working so we add property controls here on our it’s just a function let’s just do the demo one here it’s just a function that runs where we pass in the component so that will be card component and we’re allowing them to insert some text so got back into our Pages here click on our thing and we’ve got a bit of text here that we can add whatever we want okay we’re not doing anything with that string text at the moment but let’s say for example then we want to allow for the title so and then this will be this will be passed through as a prop so if we go props do text or props title this is basically saying if text is uh exists then use that otherwise props title which we set the default one it’s very confusing but but just know that props do text is what what text is basically what matches up here that it gets passed through so once again if we do this and I think it’s saved you can see that that if I delete that enter Sam you know you can give give um access to some of this stuff look at you can hide them here so basically if this is basically saying saying if toggle is visible so you can create a basic interface here let’s just actually add this in and we can just walk through it then save that but this is basically saying if toggle is set to false then hide the text string so if we come back in here click on this see how that’s showing and hiding the text there which is really quite handy you obviously you you could use the value of toggle you could you you could I I don’t know I mean you know you could say if um props uh let’s go hidden equals props do um props do toggle you can see that’s hidden so you can use those values but you can also use these values to affect other values which is quite cool don’t know the wrong way around there but you get the point so that’s quite cool um and you can add descriptions as well so to again to help the designer to I don’t know give them hints of what you can actually put them in there’s a description field so uh quite simple that save that that there’s a label there then just to help help the designer with what your what your thing does so now it’s it’s a case of going through we’ve got arrays we’ve got booleans as well which I guess is the same as the toggle but nonetheless you can select a color so what if your if your component needs to be a different color or you want the designer to be able to change the color on something um it can be instances of other components which is quite that’s quite cool uh date as well e number which is like a selection it can for instance this one can only be a b or c uh and I guess there will be a drop down of sorts to be do a and ab and C so I think that’ll do it that’s pretty much a quick run through of all the options you can use in a in a code component I would like to do in the next one one an exploration of frame and motion and how to kind of get that working a little bit uh again if this picks up a bit of steam then I might consider it but for now I’m happy with just the kind of Basics getting a component up and running in this short series and and helping you just understand basically from the from the lackluster documentation that frameware is offered so again like subscribe all the rest of it and until next time happy no coding