עיצוב מותנה של אלמנטים נבחרים במיכל רשת

לוחות שנה, עגלות קניות, גלריות, סיירי קבצים וספריות מקוונות הם מצבים שבהם פריטים לבחירה מוצגים ברשתות (כלומר סריג מרובעים). אתה יודע, אפילו הבדיקות האבטחה שמבקשות ממך לבחור את כל התמונות עם מעברי חצייה או כל דבר אחר.

מצאתי דרך מסודרת להציג אפשרויות לבחירה ברשת. לא, לא ליצור מחדש את ה-reCAPTCHA הזה, אלא פשוט להיות מסוגל לבחור מספר פריטים. וכאשר נבחרים שני פריטים צמודים או יותר, נוכל להשתמש בחוכמה :nth-of-type קומבינטורים, אלמנטים פסאודו וה- :checked פסאודו-קלאס כדי לעצב אותם בצורה שבה הם נראים מקובצים יחד.

כל הרעיון של קומבינטורים ופסאודו כדי לקבל את תיבות הסימון המעוגלות הגיע מא מאמר קודם שכתבתי. זה היה עיצוב פשוט של עמודה אחת:

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

לפני שאנחנו מתחילים…

זה יהיה שימושי עבורך לשים לב לכמה דברים. לדוגמה, אני משתמש ב-HTML ו-CSS סטטיים בהדגמה שלי למען הפשטות. בהתאם ליישום שלך ייתכן שיהיה עליך ליצור את הרשת ואת הפריטים בה באופן דינמי. אני משאיר בדיקות מעשיות לגבי נגישות כדי להתמקד באפקט, אבל בהחלט היית רוצה לשקול דברים כאלה בסביבת ייצור.

כמו כן, אני משתמש ב-CSS Grid עבור הפריסה. אני ממליץ על אותו הדבר אבל, כמובן, זו העדפה אישית בלבד והקילומטראז' שלך עשוי להשתנות. עבורי, השימוש ברשת מאפשר לי להשתמש בקלות בבוררי אחים כדי למקד לפריט ::before ו ::after פסאודו.

לפיכך, בכל תקן פריסה שתרצה להשתמש ביישום שלך, ודא שעדיין ניתן למקד את הפסאודו ב-CSS והבטיח שהפריסה תישאר בטקט בדפדפנים ובמסכים שונים.

בוא נתחיל עכשיו

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

האיור הבא מראה כיצד ::before פסאודו-אלמנטים של תיבות בכל אחת סקירה (למעט העמודה הראשונה) חופפים את התיבות משמאלן, וכיצד ::after פסאודו-אלמנטים של תיבות בכל אחת שורה (למעט השורה הראשונה) חופפים את התיבות שלמעלה.

הנה קוד הבסיס

הסימון די פשוט:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

יש עוד קצת קורה ב-CSS הראשוני. אבל, ראשית, הרשת עצמה:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

זוהי רשת של חמש שורות וארבע עמודות המכילות תיבות סימון. החלטתי למחוק את מראה ברירת המחדל של תיבות הסימון, ואז לתת להן רקע אפור בהיר משלי וגבולות סופר מעוגלים:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

שימו לב גם שתיבות הסימון עצמן הן רשתות. זה המפתח למיקום שלהם ::before ו ::after פסאודו-אלמנטים. אם כבר מדברים על זה, בואו נעשה את זה עכשיו:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

אנו בוחרים רק את הפסאודו-אלמנטים של תיבות סימון שאינן בעמודה הראשונה או בשורה הראשונה של הרשת. input:not(:nth-of-type(4n+1)) מתחיל בתיבת הסימון הראשונה, ולאחר מכן בוחר את ::before של כל פריט רביעי משם. אבל שימו לב שאנחנו אומרים :not(), אז בעצם מה שאנחנו עושים זה דילוג מה היא ::before פסאודו-אלמנט של כל תיבת סימון רביעית, החל מהראשונה. לאחר מכן אנו מיישמים סגנונות על ::after פסאודו של כל תיבת סימון מהחמישית.

עכשיו אנחנו יכולים לסגנן את שניהם ::before ו ::after פסאודו עבור כל תיבת סימון שאינה בעמודה או בשורה הראשונה של הרשת, כך שהם מוזזים שמאלה או למעלה, בהתאמה, ומסתירים אותם כברירת מחדל.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

סטיילינג את :checked היו

עכשיו מגיע עיצוב תיבות הסימון כשהן נמצאות ב :checked מדינה. ראשית, בואו ניתן להם צבע, נגיד א limegreen רקע כללי:

input:checked { background: limegreen; }

תיבה מסומנת אמורה להיות מסוגלת לעצב מחדש את כל תיבות הסימון הסמוכות שלה. במילים אחרות, אם נבחר את תיבת הסימון האחת עשרה ברשת, נוכל גם לעצב את התיבות המקיפות אותה בחלק העליון, התחתון, השמאלי והימני.

זה נעשה על ידי מיקוד לפסאודו-אלמנטים הנכונים. איך אנחנו עושים את זה? ובכן, זה תלוי במספר האמיתי של העמודות ברשת. הנה ה-CSS אם שתי תיבות סמוכות מסומנות ברשת של 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

אם אתה מעדיף אתה יכול ליצור את הקוד לעיל באופן דינמי. עם זאת, רשת טיפוסית, נניח גלריית תמונות, מספר העמודות יהיה קטן וכנראה מספר קבוע של פריטים, בעוד שהשורות עשויות להמשיך לגדול. במיוחד אם מיועד למסכים ניידים. זו הסיבה שגישה זו היא עדיין דרך יעילה. אם מסיבה כלשהי לאפליקציה שלך יש שורות מוגבלות ועמודות מתרחבות, שקול לסובב את הרשת הצידה מכיוון שעם זרם של פריטים, CSS Grid מסדר אותם משמאל לימין ומלמעלה למטה (כלומר שורה אחר שורה) .

אנחנו צריכים גם להוסיף סגנון עבור תיבות הסימון האחרונות ברשת - לא כולן מכוסות על ידי אלמנטים פסאודו שכן הם הפריטים האחרונים בכל ציר.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

אלה כמה בוררים מסובכים! הראשון…

input:nth-of-type(4n-1):checked + input:checked

... בעצם אומר את זה:

א בדוק <input> רכיב ליד מסומן <input> בעמודה השנייה האחרונה.

ו nth-of-type מחושב כך:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

אז, אנחנו מתחילים בתיבת הסימון השלישית ובוחרים כל רביעית משם. ואם תיבת סימון ברצף הזה מסומנת, אז אנחנו מעצבים גם את תיבות הסימון הצמודות, אם הן מסומנות גם.

והשורה הזו:

input:nth-of-type(4n):checked + * + * + * + input:checked

אומר את זה:

An <input> אלמנט בתנאי שמסומן, צמוד ישירות לאלמנט, אשר צמוד ישירות לאלמנט אחר, שגם הוא צמוד ישירות לאלמנט אחר, אשר, בתורו, צמוד ישירות לאלמנט אחר. <input> אלמנט שנמצא במצב מסומן.

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

מכניס אותו לשימוש

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

השתמשתי בגבולות מעוגלים, אבל אתה יכול לנסות צורות אחרות או אפילו להתנסות עם אפקטי רקע (תמני דאג לרעיונות). עכשיו כשאתה יודע איך הנוסחה עובדת, השאר תלוי בדמיון שלך.

הנה דוגמה של איך זה עשוי להיראות בלוח שנה פשוט:

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

---

סיימנו! די מסודר, נכון? כלומר, אין שום דבר "חדש" במה שקורה. אבל זו דוגמה טובה לכך בחירת דברים ב-CSS. אם יש לנו שליטה על טכניקות בחירה מתקדמות יותר המשתמשות בקומבינטורים ופסאודו, אז כוחות הסטיילינג שלנו יכולים להגיע הרבה מעבר לעיצוב פריט אחד - כפי שראינו, אנו יכולים לסגנן פריטים בהתאם למצבו של אלמנט אחר.

---

עיצוב מותנה של אלמנטים נבחרים במיכל רשת פורסם במקור ב CSS-טריקים. אתה צריך לקבל את הניוזלטר.

• Coinsmart. בורסת הביטקוין והקריפטו הטובה באירופה.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה חופשית.
• CryptoHawk. רדאר אלטקוין. ניסיון חינם.
• מקור: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/