การออกแบบส่วนประกอบ
การออกแบบส่วนประกอบกราฟิกสำหรับเว็บแอปพลิเคชัน
เป็นไปได้ที่จะวางองค์ประกอบบนพื้นที่ว่างของผืนผ้าใบอย่างง่ายๆ แต่ควรพยายามทำให้ทุกอย่างเรียบร้อยและเป็นระเบียบทันที ดังนั้น เริ่มต้นด้วยการออกแบบพื้นที่ทำงาน มาเพิ่มส่วนประกอบ ( Container ) ลงในผืนผ้าใบที่เราจะวางองค์ประกอบอื่นๆ ทั้งหมด หลังจากเพิ่มแล้ว คุณควรคลิกที่ไอคอนรูปเฟืองและดำเนินการกำหนดค่าของคอนเทนเนอร์นี้
การตั้งค่าคอนเทนเนอร์
มาดูการตั้งค่าที่มีอยู่กัน
- Name - ชื่อที่เราสามารถอ้างถึงคอนเทนเนอร์นี้ในกระบวนการทางธุรกิจของแอปพลิเคชัน ตัวอย่างเช่น หากเราต้องการสร้างกระบวนการทางธุรกิจเพื่อเปลี่ยนการตั้งค่าบางอย่างของคอนเทนเนอร์นี้
- Direction - ทิศทางที่จะวางองค์ประกอบภายในภาชนะที่กำหนด ในแนวนอน ถ้าคุณต้องการจัดเรียงในแถว เรียงต่อกัน หรือในทางกลับกัน ในแนวตั้ง เมื่อองค์ประกอบอยู่ใต้กันและกัน
- Wrap - การตั้งค่าเอาต์พุตขององค์ประกอบ ควรอยู่ในบรรทัดเดียวกัน (ตอนนี้) หรือสามารถห่อได้ (ห่อ)
- การ Alignment - องค์ประกอบในคอนเทนเนอร์ควรจัดตำแหน่งอย่างไร (การตั้งค่าแยกต่างหากสำหรับการจัดตำแหน่งแนวนอนและแนวตั้ง)
- Size - ขนาดภาชนะ สามารถกำหนดเป็นเปอร์เซ็นต์ของพื้นที่ว่างหรือกำหนดขนาดพิกเซลตายตัวได้
- Max Width สูงสุด -ความกว้างสูงสุดที่อนุญาต (ในกรณีที่ไม่ได้ตั้งค่าอย่างเคร่งครัดและแตกต่างกันไปตามเนื้อหา)
- Margin/Padding - เยื้องจากขอบคอนเทนเนอร์ ภายนอกหรือภายในตามลำดับ.
- Image, Gradient or Overlay (Background color) - ความสามารถในการตั้งค่าพื้นหลังที่ต้องการ คุณสามารถเลือกสีเฉพาะ (หรือการผสมสีต่างๆ ด้วยการไล่ระดับสี) หรือเลือกรูปภาพพื้นหลัง
- เส้น Border - การเลือกกรอบและลักษณะที่ปรากฏ (สี ความหนา รัศมีการปัดเศษ)
- Visible ได้ - การมองเห็นขององค์ประกอบ (เช่นเดียวกับองค์ประกอบที่ซ้อนกันทั้งหมด)
การตั้งค่าที่เลือกสามารถดูได้ในภาพหน้าจอ แน่นอน คุณสามารถทดลองและเปลี่ยนแปลงได้ โดยเลือกการออกแบบที่เป็นเอกลักษณ์ของคุณ
มาเพิ่มอีกอันในคอนเทนเนอร์ที่สร้างขึ้น เราจะเพิ่มช่องป้อนข้อมูลที่จำเป็นลงไป ตั้งค่าเป็นแนวตั้ง จัดกึ่งกลาง ความกว้าง 40% และระยะห่างจากขอบด้านซ้าย (ระยะห่างจากขอบด้านซ้าย 20px)
ส่วนประกอบของแอปพลิเคชัน
จากนั้นเพิ่มส่วนประกอบลงในคอนเทนเนอร์ กระบวนการทางธุรกิจของเรายอมรับจำนวนสองประเภท float ในการป้อนข้อมูล คุณต้องเพิ่มองค์ประกอบ Input สองรายการ ( float ) Button ซึ่งจะเริ่มกระบวนการคำนวณ และทำการปรับภาพเล็กน้อยเพื่อเซ็น Label
มาเพิ่มอีกบล็อกที่เราจะเซ็นชื่อสิ่งที่เราวางแผนจะคำนวณโดยทั่วไป (ผลรวม การลบ ฯลฯ) ตั้งค่าความกว้างเป็น 30% โดยให้องค์ประกอบจัดเรียงในแนวตั้ง กึ่งกลาง และชิดขวา ( end/center ) มาเพิ่มส่วนประกอบ Label 5 รายการลงในคอนเทนเนอร์และเปลี่ยนข้อความเป็นองค์ประกอบที่ต้องการทันที
ขั้นตอนสุดท้ายในการออกแบบภาพคือการเพิ่มคอนเทนเนอร์อื่นเพื่อแสดงผลการคำนวณ เราเพิ่มมันโดยการเปรียบเทียบกับคอนเทนเนอร์ก่อนหน้า แต่เราตั้งค่าการจัดตำแหน่งไปทางขวาโดยมีการเติมช่องว่างเล็ก ๆ ทางด้านซ้าย คุณลักษณะของคอนเทนเนอร์นี้คือในตอนแรกจะมองไม่เห็น (ปิดสวิตช์ที่ Visible ได้) เรามาเปิดใช้งานในขณะที่เรามีผลการคำนวณ มาเพิ่มส่วนประกอบ Label 5 รายการเข้าไป และเราไม่จำเป็นต้องเปลี่ยนข้อความด้วยซ้ำเพราะบล็อกยังมองไม่เห็น (สิ่งสำคัญคือการตั้ง Name เพื่อให้คุณสามารถระบุองค์ประกอบที่จำเป็นเมื่อสร้างกระบวนการทางธุรกิจ)
หากทุกอย่างถูกต้องเราจะเห็นผลลัพธ์ต่อไปนี้ในนักออกแบบเว็บไซต์:
และสิ่งนี้ในแอปที่เผยแพร่:
