Çok Kullanılan Material Arayüz Öğeleri ve Kullanımları | Turkish Tutorial

codings(54)
Published in
#utopian-io
Words
331
Reading
2 min
Listen
Play
9y

Neler Öğreneceğim?

  • Çok Kullanılan Material Arayüz Öğeleri ve Kullanımları
  • Checkbox ve Radio Öğeleri
  • Yazı İnputları
  • Tarih Seçici

Gereksinimler

  • Notepad++

Zorluk Düzeyi

  • Intermediate (Orta Seviye)

English

Frequently Used Material Interface Elements and Uses

The Material module contains many items such as interface items, cards, tooltips, progress bars, icons, and more. Since it is difficult for us to demonstrate the use of all of them, let's examine with sample code how a section is used. On top of this, you can see how all the texts are used on the site mentioned above.

Türkçe

Çok Kullanılan Material Arayüz Öğeleri ve Kullanımları

Material modülü, birçok arayüz ögesi, kartlar, tooltip, progress barları, ikonlar gibi bir çok ögeyi içinde barındırıyor. Bunların tamamının kullanımını göstermemiz zor olacağından, bir bölümünün nasıl kullanıldığını örnek kodlar ile inceleyelim. Bunun üzerine yukarıda belirttiğimiz siteden tüm ögelerin nasıl kullanıldığını inceleyebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <md-button class="md-raised">{{buttonText}}</md-button>
        <br>
        <md-button class="md-raised md-primary">Birincil</md-button>
        <br>
        <md-button ng-disabled="true" class="md-raised md-primary">Engelli</md-button>
        <br>
        <md-button class="md-raised md-warn">Sil</md-button>
    </div>
    
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngMaterial"]);

        uygulama.controller("ngKontrol", function($scope) {
            $scope.buttonText = "Deneme";
        });
    </script>

</body>
</html>

AngularJS5.png

AngularJS6.png

Örneğimizde gördüğünüz gibi, md-button elementi ve bu elemente atanan class değerleri ile farklı butonlar oluşturabiliyoruz.

Not: Bu ve sonraki örneklerin tamamında, material modülü ve çalışması için gerekli modüllerin tamamının HTML sayfasında body öncesine eklenmiş şekilde çıktıların alındığını tekrar hatırlatalım.

Checkbox ve Radio Öğeleri

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <md-checkbox ng-model="cb1" aria-label="Checkbox 1">Checkbox 1</md-checkbox>
        <br>
        <md-checkbox ng-model="cb2" aria-label="Checkbox 2">Checkbox 2</md-checkbox>
        <hr/>
        <md-radio-group>
            <md-radio-button value="Patates" class="md-primary"> Patates</md-radio-button>
            <md-radio-button value="Domates"> Domates </md-radio-button>
            <md-radio-button value="Maydanoz"> Maydanoz</md-radio-button>
        </md-radio-group>
    </div>
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngMaterial"]);

        uygulama.controller("ngKontrol", function($scope) {
            $scope.cb1 = true;
            $scope.cb2 = false;
        });
    </script>

</body>
</html>

AngularJS7.png

AngularJS8.png

Bu örneğimizde, kontrol edilmiş olma değerini scope üzerinden alan iki checkbox (onay kutusu) md-checkbox elementi ve grup halindeki radio md-radio elementinin nasıl kullanlıdığını görebilirsiniz.

Yazı İnputları

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <div style="padding:10px;">
            <md-input-container>
                <label>Adınız</label>
                <input ng-model="isim">
            </md-input-container>
            <br>
            <md-input-container>
                <label>Soyadınız</label>
                <input ng-model="soyad">
            </md-input-container>
            <br>
            <md-button class="md-raised md-primary">Kayıt Ol</md-button>
        </div>
    </div>
    
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngMaterial"]);
        uygulama.controller("ngKontrol", function($scope) {
        });
    </script>

</body>
</html>

AngularJS9.png

AngularJS10.png

material modülünün en can alıcı özelliklerinin başında, input placeholder yazısının input'a bir noktada toplandığında küçülerek üst köşeye gitmesi aksiyonu diyebiliriz. Gerçekten büyük bir kullanıcı deneyimi sorununa çözüm getirmekte olan input yapısı, bir container ve bu container içindeki label ve model'e bağlanabilir input elementinden oluşuyor.

Tarih Seçici

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</head>
<body>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <md-datepicker ng-model="tarih" md-placeholder="Tarih giriniz"></md-datepicker>
    </div>
    
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngMaterial"]);

        uygulama.controller("ngKontrol", function($scope) {
            $scope.tarih = new Date();
        });
    </script>

</body>
</html>

AngularJS11.png

AngularJS12.png

AngularJS13.png

Kullanıcı tarafından tarih seçtirmek çoğu kez büyük bir kullanıcı deneyimi sorunudur. Angular Material modülünde, tek satırlık md-datepicker elementi ile, verdiğiniz varsayılan değere de bağlı olarak bir tarih seçici rahatlıkla oluşturabiliyorsunuz. Bahsettiğimiz gibi, bu ögeiere ek olarak birçok farklı arayüz ögesi material modülü ile kullanılabilir. Tamamını şu adresten inceleyebilir ve her öge için oluşturulmuş ayrıntılı örnek kodları ile kullanımını görebilirsiniz;


Posted on Utopian.io - Rewarding Open Source Contributors

utopian-io
angularjs
via utopian
This post was published via utopian. Ecency is not the originator or editor of this content and displays it for discovery purposes only.
5
Çok Kullanılan Material Arayüz Öğeleri ve Kullanımları | Turkish Tu... | Ecency