Overview

The library version used should be shown in the website to indicate what version was used.

An installation guide (we could just point to the material-web GitHub repository) would be helpful as well.

Tasks

• Show library version used
• Add steps on how to use the library
• Show what is needed to use a specific component (e.g. import '@material/web/button/etc')

Overview

Currently, there are only button and checkbox demos. We should implement the rest (that are available as of v1.0.0-pre.6:)

Components list

As of 1.0.0-pre.6

• Button
• FAB (technically not 100% complete, there might be more we want to show)
• Icon button
• Checkbox
• Chips (86c0b46)
• Dialog
• Divider
• Elevation
• Focus ring
• Field
• Icon
• List
• Menu
• Progress indicator (circular)
• Progress indicator (linear)
• Radio button
• Ripple
• Select
• Slider
• Switch (fc7870e)
• Tabs
• Text-field

1.1+ components

Expand to view

• Autocomplete
• Badge
• Banner
• Bottom app-bar
• Bottom sheet
• Segmented button
• Card
• Data table
• Date picker
• Navigation bar
• Navigation drawer
• Navigation rail
• Search
• Snackbar
• Time picker
• Tooltip
• Top app bar

Overview

Currently, the app uses light theme colours, which might be a bit jarring for users who prefer dark mode. We can also look for the prefers-color-scheme: dark media query as well.

Tasks

• Design dark mode variant
• Add dark theme picker
• Verify that the dark theme colours don't affect the demos

Overview

It would be nice for the user to be able to dynamically generate a theme (i.e. generate CSS variables) via a user interface of some kind.

Tasks

• Design a theme picker user interface
• Implement theme picker functionality
• Figure out how to programmatically determine what CSS variables are available?
• Allow for themes to be customisable on the fly

Overview

There should be a user interface of some kind to view the source code used for each demo, something like Angular Material's documentation site.

Tasks

• Figure out a way of statically retrieving the source code from a component
• Syntax highlighting
• Tabs for each part of a demo (HTML, CSS, JS/TS, other content if needed)

Overview

Currently, the component demos are on a possibly easy to miss sub-page (/components), requiring that users navigate manually