ব্যবহারের জন্য প্রস্তুত UI লাইব্রেরি ছাড়া ওয়েব বিকাশ তত দ্রুত এবং দক্ষ হবে না। আপনি যুক্তি দিতে পারেন যে আপনি একজন HTML/CSS নিনজা, এবং আমি আপনাকে বিশ্বাস করি কারণ আমিও তাই। তবুও, পূর্বনির্ধারিত আড়ম্বরপূর্ণ উপাদানগুলি ব্যবহার করা এখনও দুর্দান্ত, এবং সেই কারণেই আমরা কিছু সুন্দর UI লাইব্রেরি খুঁজছি।

আমার নাম মিখাইল ইসায়েভ, এবং আমি সুইফওয়েব ফ্রেমওয়ার্কের লেখক। আজ, আমি আপনাকে MaterializeCSS ফ্রেমওয়ার্ক এবং এটি কিভাবে SwifWeb এর সাথে ব্যবহার করতে হয় সে সম্পর্কে বলতে যাচ্ছি। চল শুরু করি!

এটা কি?

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 হতে পারে

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: "#")

প্রিলোডার

বৃত্তাকার

 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 এর সাথে পরিচিত হন তবে আপনি লক্ষ্য করতে পারেন যে এর সুইফট উপস্থাপনা ব্যবহার করা অনেক সহজ!

আরও শিখতে চান? আসন্ন নিবন্ধের জন্য টিউন থাকুন!