ftd toggle example

FPM.ftd

-- import: fpm

-- fpm.package: expander

index.ftd

-- ftd.column:
padding-vertical.px: 100
horizontal-resizing: ftd.resizing.fill-container
vertical-resizing: ftd.resizing.fill-container
align-content: ftd.align.top-center
spacing.px: 40


-- box: this is also allowed


The 2022 FIFA World Cup was an international football tournament contested by
the men's national teams of FIFA's member associations and 22nd edition of the
FIFA World Cup. It took place in Qatar from 20 November to 18 December 2022,
making it the first World Cup held in the Arab world and Muslim world, and the
second held entirely in Asia after the 2002 tournament in South Korea and Japan.
[A] France were the defending champions, having defeated Croatia 4–2 in the 2018
final. At an estimated cost of over $220 billion,[2] it is the most expensive
World Cup ever held to date; this figure is disputed by Qatari officials,
including organising CEO Nasser Al Khater, who said the true cost was $8 billion,
and other figures related to overall infrastructure development since the World
Cup was awarded to Qatar in 2010.


-- box:


-- box.title:

The 2022 FIFA World Cup was an international football tournament contested by
the men's national teams of FIFA's member associations and 22nd edition of the

-- box.body:

body can also come as "header"



-- box:
title: this is header title

some other body


-- box:


this one has detault title

-- end: ftd.column





-- component box:
caption title: Heading
body body:
boolean $open: true

-- ftd.column:
border-width.px: 2
horizontal-resizing.fixed.percent: 50


-- ftd.row:
horizontal-resizing.fixed.percent: 92.3
border-color: black
spacing-mode: ftd.spacing-mode.space-between
padding.px: 20
border-width.px: 1
$on-click$: $toggle($value=$box.open)


-- ftd.text: $box.title

-- ftd.text: X
if: {$box.open}

-- ftd.text: O
if: {!box.open}


-- end: ftd.row

-- ftd.text:
if: { $box.open }
padding.px: 20
vertical-resizing: ftd.resizing.hug-content

$box.body

-- end: ftd.column


-- end: box

-- void toggle(value):
boolean $value:

value = !value;