مقدمه
یکی از ویژگی‌های جذاب تکنولوژی بلیزر، امکان استفاده از کتابخانه‌های غنی و کامپوننت‌های از پیش ساخته شده مانند تلریک است. اما معمولاً سوالی که در این زمینه مطرح می‌شود، نحوه تغییر استایل این کامپوننت‌ها است. در این مطلب، قصد داریم به صورت ساده و دوستانه، نحوه‌ی اعمال تغییرات دلخواه در استایل یک المان داخل یک کامپوننت تلریک با استفاده از بلیزر را بررسی کنیم.
ابتدا باید بدانیم که بلیزر به ما اجازه می‌دهد تا به راحتی کدهای CSS سفارشی خود را اعمال کنیم. این کار به ما کمک می‌کند تا طراحی مورد نظرمان را بدون مشکل روی کامپوننت‌های تلریک پیاده‌سازی کنیم. استفاده از CSS داخلی و یا ایجاد کلاس‌های سفارشی، روشی سریع و کارآمد برای این منظور است.
معمولاً در هنگام پیاده‌سازی یک پروژه واقع‌گرایانه، نیاز داریم تا ظاهر این کامپوننت‌ها را مطابق با سلیقه و نیاز پروژه تغییر دهیم. تکنیک‌های مختلفی برای دستیابی به این هدف وجود دارد که برای استفاده‌ی شما عزیزان در اینجا به آن می‌پردازیم.
نحوه تغییر استایل
برای تغییر استایل یک المان در داخل یک کامپوننت تلریک، می‌توانید از ویژگی‌هایی که بلیزر ارائه می‌دهد استفاده کنید. ابتدا باید توجه داشته باشید که هر کامپوننت تلریک، دارای کلاس‌های خاص خود خواهد بود که می‌توان با کمک CSS آن را تغییر داد. در ادامه یک نمونه کد را مشاهده می‌کنید که با کمک آن می‌توانید استایل یک دکمه در داخل یک کامپوننت تلریک را تغییر دهید.
<TelerikButton Class="my-custom-style">Click Me</TelerikButton>
<style>
.my-custom-style {
background-color: #f00;
color: #fff;
border-radius: 5px;
padding: 10px;
}
</style>
توضیح خط به خط کد
<TelerikButton Class="my-custom-style">Click Me</TelerikButton>این خط یک دکمه تلریک ایجاد می‌کند که با کلاس «my-custom-style» تعریف شده است.
<style>این تگ style برای اضافه کردن CSS داخلی استفاده می‌شود.
.my-custom-styleاین کلاس CSS برای اعمال استایل‌های خاص به دکمه‌ی تلریک تعریف شده است.
background-color: #f00;این خط رنگ پس‌زمینه دکمه را به قرمز تغییر می‌دهد.
color: #fff;این خط رنگ متن دکمه را به سفید تغییر می‌دهد.
border-radius: 5px;این خط میزان گردی گوشه‌های دکمه را به ۵ پیکسل تغییر می‌دهد.
padding: 10px;این خط فاصله‌ی داخلی دکمه را به ۱۰ پیکسل تنظیم می‌کند.