Smart Heading

Smart Heading, use as free test heading, or assign as the app name or last reload time.

Usage

import { SmartHeading } from @motor-js/core
//...
<SmartHeading />

Props

PropDescriptionOptions / Example
typeheading type, displaying either free text, last reload timestamp or the app nameoneOf
'lastReload'
'free'
'appName'
sizesize of the headingoneOf
'tiny'
'small'
'medium'
'large'
'xlarge'
levelHeading level from H1 to H6, prop takes the number.oneOf
'1'
'2'
'3'
'4'
'5'
'6'
marginheading marginstring
'5px'
colorheading colorstring
'null' (default taken from theme)
localesLanguage specific format to use for lastReloadstring
'null' (default)
ar-SA Arabic (Saudi Arabia)
bn-BD Bangla (Bangladesh)
bn-IN Bangla (India)
cs-CZ Czech (Czech Republic)
da-DK Danish (Denmark)
de-AT Austrian German
de-DE Standard German (as spoken in Germany)
el-GR Modern Greek
en-AU Australian English
en-CA Canadian English
en-GB British English
en-IE Irish English
en-IN Indian English
en-NZ New Zealand English
en-US US English
en-ZA English (South Africa)
es-AR Argentine Spanish
es-CL Chilean Spanish
es-CO Colombian Spanish
es-ES Castilian Spanish (as spoken in Central-Northern Spain)
es-MX Mexican Spanish
es-US American Spanish
fi-FI Finnish (Finland)
fr-BE Belgian French
fr-CA Canadian French
fr-CH "Swiss" French
fr-FR Standard French (especially in France)
he-IL Hebrew (Israel)
hi-IN Hindi (India)
hu-HU Hungarian (Hungary)
id-ID Indonesian (Indonesia)
it-CH "Swiss" Italian
it-IT Standard Italian (as spoken in Italy)
jp-JP Japanese (Japan)
ko-KR Korean (Republic of Korea)
nl-BE Belgian Dutch
nl-NL Standard Dutch (as spoken in The Netherlands)
no-NO Norwegian (Norway) p
l-PL Polish (Poland)
pt-BR Brazilian Portuguese
pt-PT European Portuguese (as written and spoken in Portugal)
ro-RO Romanian (Romania)
ru-RU Russian (Russian Federation)
sk-SK Slovak (Slovakia)
sv-SE Swedish (Sweden)
ta-IN Indian Tamil
ta-LK Sri Lankan Tamil
th-TH Thai (Thailand)
tr-TR Turkish (Turkey)
zh-CN Mainland China, simplified characters
zh-HK Hong Kong, traditional characters
zh-TW Taiwan, traditional characters
optionsDate and Time format for lastReload. Must have a value in locales set for this to take effect.object
'null' (default)
dateStyle"full"
"long"
"medium"
"short"
timeStyle"full"
"long"
"medium"
"short"
localeMatcher"best-fit" (default)
"lookup"
timeZone
hour12true
false
hourCycle"h11"
"h12"
"h23"
"h24"
formatMatcher"basic"
"best-fit" (default)
weekday"long"
"short"
"narrow"
year"2-digit"
"numeric"
month"2-digit"
"long"
"narrow"

"numeric"
"short"
day"2-digit"
"long"
hour"2-digit"
"long"
minute"2-digit"
"long"

Examples

Simple Smart Heading example
function SmartHeadingTest() {
  return (
    <Motor config={config}>
      <SmartHeading />
    </Motor>
  );
}

Theme API

smartHeading

Settings in global.smartHeading are below:

e.g. global.smartHeading.color = 'brand'

SettingDescriptionOptions / Example
colorheading colorstring

Edit this page