import * as React from 'react' ; import { Page , Navbar , ContentBlock , Fab , FabSpeedDial , FabSpeedDialActions , FabSpeedDialAction , Icon } from 'framework7-react' ; const onActionClick = ( ) => { console . log ( 'Dial action clicked!' ) ; } ; export const FabDialPage = ( ) => { return ( < Page > < Navbar backLink = "Back" title = "FAB Speed Dial" sliding / > < FabSpeedDial > < FabSpeedDialActions > < FabSpeedDialAction color = "pink" onClick = { onActionClick } > A < /FabSpeedDialAction> < FabSpeedDialAction color = "orange" onClick = { onActionClick } > B < /FabSpeedDialAction> < FabSpeedDialAction color = "green" onClick = { onActionClick } > C < /FabSpeedDialAction> < /FabSpeedDialActions> < Fab > < Icon icon = "icon-plus" > < /Icon> < Icon icon = "icon-close" > < /Icon> < /Fab> < /FabSpeedDial> < ContentBlock > < p > Lorem ipsum dolor sit amet , consectetur adipisicing elit . Reiciendis autem necessitatibus , commodi nostrum ad , quod laudantium magnam facilis sed explicabo maiores aliquam , iure ipsam totam . Cum rerum facilis , eveniet temporibus . < /p> < p > Blanditiis mollitia recusandae eius , repellat , vero nihil totam , asperiores voluptas vitae omnis sapiente . Optio recusandae impedit quae pariatur rem sed officia fugiat ipsum , ut esse ex delectus , provident . Error , fuga . < /p> < p > Labore harum dignissimos obcaecati quae ? In cum pariatur culpa delectus provident alias sed libero optio assumenda recusandae doloribus praesentium , natus , quaerat itaque consequuntur velit ipsam minus illo reiciendis rem quisquam . < /p> < p > Necessitatibus aut optio consectetur quia illum praesentium culpa , alias aliquam accusantium , molestiae sapiente tenetur porro ipsum eligendi doloribus qui laudantium corporis ullam dolore . Illum , nostrum , eveniet ? Explicabo quibusdam assumenda unde . < /p> < p > Mollitia libero explicabo nemo id nesciunt blanditiis repellat sed alias ipsum saepe repellendus dolorum laborum molestias commodi quia temporibus error provident , vitae nihil eum corporis , voluptatum . Nobis quasi error porro ? < /p> < p > Perspiciatis illo veniam dolorem , dignissimos provident odio maiores sit voluptatem , commodi nostrum non quidem molestias rem dolores , magni odit omnis officiis ? Quia impedit atque ut optio officiis , pariatur necessitatibus voluptatum . < /p> < p > Eveniet officiis iure voluptatum , deserunt explicabo recusandae nemo aperiam dolorem quaerat sapiente . Quo facilis aspernatur fuga , fugit animi provident voluptas excepturi . Nihil deleniti , quisquam , ipsa eaque recusandae deserunt placeat iste ! < /p> < p > Rem , corporis doloremque porro neque incidunt sequi molestiae consectetur , mollitia repellendus , ipsa laborum omnis commodi similique . Nulla assumenda cumque distinctio saepe at voluptatem laudantium soluta , enim , perspiciatis , accusamus , non officia . < /p> < p > Obcaecati odit libero dolor , quasi corporis , illum . Modi voluptatum , alias ea quia dolorem sapiente dolor qui nihil expedita fugiat provident omnis quidem explicabo vitae , non pariatur . Laudantium , explicabo , dolorem . Sunt . < /p> < p > Expedita architecto , consectetur quo veniam , labore , optio aut illo quibusdam minus doloremque mollitia voluptate corrupti dolorum maxime repellendus a qui sunt omnis ? Voluptas esse officia porro dicta officiis incidunt facilis ! < /p> < p > Nam aperiam pariatur quo repellat maiores voluptatibus , excepturi mollitia , dolores eveniet suscipit in a ex voluptas dignissimos soluta aspernatur eius quasi . Illum quis iusto dignissimos commodi sequi dolores non , laboriosam ? < /p> < p > Minima quas illum consectetur , id cumque odit dolor dolores tempora suscipit sapiente rem repudiandae , a veniam , non officiis facere , enim earum est . Rerum ullam consectetur , voluptatibus , dolor amet eligendi voluptatem ? < /p> < p > Eius ad earum , vero eos . Odit blanditiis explicabo maiores , sint facere qui adipisci temporibus officia rerum voluptatibus debitis . Veritatis tempore rem porro illum quasi aut eveniet molestiae modi , aliquam impedit ! < /p> < p > Aliquam suscipit sunt dolorum sapiente deleniti natus a beatae labore libero excepturi laudantium molestiae magni hic itaque officiis unde doloribus enim placeat nisi dolore , voluptas ipsum quaerat ! Magnam , culpa , natus . < /p> < p > Est quidem doloremque , tempore quam earum ipsa accusantium , suscipit quaerat vitae pariatur velit sit expedita atque . Doloribus magnam magni ab , autem aliquam veritatis ! Perspiciatis , laboriosam provident , impedit saepe maxime aspernatur . < /p> < p > Autem nihil voluptatem beatae deserunt distinctio ex ad maiores adipisci omnis et , sint quia eveniet expedita quis provident dolores ? Sit ipsam saepe , consequuntur ! Eos non amet mollitia nesciunt labore error . < /p> < p > Esse voluptatum animi tempora voluptatem , quibusdam nobis tenetur , odio optio placeat , nesciunt praesentium consequuntur consequatur repellat alias porro ! Enim veritatis nobis a aspernatur maiores nostrum praesentium , consequatur laudantium quos ratione . < /p> < p > Adipisci amet , tempore , distinctio laboriosam nisi numquam earum , reprehenderit nesciunt esse quam illum , illo similique provident in a commodi dignissimos consectetur neque enim porro . Sint maiores pariatur ab iusto quo ! < /p> < p > Consectetur non , reprehenderit fuga , vitae pariatur est numquam mollitia eius ut at enim cumque . Sunt consequuntur aut , amet fuga ! Omnis architecto autem necessitatibus voluptatem sunt minus quod quam laborum inventore . < /p> < p > Error excepturi libero commodi , consequuntur molestiae facilis ea ! Quod molestiae a voluptates ex maiores harum , aut reprehenderit repudiandae temporibus officiis , esse ratione est asperiores architecto nesciunt veritatis laudantium recusandae . Harum ! < /p> < /ContentBlock> < /Page>); } ;