130 lines
4.0 KiB
Markdown
130 lines
4.0 KiB
Markdown
# MaterialSB
|
|
|
|
<p align="center">
|
|
<img src="https://lastlife.net/MaterialSB/assets/images/Logo.png" alt="MaterialSB Logo" />
|
|
</p>
|
|
|
|
<p align="center">
|
|
<strong>Material Design UI components for SpiderBasic</strong>
|
|
</p>
|
|
|
|
<p align="center">
|
|
<a href="https://lastlife.net/MaterialSB/index.html">Documentation</a> •
|
|
<a href="https://lastlife.net/MaterialSB/pages/quickstart.html">Quick Start</a> •
|
|
<a href="https://lastlife.net/MaterialSB/pages/documentation.html">API Reference</a> •
|
|
<a href="https://git.lastlife.net/LastLife/MaterialSB/releases">Download</a>
|
|
</p>
|
|
|
|
---
|
|
|
|
MaterialSB is a library for SpiderBasic that replaces the default UI elements with [Materialize](https://materializeweb.com/), a modern responsive front-end framework based on Google's Material Design.
|
|
|
|
## ✨ Features
|
|
|
|
- **Material Design** — Beautiful, modern UI components following Google's design guidelines
|
|
- **Responsive Grid** — 12-column grid system that adapts to any screen size
|
|
- **Dark & Light Themes** — Built-in theme support with easy toggling
|
|
- **70+ Components** — Buttons, cards, modals, forms, navbars, tables, and more
|
|
- **Easy to Use** — Simple, intuitive API designed for SpiderBasic developers
|
|
- **No JavaScript Required** — Write pure SpiderBasic code, MaterialSB handles the rest
|
|
|
|
## 📦 Installation
|
|
|
|
1. Download the latest release from the [releases page](https://git.lastlife.net/LastLife/MaterialSB/releases)
|
|
2. Extract the archive to your project directory
|
|
3. Copy the `LocalFiles` folder to your application's Resource directory
|
|
4. Include `MaterialSB.sbi` in your source code
|
|
|
|
```
|
|
MyProject/
|
|
├── MyApp.sb
|
|
├── MaterialSB/
|
|
│ └── MaterialSB.sbi
|
|
└── Resources/
|
|
└── LocalFiles/
|
|
├── CSS/
|
|
└── JS/
|
|
```
|
|
|
|
## 🚀 Quick Start
|
|
|
|
```basic
|
|
IncludeFile "MaterialSB.sbi"
|
|
|
|
Procedure OnClick()
|
|
MaterialSB::Toast("It works!", 3000)
|
|
EndProcedure
|
|
|
|
Procedure Main(Success)
|
|
If Success
|
|
MaterialSB::Row(MaterialSB::#Grid_Container)
|
|
MaterialSB::Col(12)
|
|
MaterialSB::Append(MaterialSB::Header("Hello, MaterialSB!", 2))
|
|
MaterialSB::Button("Click Me", @OnClick())
|
|
MaterialSB::CloseCurrentParent()
|
|
MaterialSB::CloseCurrentParent()
|
|
EndIf
|
|
EndProcedure
|
|
|
|
MaterialSB::Download(@Main())
|
|
```
|
|
|
|
## 🧩 Components
|
|
|
|
| Category | Components |
|
|
|----------|------------|
|
|
| **Layout** | Grid (Row, Col), Container |
|
|
| **Navigation** | Navbar, Sidenav, Tabs |
|
|
| **Content** | Cards, Tables, Carousel, Media |
|
|
| **Forms** | TextInput, Textarea, Checkbox, Radio, Switch, Dropdown, Range |
|
|
| **Feedback** | Modal, Toast |
|
|
| **Actions** | Button (6 variants) |
|
|
|
|
## 🎨 Theming
|
|
|
|
MaterialSB includes dark theme by default. Toggle between themes with a single line:
|
|
|
|
```basic
|
|
; Switch to light theme
|
|
MaterialSB::SetDarkTheme(#False)
|
|
|
|
; Switch to dark theme
|
|
MaterialSB::SetDarkTheme(#True)
|
|
```
|
|
|
|
Use Material Design colors throughout your app:
|
|
|
|
```basic
|
|
MaterialSB::Append(MaterialSB::Paragraph("Success!", MaterialSB::#Color_Green))
|
|
MaterialSB::Toast("Warning", 3000, MaterialSB::#Toast_Default, MaterialSB::#Color_Orange)
|
|
```
|
|
|
|
## 📖 Documentation
|
|
|
|
Full documentation is available at **[lastlife.net/MaterialSB](https://lastlife.net/MaterialSB/index.html)**
|
|
|
|
- [Quick Start Guide](https://lastlife.net/MaterialSB/pages/quickstart.html) — Get up and running in minutes
|
|
- [API Reference](https://lastlife.net/MaterialSB/pages/documentation.html) — Complete function documentation
|
|
- [Examples](https://lastlife.net/MaterialSB/pages/examples.html) — Working code examples
|
|
|
|
## 📋 Requirements
|
|
|
|
- SpiderBasic 3.x or later
|
|
- Modern web browser (Chrome, Firefox, Edge, Safari)
|
|
|
|
## 🙏 Credits
|
|
|
|
- [MaterializeCSS](https://materializeweb.com/) — The CSS framework that powers MaterialSB
|
|
- [Material Icons](https://fonts.google.com/icons) — Google's icon font
|
|
- [SpiderBasic](https://www.spiderbasic.com/) — The BASIC language for web development
|
|
|
|
## 📄 License
|
|
|
|
MaterialSB is released under the MIT License. See [LICENSE](LICENSE) for details.
|
|
|
|
---
|
|
|
|
<p align="center">
|
|
Made with ❤️ for the SpiderBasic community
|
|
</p>
|