Creator.Components

Custom .NET Core elements by Creator framework.

Creator framework is a light weight open source framework for responsive web design and can be used on any site. The framework is created with SASS/CSS and JavaScript with main focus on styling and style elements and is managed by Lundbeck Consulting.

Read more at https://getcreatorframework.com

This library contains usefull functionality for .NET ASP.NET Core web applications or sites that use JavaScript.

GitHub

• Distribution version
• Code library
• Creator.Components library

Tag Helpers

The library contains the tag helpers:

• Dialog
• Icon
• ImageOver

Dialog

Creates a dialog tag implementet with Creator styling. Supports all Dialog features.

The attributes size and title must be set.

Size attribute

The size attribute support values:

• XS
• SM
• MD
• LG
• XL

Usage

<dialog size="MD" title="My Dialog">
    <content>
        Here's my content for the dialog.
    </content>
    <footer ok-button="false">
        <button>Click me</button>
    </footer>
</dialog>

Icon

Display icons from four different set's of icons:

• FontAwesome: https://fontawesome.com
• Friconix: https://friconix.com
• CaptainIcon: https://mariodelvalle.github.io/CaptainIconWeb
• DevIcons: https://konpa.github.io/devicon

Example

<icon class="email" symbol="EnvelopeFull" title="Email" format="Anchor" href="mailto:[email protected]" />

Symbol attributes

The tag supports four icon sets and you define symbol through attributes:

• symbol: FontAwesome
• fi-symbol: Friconix
• ci-symbol: CaptainIcons
• di-symbol: DevIcons

At lest one of the attributes must be set.

Format attribute

You choose the output format in the format attribute which supports:

• Span
• Anchor
• Button
• Div
• Italic
• Strong

Anchor format

When format set to Anchor you access href and target through attributes with the same names:

• href
• target

Form attributes

When output format is set to Button, the button tag is wrapped in a form. You can control the form through the attributes:

• form-method: standard form methods
• create-form: indicates if to wrap tag in a form. Default is true

Friconix

The Friconix icons support some specialized settings

Control the icon with attributes named:

• shape
• direction
• friconix-style
• thickness
• effect

Size

You set the icon size through the attribute size

Size support values:

• XXS - 0.4rem
• XS - 08rem
• SM - 1.2rem
• Normal - 1.6rem
• MD - 2.6rem
• LG - 3.2rem
• XL - 4.4rem
• XXL - 5.2rem

Button output

When output format is set to Button you set button type with attribute button with values:

• Button
• Reset
• Submit

Text attribute

You can define a text which is placed to the right of the icon using attribute text. This is specialy when format equals button.

Color Profile

Creator supports eleven color profiles that helps you style the icon.

Use attribute color with one of the values:

• Default
• Primary
• Success
• Danger
• Warning
• Info
• Light
• Dark
• Antan
• Notify
• Funk

ImageOver

Creates an image tag that changes image src when the cursor is over the image.

Source

Set the path to the file in the src attribute

Image over source

The source for the image to display on mouse over is automatically set to src**-over**.jpg

Example: menu-one.jpg => menu-one-over.jpg