def layout(self): el_layout = [dbc.Row(x.layout) for x in self.elements] layout = html.Div( [ dbc.Button("Controls", id="fade-button", className="mb-3"), dbc.Fade( el_layout, id="fade", is_in=False, style={ 'transition': 'opacity 100ms ease', 'background': 'white', # 'padding': '12px 12px 12px 12px', # 'border': '1px solid gray', # 'height': '80vh', 'width': '25vw', 'overflow': 'visible' }, className='top shadow-sm p-3 mb-5 rounded') ], style={ 'position': 'fixed', 'left': '20px', 'top': '75px' }, className='top') return layout
def layout(self): return html.Div( [ dbc.Button(self.button_text, id=self.name+'modal-open', size=self.button_size, outline=self.button_outline), dbc.Modal([ dbc.ModalHeader(self.title), dcc.Graph(id=self.name+'-modal-graph', style={"max-height": "none", "height": "80%"}), dbc.ModalFooter([ html.Div([ html.Div([ html.Div([ dbc.Button(html.Small("Description"), id=self.name+'-show-description', color='link', className="text-muted ml-auto"), dbc.Fade([ html.Small(self.description, className="text-muted")], id=self.name+'-fade', is_in=True, appear=True), ], style=dict(display="none" if not self.description else None)) ], className="text-left"), html.Div([ dbc.Button("Close", id=self.name+'-modal-close', className="mr-auto") ], className="text-right", style=dict(float='right')), ], style={"display":"flex"}), ], className="justify-content-between") ], id=self.name+'-modal', style={"max-width": "none", "width": "80%"}) ], style={"display":"flex", "justify-content":"flex-end"})
def layout(self): el_layout = [dbc.Row(x.layout) for x in self.elements] layout = html.Div([ dbc.Button("Show Info", id="fade-button2", className="mb-3", style={'position': 'fixed', 'right': '20px', 'top': '20px'}), dbc.Fade( el_layout, id="fade2", is_in=False, style={'transition': 'opacity 100ms ease', 'background': 'white', 'height': 'auto', 'width': '30vw', 'overflow': 'visible', 'position': 'fixed', 'right': '20px', 'top': '80px'}, className='top shadow-sm p-3 mb-5 rounded' ) ], className='top') return layout
dbc.Button("outline", size="lg", outline=True, className="mr-2"), ], className="mt-2"), html.Div(children=[ dbc.Button("Open collapse", id="collapse-button"), dbc.Collapse(dbc.Card( dbc.CardBody("This content is hidden in the collapse")), id="collapse") ], className="mt-2"), html.Div(children=[ dbc.Button("Toggle fade", id="fade-button"), dbc.Fade( dbc.Card( dbc.CardBody(dbc.CardText("This content fades in and out"))), id="fade", is_in=True, appear=False, ), ], className="mt-2"), html.Div(children=[ html.P([ "Click on the word ", html.Span("popover", id="popover-target", className="text-info") ]), dbc.Popover([ dbc.PopoverHeader("Popover header"), dbc.PopoverBody("Popover body"), ], id="popover",
placeholder="Local", style={"margin-right": 5}, ), dbc.Button("Procurar", color="primary", id="search_local"), ]), dbc.Fade( html.Div([ dbc.Select( id="select_local", style={ "margin-top": 5, "margin-bottom": 5 }, ), dbc.Button( "Procurar Imóveis", color="primary", id="search_imoveis", style={ "margin-bottom": 20, "width": "100%" }, ), ]), id="fade_search_imoveis", is_in=False, ), ]), dbc.Fade( html.Div([ html.Hr(), html.Div([
import dash import dash_bootstrap_components as dbc import dash_html_components as html from dash.dependencies import Input, Output, State app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) app.layout = html.Div([ dbc.Button('Toggle fade', id='fade-button', className='mb-3'), dbc.Fade( dbc.Card( dbc.CardBody( html.P('This content fades in and out', className='card-text'))), id='fade', is_in=True, appear=False, style={"transition": "opacity 100ms ease"}, ) ]) @app.callback( Output("fade", "is_in"), [Input("fade-button", "n_clicks")], [State("fade", "is_in")], ) def toggle_fade(n, is_in): if not n: # Button has never been clicked return True
return [updated_images, updated_options] else: answer_options = [] return [None, answer_options] #fade function makes images disappear when question modal pops up so that player cannot cheat in the game fading_pics = html.Div(style={ "display": "flex", "flex-direction": "column" }, id='new-images') fade = html.Div([ dbc.Fade(fading_pics, id="fade", is_in=True, appear=False), ]) #callback so that pictures fade out when next button is clicked and question modal pops up @app.callback( Output("fade", "is_in"), [Input("next", "n_clicks"), Input("close", "n_clicks")], [State("fade", "is_in")], ) def toggle_fade(n, n2, is_in): if not n: return True return not is_in
import dash_bootstrap_components as dbc from dash import Input, Output, State, html fade = html.Div([ dbc.Button( "Toggle fade", id="fade-transition-button", className="mb-3", n_clicks=0, ), dbc.Fade( dbc.Card( dbc.CardBody( html.P("This content fades in and out", className="card-text"))), id="fade-transition", is_in=True, style={"transition": "opacity 2000ms ease"}, timeout=2000, ), ]) @app.callback( Output("fade-transition", "is_in"), [Input("fade-transition-button", "n_clicks")], [State("fade-transition", "is_in")], ) def toggle_fade(n, is_in): if not n: # Button has never been clicked
checklist_div, dcc.Checklist( options = [ #{'label':'Gecko comparison', 'value':'GC', 'disabled':False}, #{'label':'Reference genome comparison', 'value':'RGC', 'disabled':False}, {'label':'Notify me by email','value':'email', 'disabled':False}], id = 'checklist-advanced', ), dbc.Fade( [ dbc.FormGroup( [ dbc.Label("Email", html_for="example-email"), dbc.Input(type="email", id="example-email", placeholder="Enter email", className='exampleEmail'), # dbc.FormText( # "Are you on email? You simply have to be these days", # color="secondary", # ), ] ) ], id = 'fade', is_in= False, appear= False ), #html.H3('Submit', style = {'margin-top':'0'}), html.Div( [ html.Button('Submit', id = 'check-job'), html.Button('', id = 'submit-job', style = {'visibility':'hidden'}) ], style = {'display':'inline-block', 'margin':'0 auto'} #style="height:55px; width:150px" )
import dash_html_components as html from .util import make_subheading fade = html.Div( [ make_subheading("Fade", "fade"), html.Div( [ dbc.Button( "Toggle fade", id="fade-button", style={"marginBottom": "1rem"}, ), dbc.Fade( dbc.Card( dbc.CardBody( html.P( "This content fades in and out", className="card-text", ) ) ), id="fade", is_in=True, ), ] ), ], )
}, ], value="1", ), ]), width=3, ), dbc.Col( dbc.Fade( dbc.FormGroup([ dbc.Label("Exponential Rate", html_for="patient_rate_input"), dbc.Input(id="patient_rate_input", type="number", value=1.1, min=0.5, max=1.2, step=0.01), ]), id="fade", is_in=False, appear=False, ), width=3, ), ], form=True, ) patient_form = dbc.Row( [
import dash_bootstrap_components as dbc from dash import Input, Output, State, html fade = html.Div([ dbc.Button("Toggle fade", id="fade-button", className="mb-3", n_clicks=0), dbc.Fade( dbc.Card( dbc.CardBody( html.P("This content fades in and out", className="card-text"))), id="fade", is_in=False, appear=False, ), ]) @app.callback( Output("fade", "is_in"), [Input("fade-button", "n_clicks")], [State("fade", "is_in")], ) def toggle_fade(n, is_in): if not n: # Button has never been clicked return False return not is_in
[ html.Span(id="button_3", style={"vertical-align": "middle"}), html.A('Descargar calificaciones', id='link_descarga', href="/results/info.csv"), ] ) fade = html.Div( [ dbc.Button("Agregar más estados", id="fade-button", className="mb-1", outline=True), dbc.Fade( dbc.Card( dbc.CardBody( estado_checklist #html.P( # "This content fades in and out", className="card-text" #) ) ), id="fade", is_in=False, appear=False, ), ] ) tipoEscuela = dbc.FormGroup( [ dbc.Label("Tipo de escuela:"), dbc.RadioItems(
options=[{'label':'Activate specific date filter','value':1}], value=[],switch=True ), dbc.Row(dbc.Col(html.Br())), html.Div([ dbc.FormText("Please input date in the format of MM/DD/YYYY, \ eg 1/1/2000 (click FILTER to refresh)"), dbc.Row([dbc.Col(dbc.Input(id='date_s',type='text', placeholder='Start Point',disabled=True, style={'width':'150px'}),width=2), dbc.Col(dbc.Input(id='date_e',type='text', placeholder='End Point',disabled=True, style={'width':'150px'}),width=2)], justify="start"), dbc.Fade(html.P("Invalid date input", style={'color':'red','size':1}), id='fade',is_in=False,appear=False), dbc.Row(dbc.Col(html.Br())) ]) ]) ) tab2 = dbc.Card(dbc.CardBody([ html.H4("Meteor Shower Observation Top List",className='card-title'), html.P("Select a list that you are interested",style={'color':'#708090'}), html.Div([dcc.Dropdown(id='list_dropdown',options=[ {'label':'Top 20 observation cities','value':'list1'}, {'label':'Top 10 observation dates','value':'list2'}, {'label':'Future Meteor Showers','value':'list3'} ]),
sidebar = Sidebar() # Подключаем код левого меню external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=[dbc.themes.UNITED ]) #Подключение темы для сайта app.title = "Система ИАС УЭР Металлоинвест" # Название сайта preload_page = dbc.Fade( id='pr_load', children=[ html.Div(id='p_prldr', children=[ html.Div(className='contpre', children=[ html.Span(className='svg_anm'), html.Br(), html.P('Подождите идет загрузка') ]) ]), ], is_in=True, appear=False, ) app.layout = html.Div([ dcc.Location(id='url', refresh=False), preload_page, nav, dbc.Row([ dbc.Col(sidebar, id="left", className="leftMenu", md=2), dbc.Col([ html.Div(id='page-content'), ])
back='data:image/png;base64,{}'.format(cear.decode()) ode = base64.b64encode(open('Apoio/ode.png', 'rb').read()) jumbotron =dbc.Jumbotron( [ dbc.Row( [ dbc.Col([],md=2), dbc.Col([ #html.Hr(className="my-2"), dbc.Fade( html.H3("Bem vindo(a) ao",style={'font-size':'55px'}), id="fade_bem_vindo_1", is_in=True, appear=True, style={"transition": "opacity 2000ms ease", 'textAlign':'center','color':'#04383f'} ), dbc.Fade( html.H3("Observatório de Dados",style={'font-size':'55px'}), id="fade_bem_vindo_1_", is_in=True, appear=True, style={"transition": "opacity 2500ms ease", 'textAlign':'center','color':'#04383f'} ), #dbc.Fade( # html.H1("ao", className="display-3"), # id="fade2", # is_in=True,
subjects_dropdown_menu = dbc.FormGroup( [ dbc.Label('See all courses of this subject!\nYou can type to search.', id='dropdown_label', style={ 'color': 'white'}), dcc.Dropdown( id='subject_input', options=dropdown_item_options, value="COMP", ) ] ) subjects_dropdown_fade = dbc.Fade( subjects_dropdown_menu, id='subject_fade', is_in=True, ) course_input_box = dbc.FormGroup( [ dbc.Label('Course Name', style={'color': 'white'}), dbc.InputGroup([ dbc.Input( id='course_input', type='text', placeholder='e.g. COMP 202', value='comp 302', ), dbc.InputGroupAddon(
card1 = make_card_one(letters) card2 = make_card(names[0], blurbs[0]) card3 = make_card(names[1], blurbs[1]) card4 = make_card(names[2], blurbs[2]) card5 = make_card(names[3], blurbs[3]) result_tabs = dbc.Tabs([ dbc.Tab(card1, label="Your Profile"), dbc.Tab(card2, label="IA"), dbc.Tab(card3, label="SL"), dbc.Tab(card4, label="CN"), dbc.Tab(card5, label="RB") ]) fade = dbc.Fade(result_tabs, id="fade-transition", is_in=True, style={"transition": "opacity 100ms ease"}) result_blurb = html.Div( dbc.Card([ dbc.CardBody([ html.H5("What's your political profile?", className='card-title'), html.P(re_bl), dbc.Button("Get My Results", id="fade-transition-button", className="mb-3", n_clicks=0), fade ]) ])) result_card = dbc.Card([dbc.CardBody([dbc.Row([result_blurb])])])
def page_1_layout(pitches): return html.Div([ Nav, # Main container html.Div([ # Header html.Div([ html.Div([ html.Div([ ], className='col-lg-12', style={'margin-top':20}) ], className='row') ], className='page-header'), # Row containing charts dbc.Fade([ # Left Side html.Div([ html.Div([ # Left chart html.Div([html.H3('Predicted Returns', style={'display':'inline-block','margin-bottom':'0px'})], className='card-header'), html.Div([ # Distillery picker dbc.Row([ dbc.Col([ dcc.Dropdown( id='distillery-dropdown', options=pitches[['formattedDistillery', 'distillery']].drop_duplicates() \ .rename({'formattedDistillery': 'label', 'distillery': 'value'}, axis=1).to_dict( orient='records'), multi=True, ), ], width=8, style={'padding-left':'0px'}), # Radio items dbc.Col([ dcc.RadioItems( id='radio-high-correlation', options=[{'label':'All data','value':1},{'label':'High R Value','value':2}], value=2, labelStyle={'display': 'inline-block', 'padding':'2px'}, ), ], width=4), ], style={'margin':'5px'}), # Malt picker html.Div([ dcc.Checklist( id='grain-malt-chooser', options=[{'label':i,'value':i} for i in ['Single Malt','Grain']], value =['Single Malt','Grain'], labelStyle={'display': 'inline-block', 'margin': '5px'},), ], className='row', style={'margin':'5px'}), # Chart row html.Div([ # html.Div([ dcc.Graph( id='whisky-return-graph', hoverData={'points': [{'text': 'auchroisk_2012_Q4_HHR', 'customdata':1}]}, # style={'width':800}, # figure=create_pitch(pitches), style={'height':'100%', 'width':'100%'} ), ], className='row', style={'margin':'5px','height':450}) ],className='section'), ], className='card border-secondary mb-3', style={'height':650}), ],className='col-lg-6'), # Right Side html.Div([ html.Div([ html.Div([html.H3('Price History',style={'display':'inline-block','margin-bottom':'0px'}), html.P('Filler', id='single-whisky-title', className='float-right', style={'margin-bottom': '0px'})], className='card-header'), dcc.Graph(id='single-whisky-chart', style={'height':'100%'}), ],className='card border-secondary mb-3', style={'height':650}), ],className='col-lg-6'), ],className='row row-eq-height', id="chart-content", appear=False, is_in=True), # Footer Footer, ], className="container"), ])
"padding-right": "6rem", "padding-left": "2rem", "overflow-y": "scroll" }), ], style={ "display": "flex", "height": "68vh" }) app.layout = html.Div([ login_layout(app), dbc.Fade( patient_layout(app), id="fade-transition", is_in=True, style={"transition": "opacity 100ms ease"}, ), ]) @app.callback([ Output("login-collapse-check", "is_open"), Output("login-layout", "hidden"), Output("patient-layout", "hidden"), ], [ Input("login-button-submit", "n_clicks"), Input("logout-button", "n_clicks") ], [ State("login-input-username", "value"), State("login-input-password", "value")
'Applied Principal', 'Applied Interest', 'End Principal' ] # input formgroup loan_amount = dbc.FormGroup([ dbc.Label("Loan Amount"), dbc.Input(id='loan_amount', type='number', min=1000, step=1), dbc.FormText("Please type the loan amount no less than $1000") ]) payment = dbc.FormGroup([ dbc.Label("Loan Monthly Payment"), dbc.Input(id='payment', type='number', min=1, step=1, disabled=True), dbc.Fade(html.P("Invalid loan payment", style={ 'color': 'red', 'size': 1 }), id='fade', is_in=False, appear=False) ]) interest = dbc.FormGroup([ dbc.Label("Loan Interest rate %"), dbc.Input(id='interest', type='number', min=1, max=99, step=0.1, disabled=True) ]) extra_payment = dbc.FormGroup([ dbc.Label("Extra Payment(monthly)"),