widgetti / widgetti/ipyvuetify

Add v.App to examples

Open
#56 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

add to examples
Dominant language
Python
Stars
355
Forks
61
PR merge metrics
No merged PRs in 30d

Description

Please add an example of an App with a navigation drawer and AppBar to the example.ipynb.

I have tried to put something together. See below. But its not quite right yet. I can't work out how to get the content of the app to move when the navigation drawer is activated. Do you know how to fix this?

AppExample

app = v.App(v_model=None)

navDrawer = v.NavigationDrawer(v_model=True, children=[
     v.Select(label='select1', items=[1,2,], prepend_icon = 'fa-truck'), 
    v.TextField(label='text', prepend_icon = 'mdi-heart'), 
    v.Select(label='select3', prepend_icon = 'mdi-magnify')
])
navDrawer.mini_variant = True
navDrawer.expand_on_hover = True

navDrawer.width =300
navDrawer.mini_variant_width = 30

toolBarButton = v.Btn(
                  icon = True, 
                  children=[
                      v.Icon(children=['mdi-dots-vertical'])
                      ]
               )

def on_click(widget, event, data):
   navDrawer.v_model = not navDrawer.v_model

toolBarButton.on_event('click', on_click)


randomButton = v.Btn(
                  icon = False, 
                  children=[
                      v.Icon(children=['mdi-heart']),
                      'Random Button...',
                      ]
               )

appBar = v.AppBar(
      color="deep-purple accent-4",
      dense=True,
      dark = True   ,  
       children = [
           toolBarButton, 
           v.ToolbarTitle(children=['App example']),
]
)

content = v.Container(
#         class_="fill-height",
#         fluid=False,
        children = [
         v.Row(
              align="center",
          justify="center",
#     class_="fill-height",
#         fluid=False,
            children = [randomButton]
                     )
        ])

app.children = [appBar,navDrawer,content]
app

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the requested example.ipynb and the supplied App, NavigationDrawer, AppBar, and content setup. Run the notebook and inspect how the drawer activation affects the content; done means the notebook contains a working navigation-drawer example whose content moves correctly when the drawer is activated.

Written by the indexing model from the issue text.

Assessment

Tech stack
jupyter-notebook, python
Domain
documentation, frontend
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.