Skip to content

Commit

Permalink
Add the details of parts
Browse files Browse the repository at this point in the history
Fixes #7
  • Loading branch information
tkent-google authored Sep 13, 2019
1 parent 31c1cb1 commit 59b27b6
Showing 1 changed file with 6 additions and 1 deletion.
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,12 @@ There are two approaches. We have not decided yet. ([Issue #15](https://github.c
TODO: an easy flag to enable platform-dependent appearance ([Issue #6](https://github.com/tkent-google/std-switch/issues/6))
When the flag is enabled, ```std-switch``` element is styled as UISwitch on iOS, [Material Design switch](https://material.io/design/components/selection-controls.html#switches) on Android, [Fluent design toggle switch](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles) on Windows.

TODO: Full customization. Shadow parts? CSS custom properties? ([Issue #7](https://github.com/tkent-google/std-switch/issues/7))
The element provides full customization capability by [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/).
A ```<std-switch>``` contains three parts, `track`, `track-fill`, and `thumb`. `track` and `thumb` are siblings, and `track-fill` is a child of `track`.

<img alt="Part structure" src=part-structure.svg width=460>

(See [Issue #7](https://github.com/tkent-google/std-switch/issues/7))


## Security and Privacy Considerations
Expand Down

0 comments on commit 59b27b6

Please sign in to comment.