- Placeholder
- name
- fullwidth
- type
- required
- disabled
- value
- autofocus
- margin
- className
- variant
npm i hyper-paper-input
directory တစ်ခုဆောက်ပြီး terminal ကနေ hyper-paper-input ကို install လုပ်လိုက်ပါ။ index.html ဆောက်ပြီး script tag နဲ့ paper-input.js ကို ချိတ်လိုက်ပါ။
-/node_modules
-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>
- 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>
<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>
- Component features
- Styling custom CSS into Component
- CDN link for Component
- Input animations
@github/nayyaung9