           BASIC HELP : MS4BI by MS4script   
   2022 version 1.10

Chapter 11 : Responsive UI

KEYWORD : BUTTON

Definition
In a division block, defines a BUTTON : inserts an attribute, an icon, a url link

Reminder:
A division is represented by < open division ....> close division

Syntax 1

 
	 <button :   attribute   ," literal 1 your text" >;

Example 1

 
 <button :   $Bts_btn_default   ,"Default">;
 <button :   $Bts_btn_success   ,"Success">;
 <button :   $Bts_btn_primary   ,"Primary">; 
 <button :   $Bts_btn_info      ,"Info">;
 <button :   $Bts_btn_warning   ,"Warning">;
 <button :   $Bts_btn_danger    ,"Danger">;
 <button :   $Bts_btn_link      ,"Link">;

Example 1 Output

Normal Buttons

Disabled Buttons

Button Sizes

Block level button

Syntax 2

 
  <button :   attribute   , ICON : VarIcon >;
  or
  <button :   attribute   , ICON : VarIcon , " literal 1 your text" >;

Example 2

 
<button :   $Bts_default_btn_circle,  icon   :  $fa_check , text : "" >	;
<button :   $Bts_primary_btn_circle,  icon   :  $fa_list , text : "" >	; 
<button :   $Bts_success_btn_circle ,  icon   : $fa_link , text : "" >	; 
<button :   $Bts_info_btn_circle,  icon   :  $fa_check , text : "" >	;
<button :   $Bts_warning_btn_circle,  icon   :  $fa_times , text : "" >	;
<button :   $Bts_danger_btn_circle,  icon   :  $fa_heart , text : "" >	;

Example 2 Output

Normal Round Buttons

Round Icon Buttons with Font Awesome Icons

Large Round Buttons

Extra Large Round Buttons

Outline Buttons

Outline Buttons with Smooth Transition

Outline Button Sizes

Social Buttons

Social Buttons with Font Awesome Icons

Syntax 3

 
  <URL :   " url"   , " literal 1 your url text" >;
or
   <URL :   " url"   , STYLE : "font-size:XXpx;color;red..", " literal 1 your url text" >;
or	  	
   <URL :   " url"   , BUTTON : attribute, TEXT : " literal 1 your url text" >;
or	  	
   <URL :   " url"   , BUTTON : attribute, ICON : VarIcon, TEXT : " literal 1 your url text" >;

Example 3

 
<url : "https://getms4bi.com"	,  " Link MS4bi.com" 	>;
<url : "https://getms4bi.com"    style  : "font-size:28px;color : red;" , text : "   MS4bi.com"	  >;	
<url : "https://getms4bi.com"    button :   $Bts_btn_danger   , text :  "  MS4bi.com"	 >;	
<url : "http://facebook.com"      button :  $Bts_btn_social_facebook  ,icon :$fa_facebook , Text : ""	 >;

Example 3 Output

Url & Link

simple url :

Link MS4bi.com

simple url + style :

MS4bi.com

simple url + button :

simple url + Button + Icon :

RESPONSIVE TABLE 2 (var)

Total messages	Posts	Comments
News	Likes	Notifications
Albums	Groups	Permissions

Syntax 4

 
 <button :  attribute  , 
  <icon   : (attribute 1 + attribute 2 +..) VarIconleft ,   style:"color:XXX;font-size:XXXpx or rem"   , 
      <TEXT :attribute,"your text ">
 	> 
  >;

Example 4

 
<button :  $Bts_btn_Success  , 
 <icon   :  $fa_3x + $fa_pull_left + $fa_flag,   style:"color:red;font-size:8rem"   , 
   <TEXT :"","  /R  ORDERS /n/n 12.856 /r  "   >
 > 
>;

Example 4 Output

BUTTON + ICON + STYLE + TEXT

Syntax 5

 
<URL :  " literal url "   ,  	
 <BUTTON :  attribute  , 
  <ICON   : (attribute 1 + attribute 2 +..) VarIconleft ,   STYLE:"color:XXX;font-size:XXXpx or rem"   , 
      <TEXT :attribute,"your text ">
 	> 
  >
>;

Example 5

 
<URL :	
<button :  $Bts_btn_info  , 
 <icon   :  $fa_3x + $fa_pull_left + $fa_flag,   style:"color:blue;font-size:8rem"   , 
   <TEXT :"","  /R  ORDERS /n/n 12.856 /r  "   >
  > 
 >
>;

Example 5 Output

URL + BUTTON + ICON + STYLE + TEXT

Visualise ALL Examples : UI

Prerequisites
#includeSYSpathMS4BI "zInclude\includeChart.h"
- Customisation: all the attributes can be declared in "zInclude\includeChart.h" or another filename.h

Remarks
This example :
driver::\MandragorePlanete\MS4BI\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\90-OTHERS-UI
- We based our main UIs on the widely known and distributed Bootstrap conventions
- The content of a responsive table may include all the MarkerDown abbreviations
Attributes that are currently included in includeChart.h:
$Bts_btn_default
$Bts_btn_success
$Bts_btn_primary
$Bts_btn_info
$Bts_btn_warning
$Bts_btn_danger
$Bts_btn_link
$Bts_btn_default_disabled
$Bts_btn_primary_disabled
$Bts_btn_success_disabled
$Bts_btn_info_disabled
$Bts_btn_warning_disabled
$Bts_btn_danger_disabled
$Bts_btn_link_disabled
$Bts_btn_primary_btn_lg
$Bts_btn_primary_btn_xs
$Bts_btn_primary_btn_sm
$Bts_btn_danger_btn_sm
$Bts_btn_info_btn_sm
$Bts_btn_success_btn_sm
$Bts_btn_warning_btn_sm
$Bts_btn_default_btn_sm
$Bts_btn_xs
$Bts_btn_lg
$Bts_btn_sm
$Bts_primary_btn_lg_block
$Bts_default_btn_circle
$Bts_primary_btn_circle
$Bts_success_btn_circle
$Bts_info_btn_circle
$Bts_warning_btn_circle
$Bts_danger_btn_circle
$Bts_default_btn_circle_lg
$Bts_primary_btn_circle_lg
$Bts_success_btn_circle_lg
$Bts_info_btn_circle_lg
$Bts_warning_btn_circle_lg
$Bts_danger_btn_circle_lg
$Bts_default_btn_circle_xl
$Bts_primary_btn_circle_xl
$Bts_success_btn_circle_xl
$Bts_info_btn_circle_xl
$Bts_warning_btn_circle_xl
$Bts_danger_btn_circle_xl
$Bts_default_btn_outline
$Bts_primary_btn_outline
$Bts_success_btn_outline
$Bts_info_btn_outline
$Bts_warning_btn_outline
$Bts_danger_btn_outline
$Bts_link_btn_outline
$Bts_primary_btn_outline_btn_lg
$Bts_primary_btn_outline_btn_sm
$Bts_primary_btn_outline_btn_xs
$Bts_primary_btn_outline_lg_btn_block
$Bts_btn_social_block_bitbucket
$Bts_btn_social_block_dropbox
$Bts_btn_social_block_facebook
$Bts_btn_social_block_flickr
$Bts_btn_social_block_github
$Bts_btn_social_block_google_plus
$Bts_btn_social_block_instagram
$Bts_btn_social_block_linkedin
$Bts_btn_social_block_pinterest
$Bts_btn_social_block_tumblr
$Bts_btn_social_block_twitter
$Bts_btn_social_block_vk
$Bts_btn_social_bitbucket
$Bts_btn_social_dropbox
$Bts_btn_social_facebook
$Bts_btn_social_flickr
$Bts_btn_social_github
$Bts_btn_social_google_plus
$Bts_btn_social_instagram
$Bts_btn_social_linkedin
$Bts_btn_social_pinterest
$Bts_btn_social_tumblr
$Bts_btn_social_twitter
$Bts_btn_social_vk

  	
	  Visualise MarkerDown Syntax    
	
 	  Source & Copy MarkerDown Syntax

See also
BEGIN_DIV : TABLE RESPONSIVE , POSITION :RELATIVE, POSITION :ABSOLUTE, PANEL, ICON, TEXT , LIST_GROUP , TABLE TROW,TCELL, NOTIFICATION, PROGRESSBAR;

KEYWORD : PROGRESSBAR

<div attribute (bootstrap)>

Definition
Defines a PROGRESSBAR (bootstrap) with attributes, %,... in a division block
Reminder:
A division is represented by < open division ....> close division

Syntax

 
 
 <div attribute	 :
   <div "style='width:XX%;' " or string +  attribute 1 + attribute 2..  
    >, /* end div */
 >, /* end div progress bar*/

Example 1

 
	 		
   Progress Bar UI

Example 1 Output

MS4BI : UI Progress Bar

Memory 10/200 GB

Bandwidth 20 GB

Activity 73%

Visualise ALL Examples : UI

Prerequisites
#includeSYSpathMS4BI "zInclude\includeChart.h"
- Customisation: all the attributes can be declared in "zInclude\includeChart.h" or another filename.h

Remarks
This example :
driver:\MandragorePlanete\MS4BI\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\90-OTHERS-UI
- The contents of a PROGRESS BAR may contain all the MarkerDown abbreviations.
Attributes :
$Bts_progress_small
$Bts_progress_bar
  
  Visualise MarkerDown Syntax    
	
 	  Source & Copy MarkerDown Syntax    	


	

See also
BEGIN_DIV : TABLE RESPONSIVE , POSITION :RELATIVE, POSITION :ABSOLUTE, PANEL, ICON, TEXT , LIST_GROUP , TABLE TROW,TCELL, NOTIFICATION, PROGRESSBAR;

Interested in joining us? contact@mgplanete.com
The Mg Planete team

the official sites :
mgplanete.com
getms4bi.com
demos.ms4bi.com
help.ms4bi.com
ms4script.com

Download

official site :
getms4bi.com

Our purpose : Keep it simple !

written with ms4script

help 01.010.2022.8

MS4BI HELP 2022

Designer

BASIC HELP : MS4BI by MS4script

Chapter 11 : Responsive UI

KEYWORD : BUTTON

Definition

Reminder:

Syntax 1

Example 1

Example 1 Output

Normal Buttons

Disabled Buttons

Button Sizes

Block level button

Syntax 2

Example 2

Example 2 Output

Normal Round Buttons

Round Icon Buttons with Font Awesome Icons

Large Round Buttons

Extra Large Round Buttons

Outline Buttons

Outline Buttons with Smooth Transition

Outline Button Sizes

Social Buttons

Social Buttons with Font Awesome Icons

Syntax 3

Example 3

Example 3 Output

Url & Link

simple url :

simple url + style :

simple url + button :

simple url + Button + Icon :

RESPONSIVE TABLE 2 (var)

Syntax 4

Example 4

Example 4 Output

BUTTON + ICON + STYLE + TEXT

Syntax 5

Example 5

Example 5 Output

URL + BUTTON + ICON + STYLE + TEXT

Prerequisites

Remarks

See also

KEYWORD : PROGRESSBAR

<div attribute (bootstrap)>

Definition

Reminder:

Syntax

Example 1

Progress Bar UI

Example 1 Output

MS4BI : UI Progress Bar

Prerequisites

Remarks

See also

Copyright 2022 by Mandragore Planete

Download

Our purpose : Keep it simple !

MS4BI in 5 minutes