רכיבי נודוקו מבוססי Flowbite

נכון לעכשיו, ערכת רכיבי Nodoku המבוססת על Flowbite כוללת את האלמנטים הבאים:

כותרת Nav Flowbite

Category Value
name flowbite/nav-header
number of consumable content blocks 1
schema file location schemas/nodoku-flowbite/schemas/components/nav-header/visual-schema.json
default theme file location schemas/nodoku-flowbite/schemas/components/nav-header/default-theme.yml
client side components language-switcher, user-account

Nav-Header הוא רכיב המציג כותרת ניווט של דף או אתר

רכיב זה צורך בלוק תוכן אחד בדיוק, ובלוק תוכן זה אמור להיות בעל התכונות הבאות

  • רכיב הכותרת H1 של בלוק התוכן צריך להיות בעל הערך המוגדר מראש " {Brand} "
  • תמונה, המציינת את לוגו החברה
  • פסקה אחת בעלת הצורה הבאה: {companyName} שם חברה
  • רשימה אחת של פריטי תפריט, שעשויות להיות עם רשימות משנה

ה-Nav-Header יכול גם לקבל שני רכיבים בצד הלקוח:

  • מחליף שפה
    • רכיב בצד הלקוח המייצג כפתור לשינוי שפת הדף
  • חשבון משתמש
    • רכיב בצד הלקוח המייצג כפתור, לחיצה עליו משתמש יכול להתחבר/לצאת, או לקבל גישה לפרופיל אישי

קרוסלת Flowbite

Category Value
name flowbite/carousel
number of consumable content blocks unlimited
schema file location schemas/nodoku-flowbite/schemas/components/carousel/visual-schema.json
optoins schema file location schemas/nodoku-flowbite/schemas/components/carousel/options-schema.json
default theme file location schemas/nodoku-flowbite/schemas/components/carousel/default-theme.yml
client side components none

Flowbite Carousel הוא אלמנט המציג את התוכן כשקופיות משתנות.

הוא תומך בכיווני ההחלקה הבאים:

  • אופקי
    • animationType: slide-x
  • אֲנָכִי
    • animationType: slide-y
  • דוֹהֶה
    • animationType: fade-in-fade-out

רכיב זה יכול לצרוך כל מספר של בלוקי תוכן , כל בלוק תוכן מגדיר שקופית בודדת.

אתה יכול להתאים אישית את המראה של כל שקופית, כולל צבע רקע ותמונת רקע באמצעות אפשרות התאמה אישית של ערכות נושא , באופן הבא:

  - row:
      components:
        - flowbite/carousel:
            themes:
              - bgColorStyle:
                  decoration: text-center dark:bg-red-700 bg-red-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-orange-700 bg-orange-300 p-5
              - bgColorStyle:
                  decoration: text-center dark:bg-cyan-700 bg-cyan-300 p-5
            selector:
              attributes:
                sectionName: components-flowbite-carousel-showcase

Flowbite Jumbotron

Category Value
name flowbite/jumbotron
number of consumable content blocks 1
schema file location schemas/nodoku-flowbite/schemas/components/jumbotron/visual-schema.json
default theme file location schemas/nodoku-flowbite/schemas/components/jumbotron/default-theme.yml
client side components none

כותרת ג'מבוטרון

כותרת המשנה של Jumbotron

פסקה ראשונה של Jumbotron

ג'מבוטרון פסקה שנייה

פסקה שלישית של ג'מבוטרון

קריאה לפעולה 1קריאה לפעולה 2

כרטיס Flowbite

Category Value
name flowbite/card
number of consumable content blocks 1
schema file location schemas/nodoku-flowbite/schemas/components/card/visual-schema.json
default theme file location schemas/nodoku-flowbite/schemas/components/card/default-theme.yml
client side components none

כל כרטיס מייצג בדיוק גוש תוכן אחד.

בלוק התוכן חייב לכלול תמונה אחת, מכיוון שזו התמונה המשמשת להצגת הכרטיס.

אם ספק התמונות, שסופק ל-RenderingPage, תומך בהצגת אייקונים, במקום תמונה ניתן לציין אייקון, המקודד באופן הבא:

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )

כותרת כרטיס 1

כותרת משנה של קלף 1

קלף 1 פסקה ראשונה

כרטיס 1 פסקה שנייה

כרטיס 1 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2

כותרת כרטיס 2

כותרת משנה של קלף 2

קלף 2 פסקה ראשונה

כרטיס 2 פסקה שנייה

כרטיס 2 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2

כותרת קלף 3

כותרת משנה של קלף 3

קלף 3 פסקה ראשונה

כרטיס 3 פסקה שנייה

קלף 3 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2

כרטיס Flowbite אופקי

Category Value
name flowbite/horizontal-card
number of consumable content blocks 1
schema file location schemas/nodoku-flowbite/schemas/components/horizontal-card/visual-schema.json
default theme file location schemas/nodoku-flowbite/schemas/components/horizontal-card/default-theme.yml
client side components none

כל כרטיס מייצג בדיוק גוש תוכן אחד.

בלוק התוכן חייב לכלול תמונה אחת, מכיוון שזו התמונה המשמשת להצגת הכרטיס.

אם ספק התמונות, שסופק ל-RenderingPage, תומך בהצגת אייקונים, במקום תמונה ניתן לציין אייקון, המקודד באופן הבא:

![card-1](icon:nd-react-icons/hi:HiOutlineEmojiHappy )
כותרת כרטיס 1
כותרת משנה של קלף 1

קלף 1 פסקה ראשונה

כרטיס 1 פסקה שנייה

כרטיס 1 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2
כותרת כרטיס 2
כותרת משנה של קלף 2

קלף 2 פסקה ראשונה

כרטיס 2 פסקה שנייה

כרטיס 2 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2
כותרת קלף 3
כותרת משנה של קלף 3

קלף 3 פסקה ראשונה

כרטיס 3 פסקה שנייה

קלף 3 פסקה שלישית

קריאה לפעולה 1קריאה לפעולה 2

ייחוסים

אתר זה משתמש ברכיבים הבאים מתרומות יצירתיות של צד שלישי:

גופנים ואייקונים מאת

Font Awesome 6 - https://fontawesome.com/ רישיון: CC BY 4.0 License https://creativecommons.org/licenses/by/4.0/

Heroicons - https://github.com/tailwindlabs/heroicons רישיון: MIT https://opensource.org/licenses/MIT

סמלי עיצוב חומרי - http://google.github.io/material-design-icons/ רישיון: Apache License Version 2.0 https://github.com/google/material-design-icons/blob/master/LICENSE

תמונות מאת

תמונה מאת freepik תמונה מאת freepik תמונה מאת freepik תמונה מאת freepik תמונה מאת freepik תמונה מאת freepik תמונה מאת freepik