شرح اطار uikit وكيفية استخدامه

شرح اطار uikit وكيفية استخدامه

0

شرح اطار uikit وكيفية استخدامه؟

اطار uikit

أهلا بكم متابعي ويب تايمز في مقال جديد عن مكتبة uikit ، وللتذكير بأننا قمنا بتنزيل سابقا مقال او اثنين لشرح معين كنا نستعين بهذه المكتبة ومن هذه المقالات كان شرح اضافة سلايدر ووردبريس بطريقة بسيطة .المميز في هذه المكتبة أنها تتميز بسرعة جيدة وتدعم RTL أي الاتجاهات العربية والعديد من المميزات الاخري .

يمكنك بسهوله اضافة ادوات في موقعك من خلال وضع هذه المكتبة أو هذا الاطار داخل موقعك

شرح اضافة أكواد اطار uikit في موقعك

uikit

تقوم بوضع هذه الأكواد في الهيدر الخاص بالقالب

 

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

 

ثم تقوم بحفظ الأكواد وبهذه الطريقة تكون أضفت هذه المكتبة بنجاح وبدون أي مشاكل ، واريد منك معاينة مميزات واضافات هذه المكتبة بنفسك ، لذلك بعد اضافة أكواد المكتبة قم بانشاء صفحة فارغة وقم بوضع الاكواد التالية لمعاينتهم بنفسك :-

استخدامات المكتبة :-

1- اكورديون

 

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

 

2- رسائل تنبيه ويمكنك اضافتهم عبر هذه الأكواد

alert

<div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

 

3- أزرار بأكثر من لون

button

قم بوضع هذه الأكواد وسيظر لك قائمة أزرار مختلفة

 

<p uk-margin>
    <button class="uk-button uk-button-default">Default</button>
    <button class="uk-button uk-button-primary">Primary</button>
    <button class="uk-button uk-button-secondary">Secondary</button>
    <button class="uk-button uk-button-danger">Danger</button>
    <button class="uk-button uk-button-text">Text</button>
    <button class="uk-button uk-button-link">Link</button>
</p>

 

ويوجد العديد من الاضافات الاخري بالنسبة للأزرار

4- اضافة Card

اضافة كارت بطريقة بسيطة جدا داخل موقعك :-

Card

ويمكنك اضافتهم عبر هذه الأكواد

 

<div class="[email protected] uk-grid-small uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Default</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-primary uk-card-body">
            <h3 class="uk-card-title">Primary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-secondary uk-card-body">
            <h3 class="uk-card-title">Secondary</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

 

5- اضافة سلايد شو

يمكنك اضافة سلايد شو رائع جدا بأكثر من شكل ولمثال للتوضيح قم بوضع هذه الأكواد في صفحة من موقعك في ال HTML

slideshow

 

<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>

    <ul class="uk-slideshow-items">
        <li>
            <img src="images/photo.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/dark.jpg" alt="" uk-cover>
        </li>
        <li>
            <img src="images/light.jpg" alt="" uk-cover>
        </li>
    </ul>

    <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
    <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

</div>

 

ويوجد العديد من الاشكال المختلفة من السلايد شو يمكنك معاينتهم في الموقع الرسمي لمكتبة uikit

6- شريط تقدم – Progress Bar

يحدد أشرطة التقدم التي تشير إلى مدى طول العملية. ولكي تقوم باضافته في مقالاتك او صفحتك او أي شي قم باضافة هذا الكود البسيط داخل موقعك

Progress

 

<progress class="uk-progress" value="" max=""></progress>

 

انتهي مقال اليوم شكرا لمتابعتك للمقال أتمني أن المقال يفيدك ولاتنسي الاشتراك في الأسفل لكي نرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا ! شكرا لزيارتك ويب تايمز قم بمشاركة الموضوع اذا افادك ولا تنسي الاطلاع علي شهاداتي واذا اردت الاستفسار عن أي شي لاتتردد في كتابته في تعليق .

لمتابعي موقع ويب تايمز فقط
سنرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا !
يمكنك إلغاء الاشتراك في أي وقت

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

واحد × 3 =