mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
325d331160
commit
bc30b48d03
8 changed files with 70 additions and 42 deletions
|
@ -10,11 +10,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
|
||||
<!--
|
||||
Material design: [Icon toggles](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons)
|
||||
|
@ -27,7 +24,7 @@ from the icon set to use.
|
|||
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
|
||||
See [`iron-iconset`](#iron-iconset) for more information about
|
||||
See [`iron-iconset`](iron-iconset) for more information about
|
||||
how to use a custom icon set.
|
||||
|
||||
Example:
|
||||
|
@ -37,6 +34,14 @@ Example:
|
|||
<paper-icon-button icon="favorite"></paper-icon-button>
|
||||
<paper-icon-button src="star.png"></paper-icon-button>
|
||||
|
||||
To use `paper-icon-button` as a link, wrap it in an anchor tag. Since `paper-icon-button`
|
||||
will already receive focus, you may want to prevent the anchor tag from receiving focus
|
||||
as well by setting its tabindex to -1.
|
||||
|
||||
<a href="https://www.polymer-project.org" tabindex="-1">
|
||||
<paper-icon-button icon="polymer"></paper-icon-button>
|
||||
</a>
|
||||
|
||||
### Styling
|
||||
|
||||
Style the button with CSS as you would a normal DOM element. If you are using the icons
|
||||
|
@ -79,12 +84,13 @@ Custom property | Description | Default
|
|||
cursor: pointer;
|
||||
z-index: 0;
|
||||
line-height: 1;
|
||||
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
||||
/* Because of polymer/2558, this style has lower specificity than * */
|
||||
box-sizing: border-box !important;
|
||||
|
||||
@apply(--paper-icon-button);
|
||||
}
|
||||
|
||||
|
@ -97,10 +103,11 @@ Custom property | Description | Default
|
|||
color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
|
||||
@apply(--paper-icon-button-disabled);
|
||||
}
|
||||
|
||||
:host(:hover) {
|
||||
|
||||
:host(:hover) {
|
||||
@apply(--paper-icon-button-hover);
|
||||
}
|
||||
|
||||
|
@ -109,6 +116,7 @@ Custom property | Description | Default
|
|||
--iron-icon-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
||||
</template>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue