Inline headers
For simple (or caption only) arguments types, you can pass data through inline
headers as key value pairs.
For simple/caption only arguments
Sample usage
Input
-- foo-1: This is title
title-color: $inherited.colors.text-strong
Output
Definitions used
Section headers
For list type arguments, we use section headers to pass data to it.
Sample usage
Input
-- foo-2: This is title
-- foo-2.inner:
-- ftd.row:
width: fill-container
background.solid: yellow
-- ftd.text: This is some inner text
color: red
-- end: ftd.row
-- end: foo-2.inner
Output
Definitions used
Block headers
For record type arguments, we use block headers to pass data. Passing
record field data can be done through its inline headers or by passing it
individually through record field syntax.
For record type arguments (for kernel components)
Sample usage
Input
-- ftd.text: First Text
margin-vertical.px: 10
-- ftd.text.color:
light: red
dark: yellow
-- ftd.text: Second Text
margin-vertical.px: 10
-- ftd.text.color: red
dark: yellow
-- ftd.text: Third Text
margin-vertical.px: 10
-- ftd.text.color: red
-- ftd.text.color.dark: yellow
-- ftd.text: Fourth Text
margin-vertical.px: 10
-- ftd.text.color.light: red
-- ftd.text.color.dark: yellow
Output
First Text
Second Text
Third Text
Fourth Text
For record-type arguments ( user-defined components )
Sample usage
Input
-- foo: Text 1 from component
-- foo.text-color: $c
-- foo: Text 2 from component
-- foo.text-color:
light: red
dark: yellow
-- foo: Text 3 from component
-- foo.text-color: red
dark: yellow
-- foo: Text 4 from component
-- foo.text-color: red
-- foo.text-color.dark: yellow
-- foo: Text 5 from component
-- foo.text-color.light: red
-- foo.text-color.dark: yellow
-- foo: Text 6 from component
-- foo.text-color.light: red
-- foo.text-color.dark: $d-color
Output
Text 1 from component
Text 2 from component
Text 3 from component
Text 4 from component
Text 5 from component
Text 6 from component
Definitions used
More complex record type arguments (user-defined component)
Sample usage
Input
-- bar:
-- bar.text:
Hello this is some text
-- bar.d: Rithik
-- bar.d.description:
This is some description
-- bar.d.age: 23
-- bar.text-color: red
dark: yellow
Output
Hello this is some text
Rithik
This is some description
23
Definitions used