रेडी-टू-यूज़ यूआई लाइब्रेरी के बिना वेब विकास उतना तेज और कुशल नहीं होगा। आप तर्क दे सकते हैं कि आप एक HTML/CSS निंजा हैं, और मैं आप पर विश्वास करता हूं क्योंकि मैं भी हूं। बहरहाल, पूर्वनिर्धारित स्टाइलिश घटकों का उपयोग करना अभी भी अच्छा है, और इसीलिए हम कुछ सुंदर यूआई पुस्तकालयों की तलाश कर रहे हैं। मेरा नाम मिखाइल इसेव है, और मैं फ्रेमवर्क का लेखक हूं। आज, मैं आपको फ्रेमवर्क के बारे में और इसे SwifWeb के साथ उपयोग करने के तरीके के बारे में बताने जा रहा हूँ। चलो शुरू करें! SwifWeb MaterializeCSS क्या है वह? MaterializeCSS पर आधारित एक आधुनिक उत्तरदायी फ्रंट-एंड फ्रेमवर्क है जिसे Google द्वारा नवाचार और प्रौद्योगिकी के साथ-साथ सफल डिज़ाइन के क्लासिक सिद्धांतों को संयोजित करने के लिए बनाया गया था। मुझे इस रूपरेखा के लिए एक आवरण लिखने में मज़ा आया क्योंकि इसका उपयोग करना बहुत आसान है! मटीरियल डिज़ाइन ओपन-सोर्स स्थापित करने के लिए कैसे? यदि आप SwifWeb में नए हैं तो आपको Webber CLI टूल का उपयोग करके नया प्रोजेक्ट बनाना होगा। प्रोजेक्ट में Package.swift खोलें और सेक्शन को इस तरह दिखने के लिए संपादित करें: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] इसे इस तरह दिखने के लिए अगला संपादित करें: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), फिर खोलें और इस तरह मेथड में कॉन्फ़िगर करें: App.swift didFinishLaunching मटीरियलाइज़ को Lifecycle.didFinishLaunching { Materialize.configure() } यदि आप इसे 🙃 कॉन्फ़िगर करना भूल जाते हैं तो आपको लापता शैलियों का सामना करना पड़ेगा कस्टम थीम: यदि आपने SCSS से एक कस्टम मटेरियलाइज़ शैली तैयार की है तो इसे इस तरह से कॉन्फ़िगर करें: Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") } अपनी कस्टम शैली को में जोड़ें /Sources/App/css/custom-materialize.min.css खोलें और में संसाधनों की घोषणा इस प्रकार करें: Package.swift executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ], resources: [ .copy("css/custom-materialize.min.css"), .copy("css") ]), अब आप UI का निर्माण शुरू करने के लिए तैयार हैं! अवयव मैंने सभी घटकों को स्विफ्ट में खूबसूरती से लपेटा है, लेकिन अगर मैं उन सभी का वर्णन करूं तो लेख बहुत लंबा हो जाएगा। मुझे उनमें से कुछ की जाँच करने दें, और आप बाकी के लिए का उल्लेख कर सकते हैं। गिटहब पर रीडमी बटन आप केवल विधि को कॉल करके किसी भी तत्व को सामग्री बटन के रूप में बना सकते हैं। .materialButton(...) लिंक के लिए तत्व का उपयोग किया जा सकता है, और या अन्य तत्वों का उपयोग हैंडलर के साथ किया जा सकता है। एक Div onClick Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised) दोनों तत्व एक जैसे दिखेंगे, फर्क सिर्फ इतना है कि एक लिंक है और एक लिंक की तरह काम करेगा। A विधि के पास कुछ विकल्प हैं: .materialButton type raised, floating, floatingHalfWay, flat हो सकता है size small, large या कस्टम, डिफ़ॉल्ट रूप से हो सकती हैं waves light, red, yellow, orange, purple, green, teal light बटन को चिह्नित करने के लिए केवल एक ध्वज है, फ्लाई पर इसे बदलने के लिए यहां @State मान पास करें disabled साथ ही आप .addMaterialIcon(...) .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right)) नीचे सामग्री आइकन के बारे में और जानें। फ्लोटिंग एक्शन बटन यह एक निश्चित फ्लोटिंग एक्शन बटन है जिसमें कई क्रियाएं होती हैं। इसके बारे में और पढ़ें। आधिकारिक डॉक्स में FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } वैकल्पिक तर्क और हो सकता है, यह डिफ़ॉल्ट रूप से है size large small large या कस्टम, डिफ़ॉल्ट रूप से हो सकती हैं waves light, red, yellow, orange, purple, green, teal light हो सकती है, यह डिफ़ॉल्ट रूप से है direction top, right, bottom, left top हो सकता है, यह डिफ़ॉल्ट रूप से है mode hover, click, toolbar hover इसे प्रोग्रामेटिक रूप से नियंत्रित करें: lazy var fab = FloatingActionButton(...) fab.open() // to show the menu/toolbar fab.close() // to show the menu/toolbar fab.isOpen // the check if it is open माउस आप ऑब्जेक्ट को इनिशियलाइज़ करके कहीं भी एक आइकन जोड़ सकते हैं। MaterialIcon यह ऑब्जेक्ट आइकन प्रारंभकर्ता तर्क के रूप में स्वीकार करता है। आइकन प्रकारों की सूची उपलब्ध है। प्रकार को यहां MaterialIcon("announcement") आप उस पर विधि कॉल करके बाद में फ्लाई पर आइकन प्रकार बदल सकते हैं। .type(...) वैकल्पिक तरीके स्वीकार करता है .size(...) tiny, small, medium, large स्वीकार करता है .side(...) left, right सभी विधियाँ प्रतिक्रियात्मक @State मान को स्वीकार कर सकती हैं, इसलिए आप चलते-फिरते आइकन और उसके गुणों को बदल सकते हैं। रंग की सूचीबद्ध सभी रंग उनके संशोधक सहित उपलब्ध हैं। आधिकारिक दस्तावेज में पाठ का रंग Span("Hello").textColor(.red) // just red color Span("Hello").textColor(.red.lighten3) // red color with lighten-3 modifier Span("Hello").textColor(.red.darken4) // red color with darken-4 modifier पृष्ठभूमि का रंग Div().materialBackground(.red) // just red color Div().textColor(.red.lighten3) // red color with lighten-3 modifier Div().textColor(.red.darken4) // red color with darken-4 modifier // or Div().red() Div().red(.lighten3) Div().red(.darken4) जाल ग्रिड में मुख्य चीज है जिसकी चौड़ाई और वैकल्पिक संशोधक हैं। कॉलम offest, push, pull Container { Row { Column(.small(.one)) { "1" } // <div class="col s1">1</div> Column(.small(.one)) { "2" } // <div class="col s1">2</div> Column(.small(.one)) { "3" } // <div class="col s1">3</div> Column(.small(.one)) { "4" } // <div class="col s1">4</div> Column(.small(.one)) { "5" } // <div class="col s1">5</div> Column(.small(.one)) { "6" } // <div class="col s1">6</div> Column(.small(.one)) { "7" } // <div class="col s1">7</div> Column(.small(.one)) { "8" } // <div class="col s1">8</div> Column(.small(.one)) { "9" } // <div class="col s1">9</div> Column(.small(.one)) { "10" } // <div class="col s1">10</div> Column(.small(.one)) { "11" } // <div class="col s1">11</div> Column(.small(.one)) { "12" } // <div class="col s1">12</div> } Divider() Row { Column(.small(.twelve)) { "screen-wide" } Column(.small(.six)) { "one-half" } Column(.small(.six)) { "one-half" } } Divider() Row { Column(.small(.twelve)) { "12-columns" } Column(.small(.six, offset: .six)) { "6-columns at the right" } } Divider() Row { Column(.small(.seven, push: .five)) { "7-columns pushed to the right" } Column(.small(.five, pull: .seven)) { "5-columns pulled to the left" } } } ऊपर दिए गए उदाहरण 1:1 हैं जैसे कि आधिकारिक दस्तावेज में, इसलिए आप बस तुलना कर सकते हैं। आप एक से अधिक आकार वर्ग को कॉलम में सेट कर सकते हैं: Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six)) संरेखण लंबवत संरेखण VAlignWrapper { H5("This should be vertically aligned") } पाठ संरेखित H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign() त्वरित तैरता है Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center सामग्री छिपाना/दिखाना Div().hideOnSmallOnly() // Hidden for Mobile Only Div().hideOnMedOnly() // Hidden for Tablet Only Div().hideOnMedAndDown() // Hidden for Tablet and Below Div().hideOnMedAndUp() // Hidden for Tablet and Above Div().hideOnLargeOnly() // Hidden for Desktop Only Div().showOnSmall() // Show for Mobile Only Div().showOnMedium() // Show for Tablet Only Div().showOnLarge() // Show for Desktop Only Div().showOnMediumAndUp() // Show for Tablet and Above Div().showOnMediumAndDown() // Show for Tablet and Below Div().pinned() // Pins element का प्रारूपण काट-छांट H4("This is an extremely long title").truncate() // also with @State मंडराना यह फीचर हॉवर पर बॉक्स शैडो के लिए एनिमेशन जोड़ता है। Card().hoverable() // also with @State ब्राउज़र डिफ़ॉल्ट आप तत्व शैलियों को मूल स्थिति में वापस ला सकते हैं। Ul().browserDefault() इमेजिस उत्तरदायी छवियां Img().src("cool_pic.jpg").responsive() // resizes responsively to page width गोलाकार चित्र Img().src("images/yuna.jpg").circle() // square image that appears circular वीडियो उत्तरदायी एम्बेड Div { IFrame(...) }.videoContainer() उत्तरदायी वीडियो Video { Source().src("movie.mp4").type("video/mp4") }.responsive() नेवबार Navbar { A("Logo") .floatLeft() // align left .floatRight() // align right .floatCenter() // align center } .deepPurple(.lighten4) // background .left() // left aligned links .right() // right aligned links .item("Sass", href: "/sass") .item("Components", href: "/badges") .item("JavaScript", active: true, href: "/collapsible") // as active // dropdown menu .dropdownItem("More", background: .white, hover: false) { DropdownItem("Dropdown 1", color: .red) { Toast.show("Hi") } DropdownItem("Dropdown 2", href: "") } पत्ते Card("Card Title") .blueGrey(.darken1) .textColor(.white) .message("""I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. """) .action("THIS IS A BUTTON") {} .action("THIS IS A LINK", href: "#") preloader परिपत्र PreloaderCircular(colors: .blue, .red, .green, .yellow).active() दुविधा में पड़ा हुआ PreloaderLinearIndeterminate() पक्का @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value) पृष्ठ पर अंक लगाना Pagination() .back(disabled: true, icon: "chevron_left") {} .item(1, href: "#1") .item(2, href: "#2") .item(3) { Toast.show("Going to 3!") } .forward() { Toast.show("Going forward!", rounded: true) } इतना ही ठीक है, मैंने लगभग ~20% फ्रेमवर्क का वर्णन किया है। यदि आप मटेरियलाइज सीएसएस से परिचित हैं तो आप देख सकते हैं कि इसका प्रतिनिधित्व उपयोग करने में बहुत आसान है! स्विफ्ट और जानना चाहते हैं? आने वाले लेखों के लिए बने रहें! कोई भी प्रश्न पूछने में संकोच न करें और बेझिझक योगदान दें! हमारे डिस्कॉर्ड में
