Compare commits
No commits in common. "main" and "V1.0" have entirely different histories.
126
README.md
126
README.md
@ -1,127 +1,3 @@
|
|||||||
# MaterialSB
|
# MaterialSB
|
||||||
|
|
||||||
<p align="center">
|
MaterialSB is a library for SpiderBasic that replaces all UI elements with Materialize, a framework based on the design system created by Google.
|
||||||
<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.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://git.lastlife.net/LastLife/MaterialSB/src/branch/main/Example_Card.sb) — 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
|
|
||||||
|
|
||||||
## 📄 License
|
|
||||||
|
|
||||||
MaterialSB is released under the MIT License. See [LICENSE](LICENSE) for details.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
Made with ❤️ for the SpiderBasic community
|
|
||||||
</p>
|
|
||||||
Loading…
Reference in New Issue
Block a user