Photo by Steve Johnson on Unsplash

REACT UI STYLING

Basit Bir Hesap Makinası Nasıl Stillendirilir

Daha önceden React ile basit bir Hesap Makinesi geliştirmiştim. Bu yazıda da bu uygulamayı nasıl stillendireceğimi anlatacağım.

İlk hesap makinesi örneğinde Hesap Makinesi mekaniği üzerinde durmuştuk ve bu konuyu anlatmıştık. Oluşturduğumuz ekranlar aşağıdaki gibiydi. Bu yazıda hesap makinemizi nasıl stillendirebileceğimiz üzerinde duracağız.

React UI Mechanics

A. Örnek Bir Hesap Makinesini Önce Tasarlayalım

MacOS hesap makinesinin tasarımı oldukça güzel.

MacOS Hesap Makinesi

A.1 Layout Çıkaralım

A.2 Layout Parçalara Bölelim

A.3 Layout Parçalara Bölelim ve Renklendirelim

A.4 Coloring ve Font Size Ayarlayalım

B. Tasarımı Giydirelim

B.1 Layout Oluşturalım

B.2 Screen ve Button Layout Oluşturalım

B.3 Button Layout için Tablo Oluşturup Row’ları Oluşturalım

B.4 Button Layout Hücrelerini Oluşturalım

B.5 Button Layout içerisine Düğmeleri Koyalım

B.6 Button Layout içerisindeki Size Ayarlayalım

B.7 Düğmeleri ve Arkaplanı Renklendirmesini Yapalım

B.8 Renklerdirme, Font Size ve Border-Radious Ayarlayalım

C. Kaynak Kod

• Comp-Calc-Styling

D. Demo Ortam

• Demo

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Mechanics) erişmek için bu linke tıklayabilirsiniz.

Bu yazının devamı veya yazı grubundaki diğer yazılara (React UI Styling) erişmek için bu linke tıklayabilirsiniz.