Sencha Touch - Tema
Sencha Touch menyediakan sejumlah tema untuk digunakan dalam aplikasi Anda. Anda dapat menambahkan tema yang berbeda sebagai pengganti tema klasik dan melihat perbedaan dalam keluaran berdasarkan perangkat yang kami gunakan untuk aplikasi. Ini dilakukan hanya dengan mengganti file CSS tema seperti yang dijelaskan dalam contoh berikut.
Tema Desktop
Pertimbangkan aplikasi Hello World pertama Anda. CSS berikut dari aplikasi digunakan untuk tema desktop.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type="text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tema Windows
Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssTambahkan CSS berikut untuk menggunakan tema Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tema iOS
Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssTambahkan CSS berikut untuk menggunakan tema Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tema IOS Klasik
Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssTambahkan CSS berikut untuk menggunakan tema Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tema Android
Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssTambahkan CSS berikut untuk menggunakan tema Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -
Tema BlackBerry
Pertimbangkan aplikasi Hello World pertama Anda. Hapus CSS berikut dari aplikasi.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssTambahkan CSS berikut untuk menggunakan tema Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssUntuk melihat efeknya, coba program berikut -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.css" rel = "stylesheet" />
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Ini akan menghasilkan hasil sebagai berikut -