jaspr_material 0.1.7 jaspr_material: ^0.1.7 copied to clipboard
This is the material library for the Jaspr web framework based on dart. This package adds some material components to the existing Jaspr ecosystem.
Jaspr Material #
The material library for Jaspr
Installation 💻 #
❗ In order to start using Jaspr Material you must have the Dart SDK installed on your machine.
Install via dart pub add
:
dart pub add jaspr_material
Usage 🚀 #
Add the following code to the head
of your Document
to include the material icons stylesheet.
link(
href: 'https://fonts.googleapis'
'.com/css?family=Material+Icons|Material+Icons+Outlined'
'|Material+Icons+Two+Tone|Material+Icons+Round|Material+'
'Icons+Sharp',
rel: 'stylesheet',
)
After adding the stylesheet, you can now start using the Icon
class to display material icons.
import 'package:jaspr_material/jaspr_material.dart';
Icon(
Icons.language,
styles: Styles.combine([Styles.flexbox(alignItems: AlignItems.baseline)]),
),
Icon.outlined(
Icons.language,
size: Unit.pixels(20),
colour: Colors.red,
),
Icon #
The Icon
class is a jaspr Component
that creates a material icon.
Properties #
- size - The size of the icon
- colour - The colour of this icon
- iconData - The icon you are trying to display
- iconType - The type of icon you are trying to display. You can use the named constructors instead as well. Check Variations for more info.
- lineHeight - The line height of the icon
- styles - The styles of the icon
The iconData
property can be either the name
of the icon or a member of the Icons
class. Visit Google Fonts and select any icon of your choice, this should show you it's name
, it's now up to you to either type in it's name as the iconData
or use Icons.iconName
to find your icon.
See Icons section for more info.
Variations #
The Icon()
constructor gives you a filled
material icon which is the default material icon style. This library exposes other styles of material-icons which include:
- Icon.rounded
- Icon.sharp
- Icon.outlined
- Icon.twoToned
You can either use these constructors or still use the default Icon()
constructor and set the
iconType
property to any type you want in the form of a String
.
Icons #
Identifiers for the supported Material Icons.
You can use them as Icons.adb
. Simply find the icon you want to use from either Material Icons or Google Fonts and try to access it using Icons.iconName
.
NB: If the icon name starts with a NUMBER, use the dollar sign($) before typing the icon name.
Example: If the icon name is 10k
, you can access it using Icons.$10k
. This is because dart doesn't allow numbers to start variable names.
Some other icons might end with the dollar sign($) because their full name is a reserved keyword in dart, like the try
icon will be try$
.
Styles #
The styles
property of the Icon
class is a jaspr Styles
class that allows you to pass custom
css styles to the icon.
NB: When the Styles property is set, it overrides the other styling properties of the icon.
These properties include size
, colour
, and `lineHeight.