Komponent dokumentation

Denne side indeholder et overblik + eksempler på all tilgængelige komponenter på den tilhørende løsning. Koden til komponenterne findes i /Templates/Designs/Rapido/Components.

Helper method: RenderButton

Indstillinger

ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Button { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Button { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderCheckboxField

Check this

Der er sket en fejl

Indstillinger

Checked	System.Boolean
Type
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new CheckboxField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new CheckboxField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderCheckboxListField

Vælg mellem flere

Tre

Der er sket en fejl

Indstillinger

Options	Component { Capacity Count Item }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new CheckboxListField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new CheckboxListField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="form__field-group u-margin-bottom dw-mod" >
            <div class="u-full-width"> 
 <label for="MyCheckboxes" class="u-pull--left">Vælg mellem flere</label>                                     <div class="u-pull--right">
                                <a class="btn btn--link-clean dw-mod" href="#" >                <i class="fal fa-info-circle" ></i>
</a>
                    </div>
            </div>
        <div class="u-pull--left">
    <div class="form__field-group dw-mod">
        <input id="CheckOne" type="checkbox" checked="true" class="form__control form__control  dw-mod" />
            <label for="CheckOne" class="dw-mod">En</label>
    </div>
    <div class="form__field-group dw-mod">
        <input id="CheckTwo" type="checkbox" checked="true" class="form__control form__control  dw-mod" />
            <label for="CheckTwo" class="dw-mod">To</label>
    </div>
    <div class="form__field-group dw-mod">
        <input id="CheckThree" disabled="true" type="checkbox" class="form__control form__control  dw-mod" />
            <label for="CheckThree" class="dw-mod">Tre</label>
    </div>
                    <div class="notification-message-error notification-message-clean clean  u-full-width  dw-mod" >
Der er sket en fejl        </div>
        </div>
    </div>

Helper method: RenderContentModule

Tilføj dette modul som tekst streng

Indstillinger

Content	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ContentModule { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ContentModule { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderDashboard

Indstillinger

WidgetsBaseBackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Dashboard { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Dashboard { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="dashboard dw-mod" >
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(2.16836734693878, 56.3775510204082, 85)" title="Example" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-code widget__iconwidget__icon" ></i>
                <div class="widget__title">Example</div>
            </div>
        </a>
            </div>
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(4.33673469387755, 112.755102040816, 170)" title="Widget" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-bell widget__iconwidget__icon" ></i>
                <div class="widget__title">Widget</div>
            </div>
        </a>
            </div>
            <div class="dashboard__widget">
                        <a href="#" class="widget widget--link dw-mod" style="background-color:rgb(6.50510204081633, 169.132653061224, 255)" title="Sample" >
            <div class="u-center-middle u-color-light">
                <i class="fas fa-bomb widget__iconwidget__icon" ></i>
                <div class="widget__title">Sample</div>
            </div>
        </a>
            </div>
    </div>

Helper method: RenderDashboard

Indstillinger

WidgetsBaseBackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Dashboard { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Dashboard { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="dashboard dw-mod" >
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(18.0084745762712, 63.75, 18.0084745762712)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-code widget__iconwidget__icon" ></i>
            <div class="widget__counter">120</div>
            <div class="widget__title">Orders</div>
        </div>
    </div>
            </div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(36.0169491525424, 127.5, 36.0169491525424)' >
        <div class="u-center-middle u-color-light">
            <div class="widget__counter">1105</div>
            <div class="widget__title">Count</div>
        </div>
    </div>
            </div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(54.0254237288136, 191.25, 54.0254237288136)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-quote-right widget__iconwidget__icon" ></i>
            <div class="widget__counter">5</div>
            <div class="widget__title">Quotes</div>
        </div>
    </div>
            </div>
            <div class="dashboard__widget">
                    <div class="widget dw-mod" style='background-color:rgb(72.0338983050847, 255, 72.0338983050847)' >
        <div class="u-center-middle u-color-light">
                <i class="fas fa-calendar widget__iconwidget__icon" ></i>
            <div class="widget__counter">15</div>
            <div class="widget__title">Days</div>
        </div>
    </div>
            </div>
    </div>

Helper method: RenderDashboardWidgetCounter

Indstillinger

Count	System.Int32
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Title	System.String
BackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new DashboardWidgetCounter { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new DashboardWidgetCounter { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderDashboardWidgetLink

Indstillinger

Link	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Title	System.String
BackgroundColor	System.String
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new DashboardWidgetLink { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new DashboardWidgetLink { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderFileField

Vælg fil Ingen filer valgt

Indstillinger

ChooseFileText	System.String
NoFilesChosenText	System.String
UploadButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Multiple	System.Boolean
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new FileField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new FileField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderForm

Indstillinger

Name	System.String
Method
Action	System.String
Enctype
OnSubmit	System.String
CssClass	System.String
FormStartMarkup	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Form { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Form { OPTIONAL_settings })

Markup resultat

<form class=" u-no-margin dw-mod" method="Get" >
    <div class="form__field-group dw-mod">
        <input id="a66dbe3013724adcae02c0bb8eb7de05" type="checkbox" checked="true" class="form__control form__control  dw-mod" />
            <label for="a66dbe3013724adcae02c0bb8eb7de05" class="dw-mod">Min label</label>
    </div>
    <div class="form__field-group u-full-width  dw-mod">
            <div class="u-full-width"> 
 <label for="9fba2bd62ed54676820d8340f72ac068" class="u-pull--left">Min tekst <span class="required dw-mod">*</span> <span class="required dw-mod">*</span></label>                             </div>
            <input id="9fba2bd62ed54676820d8340f72ac068" required="true" type="text" class="u-full-width u-full-width  dw-mod" />
    </div>
    <div class="form__field-group u-full-width dw-mod">
            <div class="u-full-width"> 
 <label for="4034544f9b2242649a30b3e7c0960ac0" class="u-pull--left">Mit nummer</label>                             </div>
            <div class="form__field-combi u-no-margin dw-mod">
                <input id="4034544f9b2242649a30b3e7c0960ac0" required="true" min="2" type="number" class=" dw-mod" />
            </div>
    </div>
    <div class="form__field-group u-full-width dw-mod">
            <div class="u-full-width"> 
 <label for="6336e8666e38477a94c0b8a75a1c9906" class="u-pull--left">Mit nummer</label>                             </div>
            <div class="form__field-combi u-no-margin dw-mod">
                <input id="6336e8666e38477a94c0b8a75a1c9906" required="true" min="2" type="number" class=" dw-mod" />
            </div>
    </div>
        </form>

Helper method: RenderHeading

Min nye overskrift

Indstillinger

Title	System.String
Level	System.Int32
Color	System.String
Link	System.String
CssClass	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
IconPosition
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Heading { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Heading { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderHiddenField

Indstillinger

Value	System.String
Id	System.String
Name	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
Label	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new HiddenField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new HiddenField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderIcon

Icon label

Indstillinger

Prefix	System.String
Name	System.String
Color	System.String
CssClass	System.String
LabelPosition
Label	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Icon { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Icon { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderImage

Billedebeskrivelse

Indstillinger

Path
Title	System.String
Id	System.String
Link	System.String
OnClick	System.String
Caption	System.String
CssClass	System.String
Style
ImageDefault	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
ImageSmall	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
ImageMedium	Component { Width Height Crop DoNotUpscale FillCanvas Compression Quality Format BackgroundColor }
DisableImageEngine	System.Boolean
DisableLazyLoad	System.Boolean
FilterPrimary
FilterSecondary
FilterColor	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Image { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Image { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderLink

Indstillinger

Target
Rel
Download	System.Boolean
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Link { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Link { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderModal

Indstillinger

Id	System.String
Heading	Component { Title Level Color Link CssClass Icon IconPosition HelperName }
Width
Height
BodyText	System.String
OnClose	System.String
BodyTemplate
DisableDarkOverlay	System.Boolean
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Modal { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Modal { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderNotificationMessage

Der er sket en fejl

Indstillinger

Id	System.String
Message	System.String
MessageType
MessageLayout
CssClass	System.String
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new NotificationMessage { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new NotificationMessage { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderNumberField

Mit nummer

Indstillinger

Min	System.Nullable`1[System.Int32]
Max	System.Nullable`1[System.Int32]
Step	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new NumberField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new NumberField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderRating

Indstillinger

Score	System.Int32
OutOf	System.Int32
Type
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Rating { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Rating { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderSelectField

Vælg felt

Der er sket en fejl

Indstillinger

Default	Component { Id Checked Disabled Value Label ExtraAttributes Type Name OnChange OnClick ErrorMessage HelperName }
Options	Component { Capacity Count Item }
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new SelectField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new SelectField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderSticker

On sale

Indstillinger

Title	System.String
Color	System.String
BackgroundColor	System.String
Style
Size
CssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Sticker { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Sticker { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderStickersCollection

On sale

New

Black friday

Indstillinger

Stickers	Component { Capacity Count Item }
CssClass	System.String
Position
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new StickersCollection { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new StickersCollection { OPTIONAL_settings })

Markup resultat

Helper method: RenderTable

Color	Blue
Size	M

Indstillinger

Id	System.String
CssClass	System.String
Design
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Table { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Table { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderTable

string1	string2	CustomCell2
Meat	Proteins (g)	Fats (g)	Carbs (g)
Chicken	20,8	8,8	0,6
Pork	19,4	7,1	0
Beef	18,9	12,4	0
CustomCell		CustomCell2
1	2	3	4

Indstillinger

Id	System.String
CssClass	System.String
Design
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Table { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Table { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderText

Min tekst

Indstillinger

Content	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new Text { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new Text { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderTextareaField

Kommentar

Der er sket en fejl

Indstillinger

Placeholder	System.String
MaxLength	System.Int32
Rows	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Code preview er ikke tilgængeligt for dette komponent

Helper method: RenderTextField

Tekst felt

Der er sket en fejl

Indstillinger

Type
Placeholder	System.String
MaxLength	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new TextField { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new TextField { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderAddToCart

Indstillinger

WrapperCssClass	System.String
Disabled	System.Boolean
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new AddToCart { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new AddToCart { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="buttons-collection" >  
    <input type="checkbox" id="3911a9aa6bcb4586b3dc5866a22c9c26" class="dropdown-trigger" />
    <div class="dropdown unit-selector  dw-mod" >
        <label class="dropdown__header dropdown__btn dropdown__btn--unit-selector dw-mod" for="3911a9aa6bcb4586b3dc5866a22c9c26">Select unit</label>
        <div class="dropdown__content dw-mod">
            <div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value=''>Select unit</div><div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value='VO53'>Piece</div><div class='dropdown__item dw-mod' onclick='selectTestUnit(this)' data-value='VO44'>Pkg. of 8</div>
        </div>
        <label class="dropdown-trigger-off" for="3911a9aa6bcb4586b3dc5866a22c9c26"></label>
    </div>
            <input id="5958cbbbd7f44c07a4118152e231e370" name="5958cbbbd7f44c07a4118152e231e370" min="1" value="1" type="number" class=" dw-mod" />
                <button class=" btn--condensed btn--condensed btn btn--primary dw-mod" title="Læg i kurv" onClick="CustomCart.AddToCart(event, { id: 'PROD102',unitId: '' + window.selectedTestUnit + '',productInfo: {name: 'Test product'},quantity: parseFloat(document.getElementById('5958cbbbd7f44c07a4118152e231e370').value)});CustomCart.AddToCart(event, { id: 'PROD102',unitId: '' + window.selectedTestUnit + '',productInfo: {name: 'Test product'},quantity: parseFloat(document.getElementById('5958cbbbd7f44c07a4118152e231e370').value)});" type="button" >                    <div class="u-flex u-flex--align-items-center  u-flex--align-center u-flex--align-center"><i class="fal fa-shopping-cart u-margin-right--lg u-w20px" ></i>Læg i kurv</div>
</button>
    </div>

Helper method: RenderAddToCartButton

Indstillinger

HideTitle	System.Boolean
ProductId	System.String
VariantId	System.String
UnitId	System.String
BuyForPoints	System.Boolean
ProductInfo	System.String
QuantitySelectorId	System.String
ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new AddToCartButton { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new AddToCartButton { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderQuantitySelector

Indstillinger

Min
Max
Step
Min	System.Nullable`1[System.Int32]
Max	System.Nullable`1[System.Int32]
Step	System.Int32
ReadOnly	System.Boolean
OnKeyUp	System.String
OnInput	System.String
OnFocus	System.String
ActionButton	Component { ConfirmText ConfirmTitle ButtonType Link Target IconPosition Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value
Name	System.String
Id	System.String
Label	System.String
HelpText	System.String
Link	Component { Target Rel Download Id Title AltText OnClick CssClass Disabled Icon Name Href ButtonLayout ExtraAttributes HelperName }
Value	System.String
Disabled	System.Boolean
Required	System.Boolean
ErrorMessage	System.String
CssClass	System.String
OnChange	System.String
OnClick	System.String
WrapperCssClass	System.String
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new QuantitySelector { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new QuantitySelector { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderUnitSelector

Indstillinger

Id	System.String
OptionsContent	System.String
SelectedOption	System.String
Disabled	System.Boolean
CssClass	System.String
Options	Component { Capacity Count Item }
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new UnitSelector { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new UnitSelector { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderVariantMatrix

Blue
Red
	0

Indstillinger

ProductId	System.String
Description	System.String
EnableCounters	System.Boolean
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new VariantMatrix { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new VariantMatrix { OPTIONAL_settings })

Markup resultat

Helper method: RenderArticleAuthorAndDate

Skrevet af Me den 27-03-1984

Indstillinger

Author	System.String
Date	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleAuthorAndDate { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleAuthorAndDate { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleBanner

A perfect banner

Indstillinger

UseFilters	System.Boolean
Layout
Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Heading	System.String
Subheading	System.String
Author	System.String
Date	System.String
Category	System.String
CategoryColor	System.String
Link	System.String
LinkText	System.String
TextLayout
TextColor	System.String
ButtonLayout
RatingScore	System.Int32
RatingOutOf	System.Int32
ExternalParagraphId	System.Int32
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleBanner { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleBanner { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<section class="multiple-paragraphs-container u-color-light paragraph-container--full-width">
                <div class="background-image image-filter image-filter--darken dw-mod">
                    <div class="background-image__wrapper image-filter image-filter--darken dw-mod">
                                        <img class="b-lazy  background-image__cover dw-modbackground-image__cover dw-mod dw-mod" src="/Files/Images/placeholder.gif" data-src="/Admin/Public/GetImage.ashx?Width=1000&Height=600&Crop=1&Compression=75&DoNotUpscale=True&FillCanvas=False&Image=%2fFiles%2fImages%2fDemo%2f8026157750_b98560948c_b.jpg&&AlternativeImage=%2fFiles%2fImages%2fmissing_image.jpg"     />
                    </div>
                </div>
                <div class="center-container dw-mod">
                    <div class="grid">
                        <div class="grid__col-md-8 grid__col-xs-12 paragraph-container paragraph-container--height-lg">
                            <div class="u-left-middle">
                                <div>
                                        <h1 class="article__header article__header--giant dw-mod" style="color:">A perfect banner</h1>
                                                                                                                                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

Helper method: RenderArticleBodyRow

Indstillinger

TopLayout	System.String
TextLayout	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleBodyRow { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleBodyRow { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleHeader

Guides

Me 01-01-2020

Header clean layout

This is new

Indstillinger

Layout
Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Heading	System.String
Subheading	System.String
Author	System.String
Date	System.String
Category	System.String
CategoryColor	System.String
Link	System.String
LinkText	System.String
TextLayout
TextColor	System.String
ButtonLayout
RatingScore	System.Int32
RatingOutOf	System.Int32
ExternalParagraphId	System.Int32
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleHeader { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleHeader { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="grid grid--align-content-start grid--justify-start">
            <div class="grid__col-md-8 grid__col-sm-12 u-padding--lg dw-mod">
                    <div class="u-border-bottom u-padding-bottom">
                            <div class="u-pull--left">
                                <div class="article__category dw-mod" style="color: #c21212">Guides</div>
                            </div>
                        <div class="u-pull--right">
                                <small class="article__post-info dw-mod">Me 01-01-2020</small>
                                                    </div>
                    </div>
                <div class="grid__cell">
                        <h1 class="article__header article__header--giant dw-mod">Header clean layout</h1>
                                                <div class="u-padding-bottom--lg">
                                                <img class="b-lazy  dw-mod" src="/Files/Images/placeholder.gif" data-src="/Admin/Public/GetImage.ashx?Width=1000&Height=600&Crop=1&Compression=75&DoNotUpscale=True&FillCanvas=False&Image=%2fFiles%2fImages%2fDemo%2f8026157750_b98560948c_b.jpg&&AlternativeImage=%2fFiles%2fImages%2fmissing_image.jpg"     />
                            </div>
                                            <div class="article__leadtext dw-mod">This is new</div>
                                            <div class="grid__cell">
                                    <a class="btn btn--primary dw-mod" title="Read more" href="#" >Read more</a>
                        </div>
                </div>
            </div>
        </div>

Helper method: RenderArticleImage

This is the caption for the image

Indstillinger

Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
EnableFullImage	System.Boolean
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleImage { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleImage { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleLink

Indstillinger

ConfirmText	System.String
ConfirmTitle	System.String
ButtonType
Link	System.String
Target
IconPosition
Id	System.String
Title	System.String
AltText	System.String
OnClick	System.String
CssClass	System.String
Disabled	System.Boolean
Icon	Component { Prefix Name Color CssClass LabelPosition Label HelperName }
Name	System.String
Href	System.String
ButtonLayout
ExtraAttributes	System.Collections.Generic.Dictionary`2[System.String,System.String]
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleLink { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleLink { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleListFilter

Indstillinger

Options
Label	System.String
SystemName	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleListFilter { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleListFilter { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleListSearch

Indstillinger

Title	System.String
SearchParameter	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleListSearch { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleListSearch { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleMenu

Indstillinger

Title	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleMenu { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleMenu { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleMenuItem

Indstillinger

Title	System.String
Link	System.String
Href	System.String
OnClick	System.String
Icon	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleMenuItem { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleMenuItem { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleQuote

I would like to quote that this is so.

- The user

Indstillinger

Image	Component { Path Title Id Link OnClick Caption CssClass Style ImageDefault ImageSmall ImageMedium DisableImageEngine DisableLazyLoad FilterPrimary FilterSecondary FilterColor ExtraAttributes HelperName }
Text	System.String
Author	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleQuote { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleQuote { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

<div class="grid u-padding-bottom--lg">
                <div class="grid__col-3">
                    <div class="grid__cell-img">
                                        <img class="b-lazy   article__image article__image--ball article__image article__image--ball dw-mod" src="/Files/Images/placeholder.gif" data-src="/Admin/Public/GetImage.ashx?Width=200&Height=200&Crop=1&Compression=75&DoNotUpscale=True&FillCanvas=False&Image=%2fFiles%2fImages%2fDemo%2f8026157750_b98560948c_b.jpg&&AlternativeImage=%2fFiles%2fImages%2fmissing_image.jpg"   alt="The user" title="The user"  />
                    </div>
                </div>
        <div class="grid__col-auto">
            <div class="article__quote dw-mod">
                <i class="fas fa-quote-right u-margin-bottom--lg"></i>
                I would like to quote that this is so.
                <i class="fas fa-quote-right"></i>
            </div>
                        <div class="article__quote-author dw-mod">
                - The user
            </div>
        </div>
    </div>

Helper method: RenderArticleSubHeader

My sub header

Indstillinger

Title	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleSubHeader { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleSubHeader { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleSummary

Dette er et resumé

Indstillinger

Text	System.String
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleSummary { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleSummary { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Helper method: RenderArticleText

Normal body text...

Indstillinger

Text	System.String
EnableLargeText	System.Boolean
HelperName	System.String

Simpelt brug

Block myBlock = new Block

{

Id = "MyBlock",

SortId = 10,

Component = new ArticleText { OPTIONAL_settings }

};

myPage.Add("MyContainer", myBlock);

Eller

@Render(new ArticleText { OPTIONAL_settings })

Implementerings eksempel

Markup resultat

Generalle komponenter

Ecommerce komponenter

Artikel komponenter

Komponent dokumentation

Helper method: RenderButton

Helper method: RenderCheckboxField

Helper method: RenderCheckboxListField

Helper method: RenderContentModule

Helper method: RenderDashboard

Helper method: RenderDashboard

Helper method: RenderDashboardWidgetCounter

Helper method: RenderDashboardWidgetLink

Helper method: RenderFileField

Helper method: RenderForm

Helper method: RenderHeading

Min nye overskrift

Helper method: RenderHiddenField

Helper method: RenderIcon

Helper method: RenderImage

Helper method: RenderLink

Helper method: RenderModal

Min tekst

Helper method: RenderNotificationMessage

Helper method: RenderNumberField

Helper method: RenderRating

Helper method: RenderSelectField

Helper method: RenderSticker

Helper method: RenderStickersCollection

Helper method: RenderTable

Helper method: RenderTable

Helper method: RenderText

Helper method: RenderTextareaField

Helper method: RenderTextField

Helper method: RenderAddToCart

Helper method: RenderAddToCartButton

Helper method: RenderQuantitySelector

Helper method: RenderUnitSelector

Helper method: RenderVariantMatrix

Helper method: RenderArticleAuthorAndDate

Helper method: RenderArticleBanner

A perfect banner

Helper method: RenderArticleBodyRow

Helper method: RenderArticleHeader

Header clean layout

Helper method: RenderArticleImage

Helper method: RenderArticleLink

Helper method: RenderArticleListFilter

Helper method: RenderArticleListSearch

Helper method: RenderArticleMenu

Helper method: RenderArticleMenuItem

Helper method: RenderArticleQuote

Helper method: RenderArticleSubHeader

My sub header

Helper method: RenderArticleSummary

Helper method: RenderArticleText