layout = html.Div(className='toc', children=[
html.H1('Dash User Guide'),
Section("What's Dash?", [
Chapter(chapters['introduction']['name'],
chapters['introduction']['url'],
"A quick paragraph about Dash and a link to the talk at Plotcon that started it all."),
Chapter('Announcement Essay',
'https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503',
("Our extended essay on Dash. An extended discussion of Dash's architecture "
"and our motivation behind the project.")),
Chapter(chapters['gallery']['name'],
"https://dash-gallery.plotly.host/Portal/",
"A glimpse into what's possible with Dash."),
Chapter('Dash Club',
'http://eepurl.com/dE7CHT',
'A fortnightly email newsletter by chriddyp, the creator of Dash.'),
Chapter(chapters['dash-1-0-migration']['name'],
chapters['dash-1-0-migration']['url'],
("Dash v1.0 is out! If you're new to Dash, just head down to "
"the tutorial section below and get started. This section is "
"for users Dash v0.x upgrading to v1.0. We've learned a lot "
"from working with the amazing Dash community, and Dash v1.0 "
"makes a number of changes to make your apps even more "
"intuitive, powerful, and extensible as Dash continues to "
"evolve."))
]),
Section('Dash Tutorial', [
Chapter(chapters['installation']['name'],
chapters['installation']['url']),
> Once the community feels good about its API, we'll lock it down
> and we'll commit to reducing the frequency of breaking changes.
> Please subscribe to [dash-table#207](https://github.com/plotly/dash-table/issues/207)
> and the [CHANGELOG.md](https://github.com/plotly/dash-table/blob/master/CHANGELOG.md) to stay up-to-date with any breaking changes.
>
> So, check out DataTable and let us know what you think.
> Or even better, share your DataTable Dash apps
> on the [community forum](https://community.plot.ly/t/show-and-tell-community-thread/7554)!
>
> -- chriddyp
''')),
Section('Quickstart', [
dcc.SyntaxHighlighter('''pip install dash=={}'''.format(
dash.__version__),
customStyle=styles.code_container),
dcc.SyntaxHighlighter(examples['simple.py'][0],
language='python',
customStyle=styles.code_container),
html.Div(examples['simple.py'][1], className='example-container'),
]),
Section('Dash DataTable User Guide', [
Chapter(
'Part 1. Sizing', '/datatable/sizing', '''
All about sizing the DataTable. Examples include:
- Setting the width and the height of the table
- Responsive table design
- Setting the widths of individual columns
- Handling long text
- Fixing rows and columns
'''),
}
}
layout = html.Div(
className='toc',
children=[
html.H1('Dash User Guide'),
Section("What's Dash?", [
Chapter(
chapters['introduction']['name'],
chapters['introduction']['url'],
"A quick paragraph about Dash and a link to the talk at Plotcon that started it all."
),
Chapter(
'Announcement Essay',
'https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503',
("Our extended essay on Dash. An extended discussion of Dash's architecture "
"and our motivation behind the project.")),
Chapter(chapters['gallery']['name'], chapters['gallery']['url'],
"A glimpse into what's possible with Dash."),
Chapter(
'Dash Club', 'http://eepurl.com/dE7CHT',
'A fortnightly email newsletter by chriddyp, the creator of Dash.'
),
]),
Section('Dash Tutorial', [
Chapter(chapters['installation']['name'],
chapters['installation']['url']),
Chapter(chapters['getting-started']['name'],
chapters['getting-started']['url'],
chapters['getting-started']['description']),
Chapter(chapters['getting-started-part-2']['name'],
>
> Dash Cytoscape is a graph visualization component for creating easily
> customizable, high-performance, interactive, and web-based networks. It
> extends and renders [Cytoscape.js](http://js.cytoscape.org), and
> offers deep integration with Dash layouts and callbacks, enabling the
> creation of powerful networks in conjunction with the rich collection of
> Dash components, as well as established computational biology and network
> science libraries such as Biopython and networkX.
>
> -- xhlulu
''')),
Section('Quickstart', [
dcc.SyntaxHighlighter('''pip install dash-cytoscape=={}'''.format(
dash_cytoscape.__version__),
customStyle=styles.code_container),
dcc.SyntaxHighlighter(examples['simple.py'][0],
language='python',
customStyle=styles.code_container),
html.Div(examples['simple.py'][1], className='example-container'),
]),
Section('Dash Cytoscape User Guide', [
dcc.Markdown(
dedent('''
> Dash Cytoscape graphs are interactive! Scroll to zoom and drag on
> the canvas to move the entire graph around. You can move nodes by
> *dragging* it, or by *clicking, holding, and moving your mouse*
> to the desired location (and click again to release).
>
> This also work in mobile! Tap-and-hold on a node to move it, or on
> the canvas to move the entire graph. Pinch your fingers outwards to
> zoom in, or pinch them together to zoom out.
