Umbraco.Community.QuickBlocks
1.0.0-alpha-02
See the version list below for details.
dotnet add package Umbraco.Community.QuickBlocks --version 1.0.0-alpha-02
NuGet\Install-Package Umbraco.Community.QuickBlocks -Version 1.0.0-alpha-02
<PackageReference Include="Umbraco.Community.QuickBlocks" Version="1.0.0-alpha-02" />
paket add Umbraco.Community.QuickBlocks --version 1.0.0-alpha-02
#r "nuget: Umbraco.Community.QuickBlocks, 1.0.0-alpha-02"
// Install Umbraco.Community.QuickBlocks as a Cake Addin #addin nuget:?package=Umbraco.Community.QuickBlocks&version=1.0.0-alpha-02&prerelease // Install Umbraco.Community.QuickBlocks as a Cake Tool #tool nuget:?package=Umbraco.Community.QuickBlocks&version=1.0.0-alpha-02&prerelease
QuickBlocks
A package for quickly building block list based Umbraco websites all from data attributes in your HTMl
Installation
Add the package to an existing Umbraco website (v10.4+) from nuget:
dotnet add package Umbraco.Community.QuickBlocks --version 1.0.0-alpha-02
Data Attributes
Here are some examples
Home Page and Block List Property
<div data-content-type-name="Home Page"
data-prop-name="Main Content"
data-prop-type="[BlockList] Main Content"
data-prop-location="page"
data-list-name="Main Content">
...
</div>
Add a row
<section data-row-name="Simple Link">
...
</section>
Add a property to the row
<a href="#" data-prop-name="Link" data-prop-location="row">My Link</a>
<img src="#" data-prop-name="Image" data-prop-location="row" />
<h2 data-prop-name="Image" data-prop-location="row">
<p data-prop-name="Description" data-prop-location="row">
My content in here
</p>
Specify a different data type
<h2 data-prop-name="Title" data-prop-type="Richtext editor" data-prop-location="row">
Use an image as a background image
<header style="background-image: url('[!image!]')" data-row-name="Header" data-prop-name="Image" data-prop-location="row" data-replace-marker="[!image!]" data-replace-inner="false" data-prop-type="Image Media Picker">
...
</header>
Use a Multi URL Picker for repeating links and use the name for the icon
<a href="#" data-prop-name="Social Links"
data-prop-type="Multi URL Picker"
data-multiple="true"
data-replace-attribute="class"
data-replace-inner="true"
data-replace-marker="[!name!]"
data-prop-value=".Name">
<i class="fa fa-[!name!]"></i>
</a>
Create a list property inside a row
In the sub list items, we don't need to specify the property location, we only do that for row or page properties.
<div data-row-name="Services">
<h2 class="title" data-prop-name="Title" data-prop-location="row">We build awesome products</h2>
<h5 class="description" data-prop-name="Description" data-prop-location="row">This is the paragraph where you can write more details </h5>
<div data-sub-list-name="Service List"
data-prop-name="Services"
data-prop-type="[BlockList] Service List"
data-prop-location="row"
data-list-inline="false">
<div data-item-name="Service Item">
<h4 class="info-title" data-prop-name="Title">1. Design</h4>
<p data-prop-name="Description">blah blah blah</p>
<a data-prop-name="Link" href="#pablo">Find more...</a>
</div>
</div>
</div>
Move some HTML to a partial view
<footer data-partial-name="Footer">
...
</footer>
Extra block list options
Max Width
data-list-maxwidth="100%"
Single block mode
data-list-single="true"
Live editing mode
data-list-live="true"
Inline Editing
data-list-inline="true"
List Min Items
data-list-min="0"
List Max Items
data-list-max="3"
Extra row options
Block Row Icon
data-icon-class="icon-science"
Block Row Icon Colour
data-icon-colour="color-indigo"
Block Row Label Property
data-label-property="title"
Contributing
Contributions to this package are most welcome! Please read the Contributing Guidelines.
Acknowledgments
Thanks to my employers ClerksWell for allowing me some time during my work day to work on this project on top of my own spare time.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Umbraco.Cms.Web.BackOffice (>= 10.4.0)
- Umbraco.Cms.Web.Website (>= 10.4.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0 | 721 | 6/7/2023 |
1.0.0-alpha-04 | 129 | 5/17/2023 |
1.0.0-alpha-03 | 137 | 5/15/2023 |
1.0.0-alpha-02 | 132 | 5/12/2023 |