-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2423 from boltdesignsystem/feature/DS-541-floatin…
…g-action-buttons DS-541 Floating Action Buttons
- Loading branch information
Showing
38 changed files
with
1,624 additions
and
8 deletions.
There are no files selected for viewing
89 changes: 89 additions & 0 deletions
89
...ab/_patterns/40-components/floating-action-buttons/-05a-floating-action-buttons-demo.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| {% extends '@pl/_site-layout-template.twig' %} | ||
|
|
||
| {% block main_content %} | ||
| {% set layout_items %} | ||
| {% set banner %} | ||
| {% include '@bolt-components-banner/banner.twig' with { | ||
| content: 'This demo shows the usage of basic floating action buttons. In this particular case, a scroll to top button is utilized.', | ||
| align: 'start', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: banner, | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', | ||
| } only %} | ||
| {% endset %} | ||
| {% set fab %} | ||
| {% set scroll_to_top_button %} | ||
| {% set trigger %} | ||
| {% set icon_chevron_up %} | ||
| {% include '@bolt-components-icon/icon.twig' with { | ||
| name: 'chevron-up', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-button/button.twig' with { | ||
| content: 'Back to top', | ||
| border_radius: 'full', | ||
| icon_only: icon_chevron_up, | ||
| attributes: { | ||
| href: '#top', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-tooltip/tooltip.twig' with { | ||
| content: 'Back to top', | ||
| placement: 'left', | ||
| trigger: trigger, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set fab_list_items %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { | ||
| content: scroll_to_top_button, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set fab_list %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { | ||
| content: fab_list_items, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { | ||
| content: fab_list, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-layouts-layout/layout.twig' with { | ||
| content: layout_items ~ fab, | ||
| } only %} | ||
| {% endblock %} |
170 changes: 170 additions & 0 deletions
170
...ts/floating-action-buttons/-10a-floating-action-buttons-demo-show-on-scroll-selector.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| {% extends '@pl/_site-layout-template.twig' %} | ||
|
|
||
| {% block main_content %} | ||
| {% set layout_items %} | ||
| {% set banner %} | ||
| {% include '@bolt-components-banner/banner.twig' with { | ||
| content: 'This demo shows individual floating action buttons to show on scroll. Once the user scrolls past Article Title, the buttons appear.', | ||
| align: 'start', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: banner, | ||
| } only %} | ||
|
|
||
| {% set title %} | ||
| {% include '@bolt-components-headline/headline.twig' with { | ||
| text: 'Article Title', | ||
| attributes: { | ||
| id: 'main-title' | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: title, | ||
| } only %} | ||
|
|
||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', | ||
| } only %} | ||
| {% include '@bolt-layouts-layout/layout-item.twig' with { | ||
| content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', | ||
| } only %} | ||
| {% endset %} | ||
| {% set fab %} | ||
| {% set scroll_to_top_button %} | ||
| {% set trigger %} | ||
| {% set icon_chevron_up %} | ||
| {% include '@bolt-components-icon/icon.twig' with { | ||
| name: 'chevron-up', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-button/button.twig' with { | ||
| content: 'Back to top', | ||
| border_radius: 'full', | ||
| icon_only: icon_chevron_up, | ||
| attributes: { | ||
| href: '#top', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-tooltip/tooltip.twig' with { | ||
| content: 'Back to top', | ||
| placement: 'left', | ||
| trigger: trigger, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set download_button %} | ||
| {% set trigger %} | ||
| {% set icon_download %} | ||
| {% include '@bolt-components-icon/icon.twig' with { | ||
| name: 'download', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-elements-button/button.twig' with { | ||
| content: 'Download', | ||
| border_radius: 'full', | ||
| icon_only: icon_download, | ||
| attributes: { | ||
| href: 'https://google.com', | ||
| }, | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-tooltip/tooltip.twig' with { | ||
| content: 'Download', | ||
| placement: 'left', | ||
| trigger: trigger, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set placeholder_button %} | ||
| {% set icon_link %} | ||
| {% include '@bolt-elements-icon/icon.twig' with { | ||
| name: 'external-link', | ||
| } only %} | ||
| {% endset %} | ||
| {% include '@bolt-components-tooltip/tooltip.twig' with { | ||
| content: 'Go to Google', | ||
| placement: 'left', | ||
| trigger: include('@bolt-elements-button/button.twig', { | ||
| content: 'Go to Google', | ||
| border_radius: 'full', | ||
| icon_only: icon_link, | ||
| attributes: { | ||
| href: 'https://www.google.com', | ||
| rel: 'noopener', | ||
| target: '_blank' | ||
| }, | ||
| }), | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set fab_list_items %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { | ||
| content: scroll_to_top_button, | ||
| show_on_scroll_selector: '#main-title' | ||
| } only %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { | ||
| content: download_button, | ||
| show_on_scroll_selector: '#main-title' | ||
| } only %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { | ||
| content: placeholder_button, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% set fab_list %} | ||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { | ||
| content: fab_list_items, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { | ||
| content: fab_list, | ||
| } only %} | ||
| {% endset %} | ||
|
|
||
| {% include '@bolt-layouts-layout/layout.twig' with { | ||
| content: layout_items ~ fab, | ||
| } only %} | ||
| {% endblock %} |
Oops, something went wrong.