The source is on GitHub at [plotly/dash-core-components](https://github.com/plotly/dash-core-components).
These docs are using version {}.
'''.replace(' ', '').format(dcc.__version__)),
dcc.SyntaxHighlighter('''>>> import dash_core_components as dcc
>>> print(dcc.__version__)
{}'''.replace(' ', '').format(dcc.__version__),
customStyle=styles.code_container),
html.Hr(),
html.H3(dcc.Link('Dropdown', href='/dash-core-components/dropdown')),
ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='MTL'
)''',
language='python',
customStyle=styles.code_container),
ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
multi=True,
value="MTL"
examples['dropdown'][1],
className='example-container',
style={'overflow-x': 'initial'}
),
html.Hr(),
html.H3('Multi-Value Dropdown'),
dcc.Markdown("A dropdown component with the `multi` property set to `True` \
will allow the user to select more than one value \
at a time."),
ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'NYC'],
multi=True
)''', customStyle=styles.code_container, language='python'),
html.Hr(),
html.H3('Disable Search'),
dcc.Markdown("The `searchable` property is set to `True` by default on all \
`Dropdown` components. To prevent searching the dropdown \
value, just set the `searchable` property to `False`. \
Try searching for 'New York' on this dropdown below and compare \
it to the other dropdowns on the page to see the difference."),
ComponentBlock('''import dash_core_components as dcc
html.Div(examples['dropdown'][1],
className='example-container',
style={'overflow-x': 'initial'}),
html.Hr(),
html.H3('Multi-Value Dropdown'),
dcc.Markdown(
"A dropdown component with the `multi` property set to `True` \
will allow the user to select more than one value \
at a time."),
ComponentBlock('''import dash_core_components as dcc
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['MTL', 'NYC'],
multi=True
)''',
customStyle=styles.code_container,
language='python'),
html.Hr(),
html.H3('Disable Search'),
dcc.Markdown(
"The `searchable` property is set to `True` by default on all \
`Dropdown` components. To prevent searching the dropdown \
value, just set the `searchable` property to `False`. \
Try searching for 'New York' on this dropdown below and compare \
it to the other dropdowns on the page to see the difference."),
ComponentBlock('''import dash_core_components as dcc