بر هنر سفارشی‌سازی در Ionic مسلط شوید: قدم به قدم پالت‌های رنگی منحصربه‌فرد ایجاد کنید

Summarize this content to 400 words in Persian Lang
Ionic به ما این فرصت را می دهد تا با ایجاد پالت های رنگی سفارشی، جلوه ای متمایز به برنامه های خود ببخشیم. به لطف یک ابزار یکپارچه، ما می توانیم اجزای بصری خود را با سلیقه و نیازهای خاص خود تطبیق دهیم.

رنگ ایجاد کنید

برای شروع این فرآیند، توجه خود را به اسناد رسمی Ionic معطوف خواهیم کرد. در آن، ما ابزاری را پیدا خواهیم کرد که به طور خاص برای تولید رنگ های سفارشی طراحی شده است. استفاده از آن بسیار ساده است:

نام: نامی را به رنگی اختصاص می دهد که به عنوان یک شناسه در کد ما عمل می کند.

رنگ: لحن دقیقی که می خواهیم استفاده کنیم را مشخص کنید.

نتیجه: Reglas CSS

نصب و راه اندازی

قبل از ادغام رنگ های سفارشی در پروژه خود، باید در مورد دامنه کاربرد آنها تصمیم گیری کنیم. دو گزینه اصلی وجود دارد: جهانی و محلی.

جهانی

آیونیک فایلی به نام در اختیار ما قرار می دهد variables.css با هدف میزبانی قوانین سبک که در کل برنامه اعمال می شود. در این فایل، ویژگی های CSS مربوط به رنگی که ایجاد کرده ایم را اضافه می کنیم.

استفاده کنیدبسته به نوع یونی مورد استفاده ما (Vue، Angular یا React) ممکن است مکان فایل متفاوت باشد.

:root {

–ion-color-new: `#69bb7b`;

–ion-color-new-rgb: `105,187,123`;

–ion-color-new-contrast: `#000000`;

–ion-color-new-contrast-rgb: `0,0,0`;

–ion-color-new-shade: `#5ca56c`;

–ion-color-new-tint: `#78c288`;

}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

محلی

اگر بخواهیم استفاده از یک رنگ را به یک جزء خاص یا مجموعه ای از اجزا محدود کنیم، می توانیم قوانین سبک را مستقیماً در فایل CSS کامپوننت مورد نظر قرار دهیم.

.ion-color-new {

–ion-color-base: var(–ion-color-new);

–ion-color-base-rgb: var(–ion-color-new-rgb);

–ion-color-contrast: var(–ion-color-new-contrast);

–ion-color-contrast-rgb: var(–ion-color-new-contrast-rgb);

–ion-color-shade: var(–ion-color-new-shade);

–ion-color-tint: var(–ion-color-new-tint);

}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

رنگ را اعمال کنید

هنگامی که رنگ های سفارشی خود را تعریف کردیم، می توانیم آنها را به طور مستقیم روی اجزای Ionic اعمال کنیم. این فرآیند مشابه فرآیندی است که برای رنگ های از پیش تعریف شده چارچوب استفاده می شود.

به عنوان مثال، برای تغییر رنگ یک دکمه، به سادگی ویژگی را اضافه می کنیم color با نام رنگ سفارشی که ایجاد کرده ایم:

color=”new”>Hola mundo

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

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

فوئنته: https://dowar.xyz/blog/post/54

:root {

    --ion-color-new: `#69bb7b`;

    --ion-color-new-rgb: `105,187,123`;

    --ion-color-new-contrast: `#000000`;

    --ion-color-new-contrast-rgb: `0,0,0`;

    --ion-color-new-shade: `#5ca56c`;

    --ion-color-new-tint: `#78c288`;

}

.ion-color-new {

    --ion-color-base: var(--ion-color-new);

    --ion-color-base-rgb: var(--ion-color-new-rgb);

    --ion-color-contrast: var(--ion-color-new-contrast);

    --ion-color-contrast-rgb: var(--ion-color-new-contrast-rgb);

    --ion-color-shade: var(--ion-color-new-shade);

    --ion-color-tint: var(--ion-color-new-tint);

}

 color="new">Hola mundo