paper-input

Component’s features

Placeholder

name

fullwidth

type

required

disabled

value

autofocus

margin

className

variant

How to use it

npm i hyper-paper-input

directory တစ်ခုဆောက်ပြီး terminal ‌ကနေ hyper-paper-input ကို install လုပ်လိုက်ပါ။
index.html ဆောက်ပြီး script tag နဲ့ paper-input.js ကို ချိတ်လိုက်ပါ။

-/node_modules 
-index.html

index.html

<body>
  ...
  <script src='./node_modules/hyper-paper-input/paper-input.js'></script>
</body>

<body>
  <paper-input></paper-input>
  <script src='./node_modules/hyper-paper-input/paper-input.js'></script>
</body>

Result

features

Placeholder
name

<paper-input
  placeholder="first name"
  name="first-name"
></paper-input>

name attribute လေးက input ရဲ့ နာမည်သတ်မှတ်တဲ့အခါ သုံးပါတယ်။

fullwidth

fullwidth ပေးလိုက်ရင် သူ့ parent container ရဲ့ width ရှိသလောက် နေရာ ယူသွားပါလိမ့်မယ်။

<div class="container">
  <paper-input fullwidth></paper-input>
</div>

Example

<paper-input
  placeholder="Email"
  type="email"
  required
></paper-input>

<div class="container">
  <paper-input
    placeholder="Email"
    type="email"
    required
    margin
    fullwidth
  ></paper-input>
  <paper-input
    placeholder="Password"
    type="password"
    required
    margin
    fullwidth
  ></paper-input>
</div>

variant

<div class="container">
  <paper-input
    placeholder="Email"
    type="email"
    required
    margin
    fullwidth
    variant="outlined"
  ></paper-input>
  <paper-input
    placeholder="Password"
    type="password"
    required
    margin
    fullwidth
    variant="outlined"
  ></paper-input>
</div>

Challenging of hyper-paper-input

Component features
Styling custom CSS into Component
CDN link for Component
Input animations

@github/nayyaung9