ব্যবহারের জন্য প্রস্তুত UI লাইব্রেরি ছাড়া ওয়েব বিকাশ তত দ্রুত এবং দক্ষ হবে না। আপনি যুক্তি দিতে পারেন যে আপনি একজন HTML/CSS নিনজা, এবং আমি আপনাকে বিশ্বাস করি কারণ আমিও তাই। তবুও, পূর্বনির্ধারিত আড়ম্বরপূর্ণ উপাদানগুলি ব্যবহার করা এখনও দুর্দান্ত, এবং সেই কারণেই আমরা কিছু সুন্দর UI লাইব্রেরি খুঁজছি। আমার নাম মিখাইল ইসায়েভ, এবং আমি ফ্রেমওয়ার্কের লেখক। আজ, আমি আপনাকে ফ্রেমওয়ার্ক এবং এটি কিভাবে SwifWeb এর সাথে ব্যবহার করতে হয় সে সম্পর্কে বলতে যাচ্ছি। চল শুরু করি! সুইফওয়েব MaterializeCSS এটা কি? MaterializeCSS হল উপর ভিত্তি করে একটি আধুনিক প্রতিক্রিয়াশীল ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google দ্বারা উদ্ভাবন এবং প্রযুক্তির সাথে সফল ডিজাইনের ক্লাসিক নীতিগুলিকে একত্রিত করার জন্য তৈরি করা হয়েছে। আমি এই কাঠামোর জন্য একটি মোড়ক লেখা উপভোগ করেছি কারণ এটি ব্যবহার করা খুব সহজ! মেটেরিয়াল ডিজাইনের ওপেন-সোর্স কিভাবে ইনস্টল করতে হবে? আপনি যদি SwifWeb এ নতুন হন তাহলে আপনাকে ওয়েবার 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: "#") প্রিলোডার বৃত্তাকার 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% বর্ণনা করেছি। আপনি যদি Materialize CSS এর সাথে পরিচিত হন তবে আপনি লক্ষ্য করতে পারেন যে এর উপস্থাপনা ব্যবহার করা অনেক সহজ! সুইফট আরও শিখতে চান? আসন্ন নিবন্ধের জন্য টিউন থাকুন! কোনো প্রশ্ন জিজ্ঞাসা করতে দ্বিধা করবেন না এবং অবদান রাখতে দ্বিধা করবেন না! আমাদের ডিসকর্ডে
