| <!DOCTYPE html> |
| <html $i18n{chromeRefresh2023Attribute}> |
| <head> |
| <meta charset="utf-8"> |
| <title>cr-button demo</title> |
| <link rel="stylesheet" href="demo.css"> |
| <style> |
| cr-button[circle-ripple] { |
| height: 60px; |
| width: 60px; |
| } |
| |
| cr-expand-button { |
| padding: 0 12px; |
| } |
| |
| /* Some button styles are not available before Chrome Refresh 2023. |
| * cr-buttons that use these classes will fallback to the default |
| * button styles for non-[chrome-refresh-2023]. */ |
| html:not([chrome-refresh-2023]) .tonal-button, |
| html:not([chrome-refresh-2023]) .floating-button { |
| display: none; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>cr-button</h1> |
| <div class="demos"> |
| <cr-button>Default button</cr-button> |
| <cr-button class="action-button">Action button</cr-button> |
| <cr-button class="tonal-button">Tonal button</cr-button> |
| <cr-button class="floating-button">Floating button</cr-button> |
| <cr-button disabled>Disabled default button</cr-button> |
| <cr-button disabled class="action-button"> |
| Disabled action button |
| </cr-button> |
| <cr-button disabled class="tonal-button"> |
| Disabled tonal button |
| </cr-button> |
| <cr-button disabled class="floating-button"> |
| Disabled floating button |
| </cr-button> |
| <div class="flex"> |
| <cr-button class="cancel-button">Cancel</cr-button> |
| <cr-button class="action-button">Confirm</cr-button> |
| </div> |
| <div class="row"> |
| <cr-button circle-ripple>1</cr-button> |
| <cr-button circle-ripple>2</cr-button> |
| <cr-button circle-ripple>3</cr-button> |
| </div> |
| <div class="row"> |
| <cr-button> |
| Manage |
| <iron-icon icon="cr:open-in-new" slot="suffix-icon"></iron-icon> |
| </cr-button> |
| <cr-button> |
| <iron-icon icon="cr:add" slot="prefix-icon"></iron-icon> |
| Add current tab |
| </cr-button> |
| <cr-button class="action-button"> |
| <iron-icon icon="cr:add" slot="prefix-icon"></iron-icon> |
| Add current tab |
| </cr-button> |
| </div> |
| </div> |
| |
| <h1>cr-icon-button</h1> |
| <div class="demos"> |
| <div class="row"> |
| <cr-icon-button iron-icon="cr:delete"></cr-icon-button> |
| <cr-icon-button iron-icon="cr:delete" disabled></cr-icon-button> |
| </div> |
| </div> |
| |
| <dom-bind> |
| <template> |
| <h1>cr-expand-button</h1> |
| <div class="demos"> |
| <cr-expand-button expanded="{{expanded_}}" |
| expand-title="Expand" collapse-title="Collapse"> |
| <div hidden$="[[expanded_]]">Expand row</div> |
| <div hidden$="[[!expanded_]]">Collapse row</div> |
| </cr-expand-button> |
| <iron-collapse opened="[[expanded_]]"> |
| Some content goes here. |
| </iron-collapse> |
| |
| <cr-expand-button expand-icon="cr:arrow-drop-down" |
| collapse-icon="cr:arrow-drop-up"> |
| With custom icons |
| </cr-expand-button> |
| <cr-expand-button no-hover> |
| With no hover effect on entire row |
| </cr-expand-button> |
| </div> |
| </template> |
| </dom-bind> |
| |
| <script src="//resources/polymer/v3_0/iron-collapse/iron-collapse.js" |
| type="module"></script> |
| <script src="//resources/cr_elements/icons.html.js" type="module"> |
| </script> |
| <script |
| src="//resources/cr_elements/cr_expand_button/cr_expand_button.js" |
| type="module"></script> |
| <script src="//resources/cr_elements/cr_icon_button/cr_icon_button.js" |
| type="module"></script> |
| <script src="//resources/cr_elements/cr_button/cr_button.js" |
| type="module"></script> |
| </body> |
| </html> |
