diff --git a/demo/index.html b/demo/index.html index 312a654..3421083 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,7 +1,7 @@ - react-maskedinput + react-maskedinput Demo @@ -11,11 +11,26 @@ width: 550px; margin: 1em auto; padding: 0 1em; + font-family: sans-serif; + } + code { + font-size: 1.3em; } h1 { - font-size: 1.5em; + font-size: 3em; + text-align: center; margin-top: 0; } + p.lead { + font-weight: bold; + text-align: center; + } + hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #222; + } .form-field { margin-bottom: .5em; } @@ -29,6 +44,9 @@ border: none; font-size: 1.5em; } + footer { + text-align: center; + } @@ -41,7 +59,8 @@ card: '', expiry: '', ccv: '', - plate: '' + plate: '', + escaped: '' } }, @@ -54,10 +73,12 @@ render() { return

<MaskedInput/>

+

A React component which creates a masked <input/>

+

Placeholders are automatically generated but can be overridden with your own:

@@ -70,7 +91,15 @@

<MaskedInputLicense Plate:

+

Mask placeholder characters can be escaped with a leading \ to use them as static contents:

+
+ + +
+
{JSON.stringify(this.state, null, 2)}
+
+
} })