The TabView Widget - Tkinter CustomTkinter 12

what's going on guys John aler here from tk.com and in this video we're going to look at the tab view for custom kter and python all right guys like I said in this video we're going to look at tabs but before we get started if you like this video want to see more like be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my Kint to widget quick reference guide book thing is awesome over 150 pages with all the Kint to widget attributes grab your free copy today just head over to deer.com widget dbook and your email address and I'll send that right out to you and while you're thing about membership ink.com you get all my ker courses all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested okay like I said in this video we're going to look at tabs and custom ker so you can see I can tab back and forth from tab one and tab two tab two doesn't have anything on it tab one just has a button I'll show you how to do both of these types of things and you can have as many of these tabs as you want and it's a lot of fun so let's head over to recod I'm using the Sublime Text Editor and the get bash terminal as always and as always you can find a link to the code in the pin comment section below as well as a link to the playlist with all the other videos in this custom kter Series so check that out if you haven't so far so I've got our basic custom ker starter code that we always have I'm calling this ctk tabs. and let's just come down here and create a tab so to use tabs in custom ker we use something called a tab view widget and let's just come down here and create one so I'm going to call this my tab and this is going to be a customer. ctk tab view now notice the V is lowercase a lot of times when you have two words in custom kinter it's like the first one and the second one are capitalized but not this time tab is capitalized and view is lowercase so sort of keep that in mind and we want to put this thing in root and really that's all we need for now so now let's go mycore tab. pack and let's give this a pad y of like 10 push down screen a little bit so let's just go ahead and save this and see what we have right out of the box here not much to see so let's head over to our terminal I'm in my CT ker.com directory and let's run python th ctk tabsy and when we do we just have this sort of outlined looking box thing it's not very big it doesn't stretch the whole width of the app and there's no tabs in it whatsoever so we have to actually create the tabs so let's go ahead and do that and let's say create tab View and then come down here and let's say create tabs and to create tabs you just sort of name them so I'm going to call one of them tab one and I'm going to call another one tab two and like I said you could have as many of these as you want just keep naming other tabs and you don't have to call them tab one and tab two but it helps to keep track of which one is which by naming them with numbers so I'm just going to use tab one and tab two you could call it Bob one and Bob two or Bob and Tim or whatever any word works so that's how you do that so this is just going to be a myor tab. add and we need to give this a little title a little name that'll go on the actual tab itself so I'm just going to say tab one this is myor tab because that's what we named our tab view up here so whatever you name it you have to use that name here and then do add something to it so I could just copy this whole thing and add something here and say tab two now if we save this and head back over here and run the guy again we have these nice two tabs and we can tab back and forth and you can't really tell because we don't have anything in our tabs so that begs the question how do we put stuff in our tabs so let's say put stuff in tabs and to do that you just create whatever want to put in there like you would any other custom kinter widget so let's just put a button for now let's go miners score button and this is going to be a custom tkinter.ttk button now normally you would put this in rot but now we have these different tabs so I want to put it in tabore one if you wanted to put it in tab two you would put it in tab two right so here we can say uh the text equals click me and You' normally give this a command but we don't really need this button to do anything we're just using it for visual purposes so let's go mycore button. pack and let's give this a pad y of like 40 really push it down the screen so now if we save this head back over here and run this guy again we have in tab one this button and if we click to tab two the button disappears because there's nothing in tab to and that's all there is to it so again just think of each tab sort of like a frame and position things like you would in a frame and you'll have no problem whatsoever so all right that's cool now what else can we do with these tabs well not a whole lot you know they just kind of click back and forth but we can customize them in a bunch of different ways so let's do that now let's head back over here and where we Define our tab view that's where you can customize it and the first thing you're going to want to probably do is change the width and the height so let's change this width to say 600 and the height to say I don't know 250 or something like that save this guy head back over here run it again and now our tab stretches out nice and sort of wide to fit the size of the screen much better it goes all the way down I've I've added you know I've left some space for padding around there but very cool so there's that we can also change the corner radius so let's go Corner radius and I'm going to set that equal to one to start out with and we've done Corner radius with like all the widgets and custom kter so you're probably familiar with this if we put it at one it makes it very angular it's almost like completely square right we could likewise make it more round by saying I don't know 20 something like that come back over here run the sky again and you'll notice not only is the Box itself rounded the tabs at the top are rounded too very cool and the higher the number the more rounded it's going to be be careful if you go too much let's say I don't know maybe even just 50 if we run this this that still works at some point it's going to be so rounded that it's going to chop off what's inside of here so just sort of take note of that and uh you'll be fine there so okay that's cool I'm going to change this back to 10 what else can we do well we can change the color so let's go FG color and maybe we want to set this to White and like everything in custom kter you can use words like white or you can use you know hex codes whatever I think the hex code for this is FFF FFF maybe or or Z whatever whatever the hex code for white is or you could just use the word white or whatever color you want so head back over here run this guy again and now the entire framed tab thing is white uh maybe you want that that's kind of crazy I'm going to change this maybe to Silver something I don't know just playing now all right that's a little less harsh right so whatever color you like there you go what else can we do well the buttons have all kinds of different options so we can change the segmented uncore button uncore FG undor color and let's set that equal to like red or something super obnoxious so if we save this the segmented button FG color right that is not actually the buttons the background that holds the buttons the foreground color now to me that's that should be the background color not the foreground the foreground is the thing in the four whatever that's what custom kter calls the background color for most widgets really so that's red what else can we do well we can change the segmented underscore button underscore selected underscore color it's a mouthful let's change this to Green so this is the color as you might expect of the button that is currently selected right so tab one is selected we can see our button is in tab one if we click two it becomes green right so so okay so to change the hover color there's several different types of hovers involved here so we can go segmented uncore button uncore selected uncore hover unor color and let's set that equal to say pink save that run it and now when we hover over this one nothing happens because it's not the selected button but the tab one is already selected so when we hover over that it turns pink so a little weird it's not just a blanket hover for any thing it it really gets granular and you can pick exactly what hover you want to change there so that's cool likewise we can also change the segmented uncore button underscore unselected underscore hover uncore color and let's set that equal to I don't know say purple save this guy run it just like you would expect now this time it's the one that's not selected so you see it turns purple this one still turns pink because it's selected now if we if we click this one now this one becomes the unselected hover color of purple and this one becomes pink so okay we there we go we've also got just this gray button that's unselected right now we can change the color of that as well so that's going to be the segmented underscore button underscore unselected underscore color I think that sounds right yeah let's set that to Yellow so all right save that run it yikes so now the one that's not selected is yellow okay that's ugly what else can we do we can change the good old text color so let's just go textor color and set that equal to I don't know let's say red now one thing about this you can't change the font easily on this which is kind of a bummer but we can't just change the text color so now that's red you know if I wanted to make tab one the font size bigger you can't really do that which is is you know kind of a bummer like I said so what else we can as always change the state of this thing so we could set the state to disabled save this guy and run it now the whole thing is disabled if I click nothing really happens that's I don't know why you would want to do that but you might want to do that uh it's normal by default and you can always set it back to normal by just setting it to normal uh what else we can give this a command strange enough so let's give this a command of say clicker right now we don't have this function yet but we can create it so let's come up here and Define clicker and when we do that let's I don't know let's change the the text of our button so that was mycore button so we can come up here and go mycore button. configure and set the text to you clicked me or you clicked the tab button I don't know whatever go ahead and save this head back over here run this guy so this is kind of cool and kind of not so like if I click any of these things this function will get called so if I click this well we can't tell we have to go back to tab one now the button says you click the tab button right so anytime you click any of these buttons that function will get called it's not great for singular tabs if you just want a blanket function to run anytime you click any of these tabs I suppose inside the function you could say hey if tab one was clicked do this and if tab two was clicked do that I'll let you guys play around with that if you want so that's really pretty much all there is to it now you'll notice these buttons are right in the middle and you should be able to move these around like if I want these buttons to be over here on the corner or over on this corner you should be able to and the documentation says that you can by using the anchor command and then setting it to your regular positions so like north or south or Northwest or Northeast or you know Southwest or you know all the different positions so in is default North is the middle I guess for this so if we wanted to set it to West it should be like this but you notice if we run this boom we get an error it says the anchor is not supported so I think this is a bug in custom kter because I haven't been able to figure out how to use the anchor sometimes if you use it just like this that works in kter but nope not not enough not again sometimes if you put it in a tupple and then do something like that that works nope still no dice so I don't know maybe it's just a a bug maybe contact Tom shamansky the guy that created custom ker and let him know but for now it doesn't seem like you can use the anchor keyword or the anchor argument inside of the tab view so sort of keep that in mind and maybe on a Mac it works I don't know maybe on a Linux it works but on Windows computer does not seem to work so they just sort of have to be in the middle like that and that's kind of all there's to it so that's the tab view very useful very easy to do and pretty cool so that's all for this video if you liked be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and be sure to grab your totally free PDF copy of my kter widget quick reference guide book thing is awesome over 150 pages with all the kter widget attributes grab your free copy today just head over to tk.com widget dbook enter your email address and I'll send that right out to you and while you're there think about membership ink.com you get all my ker courses all my future courses for one low price use coupon code YouTube to get 30% off membership if you're interested my name is John aler from tk.com I'll see you in the next video

Channel: Tkinter․com

Views: 11,352

Keywords: customtkinter tabview widget, customtkinter tab, customtkinter tabview, tabs customtkinter, tabview customtkinter, tabs in custom tkinter, tkinter.com, John Elder Tkinter, John Elder Tkinter Tutorial, John Elder CustomTkinter, John Elder CustomTkinter tutorial, TabView Widget in CustomTkinter, Customizing TabView Widget CustomTkinter, john elder

Id: df30Qro3Iu4

Length: 13min 47sec (827 seconds)

Published: Tue Oct 31 2023