آکادمی کدنویسان با هدف برگزاری آموزش های آنلاین راه اندازی شد. با ثبت نام در دوره های پیش رو، تابستان پرباری داشته باشید
طراحی واکنش گرا با متریالایز

نام کلاس  توضیحات
 input-field این کلاس برای div که محتوای داخل آن شامل input می باشد مورد نیاز است.
validate به یک فیلد input که می خواهیم اعتبار سنجی کنیم، مورد استفاده قرار می گیرد.
active یک فیلد  input که می خواهیم فعال باشد، را نشان می دهد.
 materialize-textarea برای فیلد textarea قرار می گیرد و اندازه آن بر اساس متن داخل آن بصورت اتومات تغییر می کند.
 filled-in برای یک checkbox توپر مورد استفاده قرار می گیرد.

 

مثال

در زیر مثالی در مورد نحوه استفاده از کلاس های فوق ذکر شده است .

<html>
<head>
<title>The Materialize Form Example</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.1.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”></script>
</head>
<body class=”container”>
<div class=”row”>
<form class=”col s12″>
<div class=”row”>
<div class=”input-field col s6″>
<i class=”material-icons prefix”>account_circle</i>
<input placeholder=”Username” value=”Mahesh” id=”name” type=”text” class=”active validate” required>
<label for=”name”>Username</label>
</div>
<div class=”input-field col s6″>
<label for=”password”>Password</label>
<input id=”password” type=”password” placeholder=”Password” class=”validate” required>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12″>
<input placeholder=”Email” id=”email” type=”email” class=”validate”>
<label for=”email”>Email</label>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12″>
<i class=”material-icons prefix”>mode_edit</i>
<textarea id=”address” class=”materialize-textarea”></textarea>
<label for=”address”>Address</label>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12″>
<input placeholder=”Comments (Disabled)” id=”comments” type=”text” disabled>
<label for=”comments”>Comments</label>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12″>
<p>
<input id=”married” type=”checkbox” checked=”checked”>
<label for=”married”>Married</label>
</p>
<p>
<input id=”single” type=”checkbox” class=”filled-in” >
<label for=”single”>Single</label>
</p>
<p>
<input id=”dontknow” type=”checkbox” disabled=”disabled”>
<label for=”dontknow”>Don’t know (Disabled)</label>
</p>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12″>
<p>
<input id=”male” type=”radio” name=”gender” value=”male” checked>
<label for=”male”>Male</label>
</p>
<p>
<input id=”female” type=”radio” name=”gender” value=”female” checked>
<label for=”female”>Female</label>
</p>
<p>
<input id=”dontknow1″ type=”radio” name=”gender” value=”female” disabled>
<label for=”dontknow1″>Don’t know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>

نتیجه نمایش صفحه را در زیر می بینید:

برچسب ها

, , , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.