MDriven Stylesheet
No edit summary
(Adding page to Category:TOC because it contains a TOC.)
 
(29 intermediate revisions by 5 users not shown)
Line 1: Line 1:
===='''What is modifier-classes?'''====
Modifier-classes define the SciFree style and customise it within the [https://wiki.mdriven.net/index.php/MDriven_Turnkey_Style_System Turnkey Style System.]


To use turnkey or mdriven modifier classes put them into the <u>style ref</u> in View Model Editor.
==='''What are Modifier-classes?'''===
Modifier-classes define the SciFree style and customize it within the [[Documentation:Turnkey Styling|Turnkey Style System.]]
 
Use Turnkey or MDriven modifier classes by putting them into the <u>style ref</u> in the View Model Editor.


Example style for the buttons:
Example style for the buttons:
[[File:1326px-Screenshot 2020-08-16 at 00.43.17.png|left|frameless]]


[https://drive.google.com/file/d/12RElVIZ8oAlYpBJ1_4-1DJ01fq9suDWj/view?usp=sharing '''Here you can download the css file'''] (stylesheet) that contains all the style data with the latest changes.   
[[File:1326px-Screenshot_2020-08-16_at_00.43.17.png|frameless|630x630px]]
===='''TEXT'''====
 
=== Downloading this CSS-file ===
'''[https://drive.google.com/file/d/1Cwlla9gXTu1NLK0AtaMZeg6Ocd3No-RA/view?usp=sharing You can download the CSS file here]''' (stylesheet) that contains all the style data with the latest changes.   
 
===TEXT===
You can style the text with modifier-classes like:
You can style the text with modifier-classes like:
{| class="wikitable contenttable"
{| class="wikitable contenttable"
|+
|+
| colspan="2" class="col-blue-light-bg" |
| colspan="2" style="background-color:;" class="col-blue-light-bg" |
=====TEXT=====
=====TEXT=====
|-
|-
Line 21: Line 25:
|'''''tk-italic'''''
|'''''tk-italic'''''
|-
|-
|<p style="color:#1A7E8E">Type here</p>
|<p style="color:#f59c1a">Type here</p>
|'''''tk-primary'''''
|'''''tk-primary'''''
|-
|-
| colspan="2" class="col-blue-light-bg" |
|<p style="color: #5DB85B">Type here </p>
|'''''tk-success'''''
|-
|<p style="color: #D32E2E">Type here </p>
|'''''tk-error'''''
|-
| colspan="2" style="background-color:;" class="col-blue-light-bg" |
 
=====CHIPS=====
=====CHIPS=====
|-
|-
Line 44: Line 55:


'''E.g.''':<p style="display:inline-flex;justify-content:center;color:#F0AD4E !important;background-color:#FDF2E4;height: 32px;line-height: 2;border-radius:16px;padding: 0px 8px;width:100px;min-width:32px;text-align:center;font-weight: 500;">Pending...</p>
'''E.g.''':<p style="display:inline-flex;justify-content:center;color:#F0AD4E !important;background-color:#FDF2E4;height: 32px;line-height: 2;border-radius:16px;padding: 0px 8px;width:100px;min-width:32px;text-align:center;font-weight: 500;">Pending...</p>
===='''BUTTONS'''====
There are three forms of buttons in the Turnkey Style System: '''default''', '''outlined''' and '''flat'''.


Also, you can use colors like: '''primary''' (main SciFree color), '''danger''' or '''success.''' For more colors follow [https://wiki.mdriven.net/index.php/MDriven_Turnkey_Style_System the Turnkey style system]'''.'''
==='''BUTTONS'''===
There are three forms of buttons in the Turnkey Style System: '''default''', '''outlined,''' and '''flat'''.


Choose needed form and color then put their ''modifier-classes'' into the style-ref. (you don't need to add 'default' styling)
You can also use colors like '''primary''' (main SciFree color), '''danger,''' or '''success.''' For more colors, follow [https://wiki.mdriven.net/index.php/MDriven_Turnkey_Style_System the Turnkey Style System]'''.'''


'''E.g.''' : primary, ''primary outlined'', ''primary flat'', ''danger, danger flat'' etc.
Choose the needed form and color then put their ''modifier-classes'' into the style-ref. (you don't need to add 'default' styling).


THIS MODIFIER CLASSES IS FOR BUTTONS AND LINKS ONLY, USE MD-PREFIXED CLASSES FOR STYLING TEXT- e.g. '''tk-primary'''.
'''E.g.''': primary, ''primary outlined'', ''primary flat'', ''danger, danger flat,'' etc.


[[File:Screenshot 2020-11-30 at 02.32.33.png|frameless]]
MODIFIER CLASSES ARE FOR BUTTONS AND LINKS ONLY. USE MD-PREFIXED CLASSES FOR STYLING TEXT- e.g. '''tk-primary'''.


=====SPECIAL BUTTONS=====
[[File:Screenshot 2020-11-30 at 02.32.33.png|frameless|426x426px]]
Also you can stack on top modifier-''classes'' for special buttons.


(adds a special Material Design Icons)
===SPECIAL BUTTONS===
Also, you can stack on top of modifier-''classes'' for special buttons (adds special Material Design Icons).


You can remove the "action name" for the button and the standalone icon without text as a button
You can remove the "action name" for the button and the standalone icon without text as a button.
{| class="wikitable"
{| class="wikitable"
!'''Example'''
!'''Example'''
Line 101: Line 111:
|'''tk-info-btn''' flat
|'''tk-info-btn''' flat
|}
|}
===='''SPECIAL ICONS'''====
 
You can add icons to any element (not only the buttons) by using the following classes.  
=='''SPECIAL ICONS'''==
Add icons to any element (not only the buttons) by using the following classes.  
{| class="contenttable"
{| class="contenttable"
|[[File:Doc.png|center|frameless]]
|[[File:Doc.png|center|frameless]]
Line 112: Line 123:
'''''tk-primary'''''
'''''tk-primary'''''
|}
|}
===='''INFO-ELEMENTS'''====
 
==='''INFO-ELEMENTS'''===
Info-elements can be static or removable.  
Info-elements can be static or removable.  
{| class="contenttable"
{| class="contenttable"
Line 122: Line 134:
(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)
(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)
|'''''tk-info-box'''''
|'''''tk-info-box'''''
(static text that can be added anywhere on the page,preferably take less than 6 col, tagged value: HideHeading)
(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)
|'''''tk-info-banner'''''
|'''''tk-info-banner'''''
(special info-help for newbies, removable groupbox, that contains text and action to remove it, can be added at the top of the page, tagged value: HideHeading)
(special info-help for newbies, removable groupbox, that contains text and action to remove it, can be added at the top of the page, tagged value: HideHeading)
|}
|}
======How to create info-banner?======
====How to create an info-banner====
Create groupbox of 1 row and 12 col with style-ref: '''tk''-''info-banner,''' add static-text of 11cols and action '''tk-''remove-btn''''' of 1 col inside[[File:Screenshot 2020-08-16 at 02.08.36.png|413x413px|right|frameless|link=https://wiki.scifree.se/bluespice/File:Screenshot_2020-08-16_at_02.08.36.png]]To make it removable:
Create a GroupBox of 1 row and 12 col with style-ref: '''tk''-''info-banner,''' add static-text of 11cols, and action '''tk-''remove-btn''''' of 1 col inside.
#Create a boolean variable (vRemoveInfo, false)
[[File:How-info-banner.png|right|frameless|754x754px]]
#Make groupbox visible, when   vRemoveInfo is true only
To make it removable:
#Set the remove action EAL expression to vRemoveInfo := true
#Create a Boolean variable (<code>vRemoveInfo, false</code> )
===='''TABLES'''====
#Make the GroupBox visible, when <code>vRemoveInfo</code> is true only
#Set the remove action EAL expression to <code>vRemoveInfo := true</code>
 
=='''TABLES'''==
{| class="contenttable"
{| class="contenttable"
|+
|+
Line 137: Line 152:
|-
|-
|'''''tk-table'''''
|'''''tk-table'''''
|}Both variants can be used without heading by adding a tagged value: HideHeading.
|}Both variants can be used without a heading by adding a tagged value: HideHeading.


Choose the style of the text for each column: '''e.g.''' Main object is bold -  '''''tk-bold''''' , or with scifree colors - '''''tk-primary'''''
Choose the style of the text for each column: '''e.g.''' Main object is bold -  '''''tk-bold''''', or with SciFree colors - '''''tk-primary'''''


===='''REPORTING STATES'''====
==='''REPORTING STATES'''===
Use reporting states with icons by adding the following modifier-classes. You can choose to colour them in sf-primary colour or just leave it default grey , without adding any additional modifier classes.
Use reporting states with icons by adding the following modifier-classes. You can choose to colour them in tk-primary/tk-success/tk-danger colour or just leave it to the default grey, without adding any additional modifier classes.
{| class="contenttable"
{| class="wikitable contenttable"
|+
|+
|[[File:uploading-state.png|center|frameless|120x120px|link=https://wiki.scifree.se/bluespice/File:uploading-state.png]]
|[[File:Upload.png|center|frameless|120x120px]]
|[[File:extracting-state.png|center|frameless|120x120px|link=https://wiki.scifree.se/bluespice/File:extracting-state.png]]
|[[File:Processing.png|center|frameless|120x120px]]
|[[File:waiting-btn.png|center|frameless|120x120px|link=https://wiki.scifree.se/bluespice/File:waiting-btn.png]]
|[[File:Waiting.png|center|frameless|120x120px]]
|[[File:Done.png|center|frameless|148x148px]]
|[[File:Error.png|center|frameless|122x122px]]
|-
|-
|'''''tk''-''uploading-state'''''
|'''''tk''-''uploading-state'''''
'''''tk-''primary'''
'''''tk-''primary'''
|'''''tk''-''extracting-state'''''
|'''''tk''-processing''-state'''''
'''''tk''-primary'''
'''''tk''-primary'''
|'''''tk''-''waiting-state'''''
|'''''tk''-''waiting-state'''''
'''''tk''-''primary'''''
'''''tk''-''primary'''''
|'''tk-success-state'''
'''tk-success'''
|'''tk-error-state'''
'''tk-danger'''
|}
|}
===='''CARDS (wrappers for groupboxes)'''====
 
[[File:group-card.png|left|frameless|link=https://wiki.scifree.se/bluespice/File:group-card.png]]'''''sf-group-card'''''
==='''CARDS (wrappers for GroupBoxes)'''===
[[File:Group-card.png|frameless|337x337px]]
 
'''''tk-group-card'''''


(tagged-value: HideHeading)
(tagged-value: HideHeading)


===='''LISTS'''====
==='''LISTS'''===
Tables in a form of lists
Tables in the form of lists
{| class="contenttable"
{| class="contenttable"
|+
|+
|[[File:items-list--default.png|center|frameless|link=https://wiki.scifree.se/bluespice/File:items-list--default.png]]
|[[File:List0def.png|center|frameless]]
|[[File:items-list--primary.png|center|frameless|link=https://wiki.scifree.se/bluespice/File:items-list--primary.png]]
|[[File:List-prim.png|center|frameless]]
|-
|-
|'''''sf-items-list--default'''''
|'''''tk-items-list--default'''''
|'''''sf-items-list--primary'''''
|'''''tk-items-list--primary'''''
|}To make a list of affilliations like in the example,
|}To make a list of affiliations like in the example:
*use '''''sf-organisations'''''  style ref to the name of the organisation column
*Use '''''tk-document'''''  style ref to the name of the document column
*add "remove action" with '''''sf-remove-btn''''' '''''flat''''' style ref
*Add "remove action" with '''''tk-remove-btn''''' '''''flat''''' style ref
===='''SEARCH with DROPDOWN OF SUGGESTIONS'''====
 
<figure-inline>[[File:Screenshot_2020-10-16_at_07.59.11.png|link=https://wiki.scifree.se/bluespice/File:Screenshot_2020-10-16_at_07.59.11.png|425x425px]]</figure-inline>
=='''SEARCH with DROPDOWN OF SUGGESTIONS'''==
[[File:Searchbox.png|frameless|464x464px]]


To make a search field like in the example(with an add action),
To make a search field like in the example(with an add action):
*create a groupbox with '''sf-searchbox''' style ref that includes <u>search input</u> with vSeekParam variable and a <u>table of results</u> - vSeekerResult <figure-inline>[[File:Screenshot_2020-10-16_at_08.04.44.png|link=https://wiki.scifree.se/bluespice/File:Screenshot_2020-10-16_at_08.04.44.png|426x426px]]</figure-inline>
*Create a GroupBox with '''''tk''-searchbox''' style ref that includes <u>search input</u> with the <code>vSeekParam</code> variable and a <u>table of results</u> - <code>vSeekerResult</code> [[File:Seaker.png|426x426px]]
*include search input that takes 1 row and add "HideHeading" and proper "Placeholder" tagged values <figure-inline>[[File:Screenshot_2020-10-16_at_08.13.12.png|link=https://wiki.scifree.se/bluespice/File:Screenshot_2020-10-16_at_08.13.12.png|465x465px]]</figure-inline>
*Include the search input that takes 1 row and adds "HideHeading" and proper "Placeholder" tagged values (see also [[Databound Placeholder text]]). [[File:Seaker-2.png|465x465px]]
*set style ref for search input as an expression (if the vSeekParam is not empty and there are more than 0 results then  ''''sf-searchbox--searching'''<nowiki/>' class should be added)
*Set style ref for search input as an expression (if the vSeekParam is not empty and there are more than 0 results, then  ''''tk''-''searchbox--searching'''<nowiki/>' class should be added).
  if not vSeekParam.isNullOrEmpty and (Institution.allInstances->size > 0) then 'sf-searchbox__input sf-searchbox--searching' else 'sf-searchbox__input'  endif
  if not vSeekParam.isNullOrEmpty and (Something.allInstances->size > 0) then 'tk-searchbox__input tk-searchbox--searching' else 'tk-searchbox__input'  endif
*set table of results is a nested ViewModel class that contains one or two attributes and optional action; <span class="col-grey-medium">'''(optional)''' add "add action" with '''tk''-add-btn primary''''' style ref to the nesting and set its expression to</span>
*Set table of results is a nested ViewModel class that contains one or two attributes and optional action; <span class="col-grey-medium">'''(optional)''' add "add action" with '''''tk-add-btn primary''''' style ref to the nesting and set its expression to:</span>
  <span class="col-grey-medium">vCurrent_SearchResultGrid;/*Choose the current row in the results grid*/ vCurrent_UserAffiliations.AffiliatedTo.add(vCurrent_SearchResultGrid); /*Main action*/ vSeekParam := String.NullValue /*Clean the search input field*/</span>
  <span class="col-grey-medium">vCurrent_SearchResultGrid;/*Choose the current row in the results grid*/</span>
*set "HideHeading" tagged value
<span class="col-grey-medium">vCurrent_Something.Something.add(vCurrent_SearchResultGrid); /*Main action*/</span>
*set style ref  - "'''sf-searchbox__results'''";
<span class="col-grey-medium">vSeekParam := String.NullValue /*Clean the search input field*/</span>
*set visible expression to results if the search field is not empty and there are more than 0 results
*Set "HideHeading" tagged value
*Set style ref  - "'''tk-searchbox__results'''";
*Set visible expression to results if the search field is not empty and there are more than 0 results
  not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0)  
  not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0)  
Now you can set a search server side action that runs every 30ms only when the search field is not empty ( DisabledExpression: vSeekParam->isEmpty ) <u>[https://wiki.mdriven.net/index.php/MDrivenServer_periodic_server-side_actions more about server side actions]</u>  
Now, you can set a search server-side action that runs every 30ms only when the search field is not empty (DisabledExpression: <code>vSeekParam->isEmpty</code> )  
===='''SPECIAL FIELDS FOR DOCUMENT MANAGING'''====
 
<u>[[Training:MDrivenServer periodic server-side actions|More about server-side actions]]</u>


==== TABS ====
=='''SPECIAL FIELDS FOR DOCUMENT MANAGING'''==
You can create tabs in 2 ways: by using a groupbox or just setting the buttons in one row, one after another.


But '''using a groupbox is strongly recommanded'''!
=== TABS ===
* create groupbox without heading and set style-ref to '''''tk-tabs-group''''' 
 
* add proper amount of tab-buttons (distribute the columns for buttons inside the groupbox equally) and set every button style-ref to '''tk-tab-btn'''
==== How to create a tabs-group with a GroupBox ====
* for the chosen tab (button) set the state - '''disabled'''
* Create a GroupBox without a heading (+ add "HideHeading" tagged value) and set style-ref to '''''tk-tabs-group''''' (+ add "HideHeading") 
* now copy the groupbox of buttons to every page needed, don't forget to change the disabled state for the current tab   
* Add a proper amount of tab-buttons (distribute the columns for buttons inside the GroupBox equally) and set every button style-ref to '''tk-tab-btn flat'''
* For the chosen tab (button) and set the state - '''disabled''' and preferred style ref e.g. '''tk-tab-btn primary flat''' (all the possible styles listed further)
* Now copy the GroupBox of buttons to every page needed. Don't forget to change the disabled state for the current tab.  
{| class="wikitable"
{| class="wikitable"
|[[File:Tab-btn.png|center|frameless|496x496px]]
|[[File:Tab-btn.png|center|frameless|552x552px]]
|[[File:Tabs-default.png|center|frameless|489x489px]]
|[[File:Screenshot 2020-12-02 at 12.36.27.png|center|frameless|528x528px]]
|[[File:Tabs primary flat.png|center|frameless|460x460px]]
|[[File:Screenshot 2020-12-02 at 12.36.34.png|center|frameless|540x540px]]
|-
|-
|'''''tk-tabs-group'''''  
|'''''tk-tabs-group'''''  
'''''+ tk-tab-btn flat'''''
'''''(every button) tk-tab-btn flat'''''
 
(current tab) '''''tk-tab-btn flat'''''
|'''''tk-tabs-group'''''
|'''''tk-tabs-group'''''
'''''+ tk-tab-btn primary'''''
'''''(every button) tk-tab-btn flat'''''
 
(current tab) '''''tk-tab-btn primary''''' (without '''flat''')
|'''''tk-tabs-group'''''  
|'''''tk-tabs-group'''''  
'''''+ tk-tab-btn flat primary'''''  
'''''(every button) tk-tab-btn flat'''''
|}  
 
(current tab) '''''tk-tab-btn primary flat'''''  
|}
 
=== PAGE HEADERS ===
Create page headers with subheaders like this:
 
[[File:Screenshot_2020-12-06_at_01.03.51.png|frameless|429x429px]]
* Create two table-columns for Page-header and its Subheader
* Choose the size of your Page Header from '''h1''' to '''h5''' and add it to the style ref
* Add "'''tk-sub-header"''' to the Subheader style
 
==='''UI KIT'''===
[[Category:WebUI]]
{{Edited|July|12|2024}}


===='''UI KIT'''====
[[Category:TOC]]

Latest revision as of 13:47, 26 March 2024

What are Modifier-classes?

Modifier-classes define the SciFree style and customize it within the Turnkey Style System.

Use Turnkey or MDriven modifier classes by putting them into the style ref in the View Model Editor.

Example style for the buttons:

1326px-Screenshot 2020-08-16 at 00.43.17.png

Downloading this CSS-file

You can download the CSS file here (stylesheet) that contains all the style data with the latest changes.

TEXT

You can style the text with modifier-classes like:

TEXT
Type here tk-bold
Type here tk-italic

Type here

tk-primary

Type here

tk-success

Type here

tk-error
CHIPS

Type here

tk-grey-chip

Type here

tk-blue-chip

Type here

tk-green-chip

Type here

tk-yellow-chip

Type here

th-red-chip

Chips can be used in the table to highlight different statuses or process stages. E.g.:

Pending...

BUTTONS

There are three forms of buttons in the Turnkey Style System: default, outlined, and flat.

You can also use colors like primary (main SciFree color), danger, or success. For more colors, follow the Turnkey Style System.

Choose the needed form and color then put their modifier-classes into the style-ref. (you don't need to add 'default' styling).

E.g.: primary, primary outlined, primary flat, danger, danger flat, etc.

MODIFIER CLASSES ARE FOR BUTTONS AND LINKS ONLY. USE MD-PREFIXED CLASSES FOR STYLING TEXT- e.g. tk-primary.

Screenshot 2020-11-30 at 02.32.33.png

SPECIAL BUTTONS

Also, you can stack on top of modifier-classes for special buttons (adds special Material Design Icons).

You can remove the "action name" for the button and the standalone icon without text as a button.

Example Style reference
Upload-btn.png

tk-upload-btn primary

Delete-btn.png

tk-delete-btn primary

Back-btn.png

tk-back-btn primary

tk-next-btn primary

tk-search-btn primary

Remove-flat.png
tk-remove-btn primary flat

(standalone icon without text)

Tk-add-btn.png
tk-add-btn primary flat

(standalone icon without text)

Add.png
tk-add-btn primary flat
Info.png
tk-info-btn flat

SPECIAL ICONS

Add icons to any element (not only the buttons) by using the following classes.

Doc.png
Location.png
tk-document

tk-primary

tk-location

tk-primary

INFO-ELEMENTS

Info-elements can be static or removable.

Info-text.png
Info-box.png
Info-banner.png
tk-info-text

(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)

tk-info-box

(static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)

tk-info-banner

(special info-help for newbies, removable groupbox, that contains text and action to remove it, can be added at the top of the page, tagged value: HideHeading)

How to create an info-banner

Create a GroupBox of 1 row and 12 col with style-ref: tk-info-banner, add static-text of 11cols, and action tk-remove-btn of 1 col inside.

How-info-banner.png

To make it removable:

  1. Create a Boolean variable (vRemoveInfo, false )
  2. Make the GroupBox visible, when vRemoveInfo is true only
  3. Set the remove action EAL expression to vRemoveInfo := true

TABLES

Table.png
tk-table

Both variants can be used without a heading by adding a tagged value: HideHeading.

Choose the style of the text for each column: e.g. Main object is bold - tk-bold, or with SciFree colors - tk-primary

REPORTING STATES

Use reporting states with icons by adding the following modifier-classes. You can choose to colour them in tk-primary/tk-success/tk-danger colour or just leave it to the default grey, without adding any additional modifier classes.

Upload.png
Processing.png
Waiting.png
Done.png
Error.png
tk-uploading-state

tk-primary

tk-processing-state

tk-primary

tk-waiting-state

tk-primary

tk-success-state

tk-success

tk-error-state

tk-danger

CARDS (wrappers for GroupBoxes)

Group-card.png

tk-group-card

(tagged-value: HideHeading)

LISTS

Tables in the form of lists

List0def.png
List-prim.png
tk-items-list--default tk-items-list--primary

To make a list of affiliations like in the example:

  • Use tk-document style ref to the name of the document column
  • Add "remove action" with tk-remove-btn flat style ref

SEARCH with DROPDOWN OF SUGGESTIONS

Searchbox.png

To make a search field like in the example(with an add action):

  • Create a GroupBox with tk-searchbox style ref that includes search input with the vSeekParam variable and a table of results - vSeekerResult Seaker.png
  • Include the search input that takes 1 row and adds "HideHeading" and proper "Placeholder" tagged values (see also Databound Placeholder text). Seaker-2.png
  • Set style ref for search input as an expression (if the vSeekParam is not empty and there are more than 0 results, then 'tk-searchbox--searching' class should be added).
if not vSeekParam.isNullOrEmpty and (Something.allInstances->size > 0) then 'tk-searchbox__input tk-searchbox--searching' else 'tk-searchbox__input'  endif
  • Set table of results is a nested ViewModel class that contains one or two attributes and optional action; (optional) add "add action" with tk-add-btn primary style ref to the nesting and set its expression to:
vCurrent_SearchResultGrid;/*Choose the current row in the results grid*/ 
vCurrent_Something.Something.add(vCurrent_SearchResultGrid); /*Main action*/ 
vSeekParam := String.NullValue /*Clean the search input field*/
  • Set "HideHeading" tagged value
  • Set style ref - "tk-searchbox__results";
  • Set visible expression to results if the search field is not empty and there are more than 0 results
not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0) 

Now, you can set a search server-side action that runs every 30ms only when the search field is not empty (DisabledExpression: vSeekParam->isEmpty )

More about server-side actions

SPECIAL FIELDS FOR DOCUMENT MANAGING

TABS

How to create a tabs-group with a GroupBox

  • Create a GroupBox without a heading (+ add "HideHeading" tagged value) and set style-ref to tk-tabs-group (+ add "HideHeading") 
  • Add a proper amount of tab-buttons (distribute the columns for buttons inside the GroupBox equally) and set every button style-ref to tk-tab-btn flat
  • For the chosen tab (button) and set the state - disabled and preferred style ref e.g. tk-tab-btn primary flat (all the possible styles listed further)
  • Now copy the GroupBox of buttons to every page needed. Don't forget to change the disabled state for the current tab.
Tab-btn.png
Screenshot 2020-12-02 at 12.36.27.png
Screenshot 2020-12-02 at 12.36.34.png
tk-tabs-group

(every button) tk-tab-btn flat

(current tab) tk-tab-btn flat

tk-tabs-group

(every button) tk-tab-btn flat

(current tab) tk-tab-btn primary (without flat)

tk-tabs-group

(every button) tk-tab-btn flat

(current tab) tk-tab-btn primary flat

PAGE HEADERS

Create page headers with subheaders like this:

Screenshot 2020-12-06 at 01.03.51.png

  • Create two table-columns for Page-header and its Subheader
  • Choose the size of your Page Header from h1 to h5 and add it to the style ref
  • Add "tk-sub-header" to the Subheader style

UI KIT

This page was edited 3 days ago on 03/26/2024. What links here