रेडी-टू-यूज़ यूआई लाइब्रेरी के बिना वेब विकास उतना तेज और कुशल नहीं होगा। आप तर्क दे सकते हैं कि आप एक HTML/CSS निंजा हैं, और मैं आप पर विश्वास करता हूं क्योंकि मैं भी हूं। बहरहाल, पूर्वनिर्धारित स्टाइलिश घटकों का उपयोग करना अभी भी अच्छा है, और इसीलिए हम कुछ सुंदर यूआई पुस्तकालयों की तलाश कर रहे हैं।

मेरा नाम मिखाइल इसेव है, और मैं SwifWeb फ्रेमवर्क का लेखक हूं। आज, मैं आपको MaterializeCSS फ्रेमवर्क के बारे में और इसे SwifWeb के साथ उपयोग करने के तरीके के बारे में बताने जा रहा हूँ। चलो शुरू करें!

क्या है वह?

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 हो सकती हैं

disabled बटन को चिह्नित करने के लिए केवल एक ध्वज है, फ्लाई पर इसे बदलने के लिए यहां @State मान पास करें

साथ ही आप .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% फ्रेमवर्क का वर्णन किया है।

यदि आप मटेरियलाइज सीएसएस से परिचित हैं तो आप देख सकते हैं कि इसका स्विफ्ट प्रतिनिधित्व उपयोग करने में बहुत आसान है!

और जानना चाहते हैं? आने वाले लेखों के लिए बने रहें!