javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(packages): move the packages to root

Browse Source
This commit is contained in:
Brandy Carney
2018-03-12 16:02:25 -04:00
parent 097f1a2cd3
commit d37623a2ca
1255 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
core/src/components/thumbnail/readme.md Normal file
View File

@ -0,0 +1,26 @@
# ion-thumbnail
Thumbnails are square components that usually wrap an image or icon. They can be used to make it easier to display a group of larger images or provide a preview of the full-size image.
Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
```html
<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>
```
<!-- Auto Generated Below -->
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

19
core/src/components/thumbnail/test/basic/e2e.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/thumbnail/test/basic?ionicplatform=${platform}`);
}
}
platforms.forEach(platform => {
describe('thumbnail/basic', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate('#content');
});
});
});

43
core/src/components/thumbnail/test/basic/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Thumbnail - Basic</ion-title>
</ion-toolbar>
</ion-header>
<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://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>
</html>

19
core/src/components/thumbnail/test/standalone/e2e.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
const { By, until } = require('selenium-webdriver');
const { register, Page, platforms } = require('../../../../../scripts/e2e');
class E2ETestPage extends Page {
constructor(driver, platform) {
super(driver, `http://localhost:3333/src/components/thumbnail/test/standalone?ionicplatform=${platform}`);
}
}
platforms.forEach(platform => {
describe('thumbnail/standalone', () => {
register('should init', driver => {
const page = new E2ETestPage(driver, platform);
return page.navigate();
});
});
});

16
core/src/components/thumbnail/test/standalone/index.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<ion-thumbnail>
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
</ion-thumbnail>
</body>
</html>

20
core/src/components/thumbnail/thumbnail.ios.scss Normal file
View File

@ -0,0 +1,20 @@
@import "./thumbnail";
@import "./thumbnail.ios.vars";
// iOS Thumbnail
// --------------------------------------------------
.thumbnail-ios {
@include border-radius($thumbnail-ios-border-radius);
width: $thumbnail-ios-width;
height: $thumbnail-ios-height;
}
.thumbnail-ios ion-img,
.thumbnail-ios img {
@include border-radius($thumbnail-ios-border-radius);
overflow: hidden;
}

13
core/src/components/thumbnail/thumbnail.ios.vars.scss Normal file
View File

@ -0,0 +1,13 @@
@import "../../themes/ionic.globals.ios";
// iOS Thumbnail
// --------------------------------------------------
/// @prop - Width of the thumbnail
$thumbnail-ios-width: 48px !default;
/// @prop - Height of the thumbnail
$thumbnail-ios-height: $thumbnail-ios-width !default;
/// @prop - Border radius of the thumbnail
$thumbnail-ios-border-radius: 0 !default;

19
core/src/components/thumbnail/thumbnail.md.scss Normal file
View File

@ -0,0 +1,19 @@
@import "./thumbnail";
@import "./thumbnail.md.vars";
// Material Design Thumbnail
// --------------------------------------------------
.thumbnail-md {
@include border-radius($thumbnail-md-border-radius);
width: $thumbnail-md-width;
height: $thumbnail-md-height;
}
.thumbnail-md ion-img,
.thumbnail-md img {
@include border-radius($thumbnail-md-border-radius);
overflow: hidden;
}

13
core/src/components/thumbnail/thumbnail.md.vars.scss Normal file
View File

@ -0,0 +1,13 @@
@import "../../themes/ionic.globals.md";
// Material Design Thumbnail
// --------------------------------------------------
/// @prop - Width of the thumbnail
$thumbnail-md-width: 48px !default;
/// @prop - Height of the thumbnail
$thumbnail-md-height: $thumbnail-md-width !default;
/// @prop - Border radius of the thumbnail
$thumbnail-md-border-radius: 0 !default;

14
core/src/components/thumbnail/thumbnail.scss Normal file
View File

@ -0,0 +1,14 @@
@import "../../themes/ionic.globals";
// Thumbnail
// --------------------------------------------------
ion-thumbnail {
display: block;
}
ion-thumbnail img {
width: 100%;
height: 100%;
}

14
core/src/components/thumbnail/thumbnail.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@stencil/core';
@Component({
tag: 'ion-thumbnail',
styleUrls: {
ios: 'thumbnail.ios.scss',
md: 'thumbnail.md.scss'
},
host: {
theme: 'thumbnail'
}
})
export class Thumbnail {}