This repository has been archived by the owner on Nov 4, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 278
Header configuration
Rafał Chłodnicki edited this page Jul 3, 2020
·
4 revisions
header
object can be placed directly in CONFIG
object, or to the each page
you have.
In first case header will be global, in second case - well, yes, only for that page.
header
object may have next fields:
-
styles
are js-css styles e.g.{marginLeft: '100px'}
; -
left
array of items in the left part of header -
right
yes, you get it right
There's few HEADER_ITEMS
types:
-
TIME
time in format you've provided inCONFIG
(24 default) -
DATE
date in custom format ('EEEE, LLLL dd'
is default) -
DATETIME
just a combination of two above -
WEATHER
similar to theTYPES.WEATHER
object withfields
,icon
,icons
fields -
CUSTOM_HTML
custom html string
Here provided default TileBoard's header
{
styles: {
margin: '30px 130px 0',
fontSize: '28px'
},
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
styles: {
margin: '0'
}
}
],
right: [
{
type: HEADER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: {
margin: '40px 0 0'
}
},
// Uncomment weather object to get weather in your header.
/*{
type: HEADER_ITEMS.WEATHER,
styles: {
margin: '0 0 0'
},
icon: '&sensor.dark_sky_icon.state',
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rain': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy'
},
fields: {
summary: '&sensor.dark_sky_summary.state',
temperature: '&sensor.dark_sky_temperature.state',
temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
}
}*/
]
};
You can configure header as you want. Please make sure you've changed all margins and paddings for your TileBoard styles.