mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -6,36 +6,37 @@
|
||||
<title>Thumbnail - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Thumbnail - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Thumbnail - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-thumbnail>
|
||||
<ion-content id="content">
|
||||
<ion-thumbnail>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Wide Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Wide Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -6,36 +6,37 @@
|
||||
<title>Thumbnail</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Thumbnail</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Thumbnail</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content">
|
||||
<ion-thumbnail>
|
||||
<ion-content id="content">
|
||||
<ion-thumbnail>
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Item Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Wide Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="https://images.unsplash.com/photo-1511125357779-27038c647d9d?auto=format&fit=crop&w=1951&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
|
||||
</ion-thumbnail>
|
||||
<ion-label>Wide Thumbnail</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Thumbnail - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -5,16 +5,16 @@
|
||||
// iOS Thumbnail
|
||||
// --------------------------------------------------
|
||||
|
||||
.thumbnail-ios {
|
||||
:host {
|
||||
@include border-radius($thumbnail-ios-border-radius);
|
||||
|
||||
width: $thumbnail-ios-width;
|
||||
height: $thumbnail-ios-height;
|
||||
}
|
||||
|
||||
.thumbnail-ios ion-img,
|
||||
.thumbnail-ios img {
|
||||
::slotted(ion-img),
|
||||
::slotted(img) {
|
||||
@include border-radius($thumbnail-ios-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@ -4,15 +4,15 @@
|
||||
// Material Design Thumbnail
|
||||
// --------------------------------------------------
|
||||
|
||||
.thumbnail-md {
|
||||
:host {
|
||||
@include border-radius($thumbnail-md-border-radius);
|
||||
|
||||
width: $thumbnail-md-width;
|
||||
height: $thumbnail-md-height;
|
||||
}
|
||||
|
||||
.thumbnail-md ion-img,
|
||||
.thumbnail-md img {
|
||||
::slotted(ion-img),
|
||||
::slotted(img) {
|
||||
@include border-radius($thumbnail-md-border-radius);
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
// Thumbnail
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-thumbnail {
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ion-thumbnail img {
|
||||
::slotted(ion-img),
|
||||
::slotted(img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
import { Component } from '@stencil/core';
|
||||
import { Mode } from '../../interface';
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
@ -7,8 +9,18 @@ import { Component } from '@stencil/core';
|
||||
ios: 'thumbnail.ios.scss',
|
||||
md: 'thumbnail.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'thumbnail'
|
||||
}
|
||||
shadow: true
|
||||
})
|
||||
export class Thumbnail {}
|
||||
export class Thumbnail {
|
||||
mode!: Mode;
|
||||
|
||||
hostData() {
|
||||
return {
|
||||
class: createThemedClasses(this.mode, 'thumbnail')
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user