Update README.md
This commit is contained in:
parent
054f0a6073
commit
c72dddc70e
126
README.md
126
README.md
@ -1,9 +1,129 @@
|
|||||||
# MaterialSB
|
# MaterialSB
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="https://lastlife.net/MaterialSB/assets/images/Logo.png" />
|
<img src="https://lastlife.net/MaterialSB/assets/images/Logo.png" alt="MaterialSB Logo" />
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
MaterialSB is a library for SpiderBasic that replaces all UI elements with Materialize, a framework based on the design system created by Google.
|
<p align="center">
|
||||||
|
<strong>Material Design UI components for SpiderBasic</strong>
|
||||||
|
</p>
|
||||||
|
|
||||||
You'll find a detailed documentation here: https://lastlife.net/MaterialSB/index.html
|
<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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user