mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
@ -0,0 +1,18 @@
|
||||
@import "./infinite-scroll-content";
|
||||
@import "./infinite-scroll-content.ios.vars";
|
||||
|
||||
.infinite-scroll-content-ios .infinite-loading-text {
|
||||
color: $infinite-scroll-ios-loading-text-color;
|
||||
}
|
||||
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-ios line,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-ios-small line,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle {
|
||||
stroke: $infinite-scroll-ios-loading-color;
|
||||
}
|
||||
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,
|
||||
.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle {
|
||||
fill: $infinite-scroll-ios-loading-color;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// Material Design Infinite Scroll
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-ios-loading-color: $text-ios-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default;
|
||||
@ -0,0 +1,16 @@
|
||||
@import "./infinite-scroll-content";
|
||||
@import "./infinite-scroll-content.md.vars";
|
||||
|
||||
.infinite-scroll-content-md .infinite-loading-text {
|
||||
color: $infinite-scroll-md-loading-text-color;
|
||||
}
|
||||
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle {
|
||||
stroke: $infinite-scroll-md-loading-color;
|
||||
}
|
||||
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,
|
||||
.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle {
|
||||
fill: $infinite-scroll-md-loading-color;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Infinite Scroll
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator
|
||||
$infinite-scroll-md-loading-color: $text-md-color-step-400 !default;
|
||||
|
||||
/// @prop - Color of the infinite scroll loading indicator text
|
||||
$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default;
|
||||
@ -0,0 +1,36 @@
|
||||
@import "./infinite-scroll-content.vars";
|
||||
|
||||
// Infinite Scroll Content
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-infinite-scroll-content {
|
||||
@include text-align(center);
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
min-height: $infinite-scroll-content-min-height;
|
||||
}
|
||||
|
||||
.infinite-loading {
|
||||
@include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start);
|
||||
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.infinite-loading-text {
|
||||
@include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Infinite Scroll Content States
|
||||
// --------------------------------------------------
|
||||
.infinite-scroll-loading ion-infinite-scroll-content > .infinite-loading {
|
||||
display: block;
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Config } from '../../index';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-infinite-scroll-content',
|
||||
styleUrls: {
|
||||
ios: 'infinite-scroll-content.ios.scss',
|
||||
md: 'infinite-scroll-content.md.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'infinite-scroll-content'
|
||||
}
|
||||
})
|
||||
export class InfiniteScrollContent {
|
||||
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
|
||||
/**
|
||||
* An animated SVG spinner that shows while loading.
|
||||
*/
|
||||
@Prop({ mutable: true }) loadingSpinner: string;
|
||||
|
||||
/**
|
||||
* Optional text to display while loading.
|
||||
*/
|
||||
@Prop() loadingText: string;
|
||||
|
||||
|
||||
componentDidLoad() {
|
||||
if (!this.loadingSpinner) {
|
||||
this.loadingSpinner = this.config.get('infiniteLoadingSpinner', this.config.get('spinner', 'lines'));
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div class='infinite-loading'>
|
||||
{this.loadingSpinner &&
|
||||
<div class='infinite-loading-spinner'>
|
||||
<ion-spinner name={this.loadingSpinner}></ion-spinner>
|
||||
</div>
|
||||
}
|
||||
{this.loadingText &&
|
||||
<div class='infinite-loading-text' innerHTML={this.loadingText}></div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Infinite Scroll
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Minimum height of the infinite scroll content
|
||||
$infinite-scroll-content-min-height: 84px !default;
|
||||
|
||||
/// @prop - Margin top of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-bottom: 32px !default;
|
||||
|
||||
/// @prop - Margin start of the infinite scroll loading icon
|
||||
$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default;
|
||||
|
||||
/// @prop - Margin top of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-top: 4px !default;
|
||||
|
||||
/// @prop - Margin end of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-end: 32px !default;
|
||||
|
||||
/// @prop - Margin bottom of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-bottom: 0 !default;
|
||||
|
||||
/// @prop - Margin start of the infinite scroll loading text
|
||||
$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default;
|
||||
55
core/src/components/infinite-scroll-content/readme.md
Normal file
55
core/src/components/infinite-scroll-content/readme.md
Normal file
@ -0,0 +1,55 @@
|
||||
# ion-infinite-scroll-content
|
||||
|
||||
InfiniteScrollContent is a component that adds the content to InfiniteScroll.
|
||||
You can loading icon or loading text with the component's properties.
|
||||
|
||||
```html
|
||||
<ion-content>
|
||||
<ion-infinite-scroll>
|
||||
<ion-infinite-scroll-content
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### loadingSpinner
|
||||
|
||||
string
|
||||
|
||||
An animated SVG spinner that shows while loading.
|
||||
|
||||
|
||||
#### loadingText
|
||||
|
||||
string
|
||||
|
||||
Optional text to display while loading.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### loading-spinner
|
||||
|
||||
string
|
||||
|
||||
An animated SVG spinner that shows while loading.
|
||||
|
||||
|
||||
#### loading-text
|
||||
|
||||
string
|
||||
|
||||
Optional text to display while loading.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
Reference in New Issue
Block a user