javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(content): document and add custom properties

Browse Source 
references #14850 references #14808 references #14853
This commit is contained in:
Brandy Carney
2018-08-16 17:54:18 -04:00
parent 07e99a10f9
commit 0372aec650
6 changed files with 143 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/content/content.ios.scss
View File

@ -5,11 +5,8 @@
// --------------------------------------------------
:host {
--hr-height: #{$hairlines-width};
--hr-background: #{$content-ios-horizontal-rule-background};
font-family: $content-ios-font-family;
}
::slotted(hr) {
height: $hairlines-width;
background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha);
}

6
core/src/components/content/content.ios.vars.scss
View File

@ -6,8 +6,8 @@
/// @prop - Font family of the content
$content-ios-font-family: $font-family-base !default;
/// @prop - Background color of the outer content
$content-ios-outer-background: $background-color-step-50 !default;
/// @prop - Alpha for the Horizontal Rule
$content-ios-horizontal-rule-background-color-alpha: .12 !default;
/// @prop - Background for the Horizontal Rule
$content-ios-horizontal-rule-background: rgba(var(--ion-text-color-rgb, $text-color-rgb), $content-ios-horizontal-rule-background-color-alpha) !default;

5
core/src/components/content/content.md.scss
View File

@ -5,9 +5,8 @@
// --------------------------------------------------
:host {
--hr-background: #{$background-color-step-50};
font-family: $content-md-font-family;
}
::slotted(hr) {
background-color: $background-color-step-50;
}

54
core/src/components/content/content.scss
View File

@ -4,8 +4,22 @@
// --------------------------------------------------
:host {
--ion-color-base: #{$background-color};
--ion-color-contrast: #{$text-color};
/**
* @prop --background: Background of the Content
* @prop --color: Color of the Content
* @prop --padding-top: Padding top of the Content
* @prop --padding-bottom: Padding bottom of the Content
* @prop --padding-start: Padding start of the Content
* @prop --padding-end: Padding end of the Content
* @prop --keyboard-offset: Keyboard offset of the Content
* @prop --offset-top: Offset top of the Content
* @prop --offset-bottom: Offset bottom of the Content
*
* @prop --hr-height: Height of the hr in the Content
* @prop --hr-background: Background of the hr in the Content
*/
--background: #{$background-color};
--color: #{$text-color};
--padding-top: 0px;
--padding-bottom: 0px;
--padding-start: 0px;
@ -24,28 +38,28 @@
margin: 0 !important;
/* stylelint-enable */
background-color: #{current-color(base)};
color: #{current-color(contrast)};
background: var(--background);
color: var(--color);
contain: layout size style;
}
:host(.ion-color-outer),
:host(.ion-color) {
--hr-background: #{current-color(shade)};
background: current-color(base);
color: current-color(contrast);
}
// TODO we should remove outer-content in favor of a color
:host(.outer-content) {
--ion-color-base: #{$background-color-step-50};
--background: #{$background-color-step-50};
--hr-background: #{$background-color-step-150};
}
.inner-scroll {
@include position(
calc(var(--offset-top) * -1), 0,
calc(var(--offset-bottom) * -1), 0
);
@include padding(
calc(var(--padding-top) + var(--offset-top)),
var(--padding-end),
calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)),
var(--padding-start)
);
@include position(calc(var(--offset-top) * -1), 0,calc(var(--offset-bottom) * -1), 0);
@include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start));
position: absolute;
@ -85,4 +99,10 @@
.overscroll::after {
top: -1px;
}
}
::slotted(hr) {
height: var(--hr-height);
background: var(--hr-background);
}

17
core/src/components/content/readme.md
View File

@ -39,6 +39,23 @@ view component.
| `scrollToTop` | Scroll to the top of the component |
## CSS Custom Properties
| Name | Description |
| ------------------- | ----------------------------------- |
| `--background` | Background of the Content |
| `--color` | Color of the Content |
| `--hr-background` | Background of the hr in the Content |
| `--hr-height` | Height of the hr in the Content |
| `--keyboard-offset` | Keyboard offset of the Content |
| `--offset-bottom` | Offset bottom of the Content |
| `--offset-top` | Offset top of the Content |
| `--padding-bottom` | Padding bottom of the Content |
| `--padding-end` | Padding end of the Content |
| `--padding-start` | Padding start of the Content |
| `--padding-top` | Padding top of the Content |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

90
core/src/components/content/test/standalone/index.html
View File

@ -8,14 +8,86 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head>
<body>
<ion-content padding>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
<div class="content-height">
<ion-content padding>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<hr>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
</div>
<div class="content-height">
<ion-content padding color="secondary">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<hr>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
</div>
<div class="content-height">
<ion-content padding class="custom-color">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<hr>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
</div>
<div class="content-height">
<ion-content padding class="outer-content">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<hr>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
</div>
<div class="content-height">
<ion-content padding class="outer-content">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<hr>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<p>Paragraph</p>
</ion-content>
</div>
<style>
.content-height {
height: 200px;
}
/* TODO should this be in content? */
ion-content {
height: 100%;
}
.custom-color {
--background: blue;
--color: white;
--hr-background: purple;
}
</style>
</body>
</html>