Headings

# This is h1 Secondary text

## This is h2 Secondary text

### This is h3 Secondary text

#### This is h4 Secondary text

##### This is h5 Secondary text

###### This is h6 Secondary text

Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum. Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur. Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta. Dumque ibi diu moratur commeatus opperiens, quorum translationem ex Aquitania verni imbres solito crebriores prohibebant auctique torrentes, Herculanus advenit protector domesticus, Hermogenis ex magistro equitum filius, apud Constantinopolim, ut supra rettulimus, populari quondam turbela discerpti. quo verissime referente quae Gallus egerat, damnis super praeteritis maerens et futurorum timore suspensus angorem animi quam diu potuit emendabat. Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.
Selected book is {{demoComponentsController.selectedBook}}
Material design icons
The dropdown button is disabled: <che-button-dropdown button-style="che-button-primary" main-action-config="demoComponentsController.buttonDropdownConfig.mainAction" other-actions-config="demoComponentsController.buttonDropdownConfig.otherActions" button-disabled="dropdownDisabled"></che-button-dropdown>
<che-button-cancel-flat che-button-title="Cancel Button Flat"></che-button-cancel-flat> <che-button-cancel-flat che-button-title="Cancel Button Flat With Icon" che-button-icon="fa fa-ban"></che-button-cancel-flat> <che-button-danger che-button-title="Danger Button"></che-button-danger> <che-button-danger che-button-title="Danger Button With Icon" che-button-icon="fa fa-trash"></che-button-danger> <che-button-default che-button-title="Default Button"></che-button-default> <che-button-default che-button-title="Default Button With Icon" che-button-icon="fa fa-check-square"></che-button-default> <che-button-notice che-button-title="Notice Button"></che-button-notice> <che-button-notice che-button-title="Notice Button With Icon" che-button-icon="fa fa-check-square"></che-button-notice> <che-button-primary che-button-title="Primary Button"></che-button-primary> <che-button-primary che-button-title="Primary Button With Icon" che-button-icon="fa fa-file-text-o"></che-button-primary> <che-button-primary-flat che-button-title="Primary Button Flat"></che-button-primary-flat> <che-button-primary-flat che-button-title="Primary Button Flat With Icon" che-button-icon="fa fa-file-text-o"></che-button-primary-flat> <che-button-save-flat che-button-title="Save Button Flat"></che-button-save-flat> <che-button-save-flat che-button-title="Save Button Flat With Icon" che-button-icon="fa fa-floppy-o"></che-button-save-flat> <che-button-warning che-button-title="Warning Button"></che-button-warning> <che-button-warning che-button-title="Warning Button" che-button-icon="fa fa-trash"></che-button-warning>

Selected value of toggle is : {{demoComponentsController.selectedToggle}}

model value: {{demoComponentsController.number}}<br/> <!-- <che-number-spinner> --> <che-number-spinner che-form="demoForm" che-name="spin" che-step="5" che-tofixed="2" che-minvalue="0" che-maxvalue="99" che-unit="GB" ng-model="demoComponentsController.number" ng-change="demoComponentsController.numberChanged()" required> <div ng-message="required">A value is required.</div> <div ng-message="min">The value has to be greater than 0.</div> <div ng-message="max">The value has to be less than 99.</div> </che-number-spinner> <div layout="column"> <label>Readonly: <input type="checkbox" ng-model="readonly"></label> <label>Disabled: <input type="checkbox" ng-model="disabled"></label> </div> <!-- che-input --> <che-input che-form="demoForm" che-name="demoinput" che-label-name="Name" che-place-holder="Name of this demo" ng-model="demoComponentsCtrl.selectedInput" ng-model="demoComponentsController.demoInput" che-readonly="readonly" che-disabled="disabled"> </che-input> <!-- che-input --> <!-- type="number" --> <che-input che-form="demoForm" che-name="demoinput2" che-place-holder="Name of this demo" ng-model="demoComponentsController.demoInput" type="number"> </che-input> <!-- che-input --> <!-- validation messages --> <che-input che-form="demoForm" che-name="demoinput2" che-place-holder="Name of this demo" ng-model="demoComponentsController.demoInput" ng-minlength="3" ng-maxlength="8" required ng-maxlength="128" ng-pattern="/^[A-Za-z0-9_\-\.]+$/"> <div ng-message="required">A name is required.</div> <div ng-message="pattern">The name should not contain special characters like space, dollar, etc.</div> <div ng-message="maxlength">The name has to be less than 128 characters long.</div> <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div> <div ng-message="minlength">The value has to be more than 3 characters long.</div> <div ng-message="maxlength">The value has to be less than 8 characters long.</div> <div ng-message="pattern">The name value not contain special characters like space, dollar, etc.</div> <div ng-message="required">A value is required.</div> </che-input> <!-- che-textarea --> <che-textarea che-form="demoForm" che-name="demotextarea" che-place-holder="Text" ng-model="demoComponentsController.demoTextarea"> </che-textarea>
{{document}}
{{task.name}}
<!-- che-label-container --> <che-label-container che-label-name="container name" che-label-description="This text describes container content."> <p> Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est. </p> </che-label-container> <!-- che-label-container --> <!-- changes layout on 'gt-sm' breakpoint --> <che-label-container che-label-name="container name" che-label-description="This text describes container content." che-transclude-layout="true" layout="column" layout-gt-sm="row"> <p> Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est. </p> </che-label-container> <!-- che-label-container --> <!-- aligning of che-input --> <che-label-container che-label-name="container name" che-label-description="This text describes container content." che-transclude-layout="true" layout="column" layout-gt-sm="row"> <div style="margin-top: -12px;"> <ng-form name="demoForm"> <che-input che-form="demoForm" che-name="demoinput3" che-place-holder="Name of this demo" ng-model="demoComponentsController.demoInput" required> <div ng-message="required">A name is required.</div> </che-input> </ng-form> </div> <p> Mel no ullum appareat, est ex virtute indoctum, duo fabulas epicuri principes at. Vis option recteque vulputate eu, harum voluptaria intellegebat pro in, vix cu graeci vivendum intellegebat. Ius docendi invidunt convenire ad. Nam nibh expetendis cu, congue molestiae dissentiunt pri eu, eu virtute alterum repudiandae nec. Te eam vitae libris, nec ut suas errem volumus, ei numquam phaedrum rationibus pri. Verear dissentiunt theophrastus eum ex, ex adhuc appareat moderatius est. </p> </che-label-container>
<!-- toggle-button-popover --> <toggle-button-popover button-title="PopupTags" button-value="isOpen" button-font-icon="fa fa-sliders"> <che-stack-library-filter stack-tags="['tag1', 'tag2', 'tag3', 'tag4']" selected-tags="selectedTags"> </che-stack-library-filter> </toggle-button-popover> <button class="btn btn-default" ng-click="isOpen = !isOpen">Change popover state</button>

#### Popover placement

<!-- html-popover-placement --> <button popover-placement="{{demoComponentsController.placement.selected}}" uib-popover-html="'<b>HTML!!!</b>, <i>inline</i>'" class="btn btn-default">HTML Popover (inline)</button>
Panel Is Visible
Panel Is Visible
Message Content
Visible
SAVE button Title
Disabled
APPLY button Title
Disabled
CANCEL button Title
Disabled
<che-edit-mode-overlay config="demoComponentsController.overlayConfig"></che-edit-mode-overlay>