پرش به مطلب اصلی

هایلایت‌های رنگی و پس‌زمینه‌ها

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

چگونه می توانم bg-highlight و color-highlight را در سطح قالب تغییر دهم؟​

مثل همیشه ساده است. به بالای فایل html خود بروید و درست قبل از بستن تگ head این کد را اضافه کنید.

html
<link
  rel="stylesheet"
  class="page-highlight"
  type="text/css"
  href="styles/highlights/highlight_red.css"
/>

highlight_red.css را با رنگ‌های موجود در پوشه styles/highlights جایگزین کنید. لطفاً مرحله زیر را بخوانید تا متوجه شوید قالب چگونه طرح رنگ صحیح را بارگذاری میکنند. استفاده از آن واقعاً ساده است.

چه کلاس‌هایی دریافت میکنید؟​

اکنون میتوانید از کد تولید شده‌ی فوق برای رنگ های زیر استفاده کند

color-awesomeBuyer-light: به متن و آیکون ها اعمال میشود، از hex1 استفاده میکند
color-awesomeBuyer-dark: به متن و آیکون ها اعمال میشود، از 2hex استفاده میکند

bg-awesomeBuyer-light: به عناصر پس زمینه مانند کارت اعمال میشود، از hex1 استفاده میکند
bg-awesomeBuyer-dark: برای عناصر پس زمینه مانند کارت اعمال میشود، از hex2 استفاده میکند

bg-fade-awesomeBuyer-light: نسخه محو شده رنگ bg-awesomeBuyer-light بالا
bg-fade-awesomeBuyer-dark: نسخه محو شده رنگ bg-awesomeBuyer-dark بالا

gradient-awesomeBuyer: برای عناصر پس‌زمینه مانند کارت کاربرد دارد، از ترکیبی از هر 3 hex استفاده میکند که با hex1، hex2، hex3 در پایان شروع میشود.

border-awesomeBuyer: برای عناصر حاشیه دار با استفاده از hex1 اعمال میشود
border-fade-awesomeBuyer: نسخه محو شده رنگ border-awesomeBuyer بالا

چه رنگ هایی به طور پیشفرض گنجانده شده است؟​

اگر میخواهید از این رنگ ها در تگ body یا تگ هایلایت استفاده کنید، کافی است نام آنها را مطابق شکل زیر وارد کنید، اما اگر میخواهید از این رنگ ها برای تغییر رنگ یک المان یا پس زمینه یک المان استفاده کنید. از ساختار awesomeBuyer که در بالا توضیح داده شد استفاده کنید و آن را با هر رنگی از لیست زیر جایگزین کنید.

نکته

همه رنگ‌های قالب را میتوان در داخل فایل scss/appkit/colors.scss یا داخل style.css با جستجو بر اساس فرمول زیر پیدا کرد.
bg-ANY_NAME_FROM_LIST_BELOW-dark

  • mint
  • plum
  • violet
  • magenta
  • red
  • green
  • sky
  • blue
  • yellow
  • teal
  • orange
  • pumpkin
  • pink
  • brown
  • dark

چگونه حالت تاریک را فعال کنم؟ یا رنگ هایلایت یا پس زمینه صفحه را تغییر دهم؟​

تگ body برای کنترل قالب صفحه و همچنین هایلایت و رنگ پس‌زمینه استفاده میشود.

html
<body class="theme-light"></body>

کلاسی که قالب برای تعیین تم رنگی استفاده میکند. برای حالت تاریک از theme-dark، برای حالت روشن از theme-light و برای تشخیص خودکار تم دستگاه خود از detect-theme استفاده کنید. اگر این قابلیت توسط دستگاه شما پشتیبانی نشود، صفحه به طور خودکار به theme-light تغییر حالت میدهد. اکثر دستگاه‌های مدرن اکنون از تشخیص خودکار تم پشتیبانی میکنند و میتوانید این مورد را در صفحه component-auto-dark.html بررسی کنید.

برای تغییر پس‌زمینه، کافیست "none" را در تگ body با هر یک از رنگ‌های موجود در لیست بالا جایگزین کنید.

برای تغییر رنگ color-highlight / bg-highlight، کافیست red2 را با هر یک از رنگ‌های موجود در لیست بالا جایگزین کنید.

آخرین به روز رسانی در تاریخ
آکاردئون | راهنمای محصولات راست چین
پرش به مطلب اصلی

آکاردئون

آکاردئون معمولی​

هر آکاردئونی که در صفحه component-accordions.html موجو است تا حدودی توضیح داده شده است، اما صفحه را نیز بررسی کنید و با کپی پیست و استفاده از این راهنما، از آن استفاده کنید.

html
<div class="accordion" id="accordion-1">
    <div>
        <button class="btn accordion-btn no-effect" data-bs-toggle="collapse" data-bs-target="#collapse1">
            <i class="fa fa-heart color-red2-dark mr-2"></i>
            Accordion description 1
            <i class="fa fa-plus font-10 accordion-icon"></i>
        </button>
        <div id="collapse1" class="collapse" data-parent="#accordion-1">
              {/* add your content here */}
        </div>
    </div>
</div>

خط 1 div را به عنوان آکاردئون تعریف میکند و آی دی برای هدف قرار دادن عناصر استفاده میشود، بنابراین یکی با باز شدن دیگری بسته می‌شود.

خط 2 تا 11 المان آکاردئون است. برای ایجاد یک مورد جدید، آن را را کپی کنید.

خط 3 دکمه آکاردئونی است که برای باز شدن باید روی آن ضربه بزنید. توجه داشته باشید که این دکمه دارای data-bs-toggle="collapse" است که توسط جاوا اسکریپت برای تعریف این المان به عنوان یک المان جمع‌ شونده مورد نیاز است. data-bs-target="#collapse1" باید با آی دی div که قرار است جمع یا باز شود، یکسان باشد، که در این جا در خط 8 است. حتماً کلاس no-effect را اضافه کنید تا آیکون نچرخد.

خط 4 آیکون FontAwesome مورد نظر شما است.

خط 5 متن دکمه آکاردئون است.

خط 6 آیکون سمت راست دکمه آکاردئون است

خط 8,9,10 محتوای آکاردئونی است که هنگام ضربه زدن روی دکمه نمایش داده میشود. این باید آی دی مشابه با دکمه data-target داشته باشد و data-parent آن نیز باید با داده موجود در خط 1 یکسان باشد تا آکاردئون بداند که اگر روی دکمه دیگری ضربه بزنید، اولی را ببندد.

برای ایجاد دکمه‌های آکاردئونی بیشتر، کافی است خطوط 2 تا 11 را کپی کنید و #collapse1 را در خط 3 و خط 8 را با یک نام منحصر به فرد جایگزین کنید.

آکاردئون رنگی​

html
<div class="accordion" id="accordion-1">
    <div class="card card-style shadow-0 bg-highlight">
        <button class="btn accordion-btn no-effect" data-bs-toggle="collapse" data-bs-target="#collapse1">
            <i class="fa fa-heart color-red2-dark mr-2"></i>
            Accordion description 1
            <i class="fa fa-plus font-10 accordion-icon"></i>
        </button>
        <div id="collapse1" class="collapse bg-theme" data-parent="#accordion-1">
              {/* add your content here */}
        </div>
    </div>
</div>

آکاردئون رنگی دقیقاً بر اساس نسخه معمولی با استثنائات زیر کار میکند
دکمه آکاردئون در خط 3 اکنون در کارتی پیچیده شده است که رنگ پس‌زمینه آن ضمیمه شده است، و محتوای آکاردئون در خط 8 دارای کلاس bg-theme است تا در پس‌زمینه صفحه بماند.

کارت های آکاردئون​

این کارت بر اساس همان المان کارت کار میکند، اما، دکمه اکنون یک کارت پس زمینه است، همانطور که در فصل کارت ها توضیح داده خواهد شد.

آخرین به روز رسانی در تاریخ