הקנבס

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

תצוגה מקדימה וקוד

• תצוגה מקדימה מציגה את המסך העובד.
• קוד מציג את קוד ה-React של הגרסה שבקנבס. הוא לקריאה בלבד; בחרו העתקת קוד כדי להעתיק אותו.

רוחב מחשב, טאבלט ונייד

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

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

מדידת מרווחים

בוחרים מדידת מרווחים (סמל הסרגל) כדי לבדוק מרווחים כמו בכלי עיצוב. אפשר גם להחזיק את Alt (Option ב-Mac) מעל הקנבס בלי להפעיל את הכלי.

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

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

טעינה מחדש

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

גרסאות

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

• ביטול מציג את הגרסה הקודמת, וביצוע מחדש את הבאה. אפשר גם להקיש ⌘+Z ו-⌘+Shift+Z (Ctrl ב-Windows) כשאתם לא מקלידים בשדה. הגרסה מתחלפת בלי לטעון מחדש את סביבת העבודה.
• הבקשה הבאה שלכם מעדכנת את הגרסה שמוצגת בקנבס, כך שאפשר לחזור אחורה ולבחור כיוון אחר.
• אב טיפוס שמור שומר עד 20 מהגרסאות האחרונות שלו.

השוואת גרסאות

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

• בחרו כל שתי גרסאות ברשימות לפני ואחרי.
• גררו את קו ההפרדה, או העבירו אליו את המיקוד והשתמשו במקשי החצים (החזיקו Shift לצעדים גדולים יותר, ו-Home ו-End לקצוות).
• חזרה לגרסת "לפני" מציגה את גרסת "לפני" בקנבס, כך שהבקשה הבאה שלכם תעדכן אותה.
• בחרו סיום או הקישו Esc כדי לצאת.

תצוגה מקדימה בהירה וכהה

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

תצוגה מקדימה בשפה אחרת

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

• המודל שלכם מתרגם. Vibr שולח את הטקסט הגלוי של הטיוטה למודל שבחרתם, עם המפתח שלכם, כמה עשרות מחרוזות בכל פעם. טקסט חדש, כמו מונה שעולה, מתורגם כשהוא מופיע. כל מחרוזת מתורגמת פעם אחת בכל סשן.
• מימין לשמאל. טיוטות חדשות משתמשות במאפיינים לוגיים, כמו marginInlineStart, שמתהפכים מעצמם. כשערבית או עברית פעילות, הסקירה מחפשת גם סגנונות שמשתמשים ב-left או ב-right וחצים שלא יתהפכו, והתיקון מטפל בהם לפני שהטיוטה מוצגת. טיוטה שנוצרה לפני שהחלפתם שפה מקבלת במקום זאת הודעה, עם תיקון לכתיבה מימין לשמאל.
• פסאודו לא צריך מודל. הוא מוסיף סימנים מיוחדים לכל אות ומאריך את הטקסט בכ-40%, כמו שקורה לעתים קרובות בגרמנית או בפינית, כך שתוויות חתוכות ורוחבים קבועים מתגלים מיד.
• דוגמאות לא צריכות מפתח. הדוגמאות קיימות בכל השפות של Vibr, כך שתצוגה מקדימה של דוגמה בכל אחת מהן, כולל ערבית ועברית, עובדת בלי מפתח. שפות אחרות, וטקסט שמוסיפים לדוגמה, מתורגמים על ידי המודל שלכם.
• ייצוא בשפה הזו. כששפה פעילה, תפריט הייצוא מוסיף את האפשרות אפליקציה בשפה הזו. הדף המיוצא נפתח בשפה, עם הכיוון שלה, ומתרגם גם את שאר הטקסט של הטיוטה, כמו כרטיסיות וחלונות דו-שיח אחרים. ייצואים אחרים שומרים על הטקסט המקורי של הטיוטה.
• גופנים. אם בגופן שייבאתם אין את האותיות של השפה, הודעה מציינת כמה מהן ומציעה גופנים דומים מ-Google Fonts שיש בהם. שימוש ב… מוסיף אחד מהם לסולם הטיפוגרפי של הגופן כגופן חלופי, כך שהקנבס והאפליקציות המיוצאות טוענים אותו.
• בחרו הטקסט המקורי של הטיוטה כדי לחזור.

קישורים בקנבס

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

בטלפון

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