![]() ![]() #groups > li > a.hovered, #groups > li > a. adapted css for the new version of SpeedDial2 some little details (search field, icon settings, background groups label) Inheritance While not explicitly documented above, the props of the Tooltip component are also available on SpeedDialAction. ![]() The ref is forwarded to the root element. Props Props of the Tooltip component are also available. Floating Action Button Link 1 Link 2 Link 3 plus xmark add close 1 2 3 Component name The name MuiSpeedDialAction can be used when providing default props or style overrides in the theme. Note that commented variables are not specified by default and their values is what they fallback to in this case. It is possible to open and close required FAB (if you have it in DOM) using special classes and data attributes on links: OptionalĬlose FAB speed dial actions/buttons, or morph it back from specified targetįAB will fire the following DOM events on FAB element: EventĮvent will be triggered on FAB open or when it morphs to target elementĮvent will be triggered on FAB close or when it morphs back from target element targetEl - HTMLElement or string (with CSS Selector) of FAB morph target.fabEl - HTMLElement or string (with CSS Selector) of required FAB.Open FAB speed dial actions/buttons, or morph it to specified target We can use following app methods to control FABs: ( fabEl, targetEl) fab-morph-target - additional required class on FAB morph target, in this example it is added to Toolbar.data-morph-to - additional attribute on FAB where target element's CSS selector must be specified.There is also ability for FAB to morph to any visible element on page. To make it work, we just need to add backdrop element on same level as FAB element: It is also possible to add backdrop (semi-transparent overlay) behind the FAB that will become visible on FAB open. In this case layout will be a bit extended: 1 Action 1 2 Action 2 Speed dial buttons also support additional text labels. You should use at least 3 Speed Dial actions You shouldn't use more than 6 Speed Dial actions Note that Speed Dial actions buttons will appear in reversed order fab-buttons-center - buttons will appear around of FAB.fab-buttons-left - buttons will appear on left of FAB. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |