Check out the live demo!
The tutorial includes several checkpoints:
- Blank slate
- Create user interface using bottom-docked tab bar (view diff)
- Break each card out into its own file (view diff)
- Specialize the behavior for individual cards (view diff)
- Add a toolbar with title to each card (view diff)
- Add 'ping' and 'clear' buttons, which update badge text (view diff)
- Demonstrate different UI styles for buttons (view diff)
Using this repository to follow the screencast
First, you'll have to clone this repository:
git clone git://github.com/senchalearn/Tabs-and-Toolbars.git
Change into the directory:
cd Tabs-and-Toolbars
By default, the git clone command will only create the master branch locally. If you want to study the code at each checkpoint, you will have to fetch each of the other branches. You can do so by running the following:
git checkout -b 00_blank_slate origin/00_blank_slate
git checkout -b 01_create_bottom_tabs origin/01_create_bottom_tabs
git checkout -b 02_make_each_card_a_view origin/02_make_each_card_a_view
git checkout -b 03_make_each_card_specialize origin/03_make_each_card_specialize
git checkout -b 04_add_a_toolbar_to_each_card origin/04_add_a_toolbar_to_each_card
git checkout -b 05_add_buttons_to_top_toolbar origin/05_add_buttons_to_top_toolbar
git checkout -b 06_create_more_buttons origin/06_create_more_buttons
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent