TomSchimansky / CustomTkinter

A modern and customizable python UI-library based on Tkinter
MIT License
10.77k stars 1.03k forks source link

Creating a sidebar #2447

Open FaheemM1020 opened 1 month ago

FaheemM1020 commented 1 month ago

Tyring to create a side bar using customtkinter when it is expanded i want it to overlap the label Sample code:

import customtkinter as CTK

class Dashboard(CTK.CTk):
    def __init__(self):
        super().__init__()

        self.grid_columnconfigure(0,weight=0)
        self.grid_rowconfigure((0,1),weight=1)

        self.frame = CTK.CTkFrame(self)
        self.frame.pack(side='left',fill='y')

        self.button = CTK.CTkButton(self.frame,text='≡',width=70,font=("roboto",40),hover_color='#242424',fg_color='#2B2B2B',corner_radius=0,command=self.expand_side_bar)
        self.button.grid()

        self.text = CTK.CTkLabel(self,text='Hello ,World!',font=("roboto",40))
        self.text.place(x=100,y=50)

    def expand_side_bar(self):
        size = self.button.cget("width")

        if size == 70:
            self.button.configure(width=150)
        else:self.button.configure(width=70)

app = Dashboard()
app.mainloop()
dipeshSam commented 1 month ago

Use place geometry manager Here is your sample solution:


import customtkinter as CTK
from tkinter import Tk

class Dashboard(Tk):
    def __init__(self):
        super().__init__()

        self.grid_columnconfigure(0,weight=0)
        self.grid_rowconfigure((0,1),weight=1)

        self.frame = CTK.CTkFrame(self, width=100, fg_color="gray25")
        self.frame.place(x=0, y=0, relheight=1)
        self.frame.grid_propagate(False)

        self.button = CTK.CTkButton(self.frame,text='≡',width=70,font=("roboto",40),hover_color='#242424',fg_color='#2B2B2B',corner_radius=0,command=self.expand_side_bar)
        self.button.place(relx=1, rely=0, anchor="ne")

        self.text = CTK.CTkLabel(self,text='Hello ,World!',font=("roboto",40))
        self.text.place(x=100,y=50)
        self.text.lower()

    def expand_side_bar(self):
       if self.frame["width"] != 500:
        self.frame.configure(width=500)
        return

       self.frame.configure(width=70) 

app = Dashboard()
app.mainloop()

I just modified your code so fast. I recommend you to put the trigger button outside of the slider frame. And, You can simply replace Tk with CTk.