Mockdown Documentation

basic-2.mkn

%canvas width="100" height="100" border="1px #000000" background="#FF0000"
  %canvas width="50%" height="20" background="#00FF00"
  
  %canvas width="20" height="20" vcenter="0" hcenter="0" background="#0000FF"

basic-3.mkn

%canvas width="100" height="100" border="1px #000000" background="#FF0000"
  %my-component selected="true" first-name="Bob" hcenter="0" vcenter="0"

basic-4.mkn

import ios

%iphone
  %navigation-view header-text="Hello, World!"
    %table-view
      %search-bar

basic-5.mkn

%canvas width="100" height="100" border="1px #000000" background="#FF0000"
  %my-component selected="true" first-name="Bob" hcenter="0" vcenter="0"
    %border width="100%" height="100%" background="#999999"
    %border width="100%" height="100%" background="#666666"
    %border width="100%" height="100%" background="#333333"

basic.mkn

%canvas width="100" height="100" border="1px #000000" background="#FF0000"

my_component-2.mkx

property selected:boolean="false"
property first-name:string

%canvas background="#CCCCCC,#FFFFFF"
  %text value="{{first-name}}"

my_component-3.mkx

property selected:boolean="false"
property first-name:string

%canvas background="#CCCCCC,#FFFFFF" background[selected="true"]="#00FF00"
  %text value="{{first-name}}"

my_component-4.mkx

property selected:boolean="false"
property first-name:string

%col background="#CCCCCC,#FFFFFF" background[selected="true"]="#00FF00"
  %text value="{{first-name}}"

  %row width="100%" height="30" border="1px #000000"
    =yield

my_component-5.mkx

property selected:boolean="false"
property first-name:string

property my-named-yield:component

%col background="#CCCCCC,#FFFFFF" background[selected="true"]="#00FF00"
  %text value="{{first-name}}"

  %row width="100%" height="30" border="1px #000000"
    =yield
    
  =yield my-named-yield width="100%" height="20"

my_component.mkx

property selected:boolean="false"
property first-name:string

%canvas background="#CCCCCC,#FFFFFF"
  %text value="Hello!"