Az Bilinen 2 HTML5 Öğesi
[ Okuma süresi tahmini 2 dakikadır ]
Meter ve Progress
Hem az bilinen hem de az kullanılan Html5 elemanlarından Meter ve Progress‘i kısaca inceleyelim ve örnek verelim.
Meter Elementi
Meter öğesi gösterge olarak kullanabiliyor. 10’da 2 gibi veya yüzde 60 gibi değerler ile bir bar üzerinde göstermemize yarıyor.
Meter etiketi, belirli bir aralıkta skaler bir değeri göstermek için kullanılır. Örneğin, disk kullanımı veya bir sorgu sonucunun alakalılığı gibi ölçümler için idealdir. Bu etiket, bir gösterge paneli gibi düşünülebilir ve genellikle bir gösterge çubuğu şeklinde görselleştirilir<meter> etiketi, ilerleme göstergesi olarak kullanılmamalıdır; bunun yerine <progress> etiketi tercih edilmelidir.
Örnek
10’da 2 göstermek istersek;<meter value="2" min="0" max="10">10'da 2</meter>
Kodu gayet kolay; value kısmına bir değer giriyoruz ve min ve max değerleri belirtiyoruz.
Bunu istersek 100’de 20 olarak da gösterebiliriz.
Ya da;
Yüzde 20 (%20) şeklinde göstermek istersek;
olarak da gösterebiliyoruz.<meter value="0.2">20%</meter>
Bu kullanım daha kısa ve kolay elbette.
Neyse hangisi kolayınıza geliyorsa onu kullanın işte.
Progress
Meter’e benzemesine rağmen bu aslında biraz farklı. Bir görevin ilerleme durumunu göstermesi bekleniyor. JavaScript kullanarak dinamik olarak bir görevin ilerleme durumunu göstermede kullanılabiliyor. Statik olarak kullanıldığında yukarıdaki örneklere benziyor, ancak.
Örnek
Görevin %20si bitirildiyse;
Görüldüğü gibi yukarıdaki örneklere benziyor ancak aynı değil. %20, 30,
40 … görevin ilerleme durumunu göstermek istercesine yeşil bar
kısmında bir hareket var. Bu kısım Firefox için. Diğer tarayıcılarda ise Progress yeşil renkte değil mavi olarak ön tanımlı görünmektedir.
Madem istenmiyor, durağan veriler için Progress öğesini kullanmayalım.
Öğeleri Şekillendirme
Meter ve Progress öğeleri CSS ile şekillendirmek, renkleri ile oynamak isterseniz How to use the Meter & Progress Elements bağlantısında örnekleri inceleyebilirsiniz.
Ayrıntılar ve Özet Öğelerini de merak ediyor olabilirsiniz. Onları da yazmıştık.