javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(col): handle RTL offset-*, pull-*, and push-* (#16702)

Browse Source
This commit is contained in:
Abdelaziz Bennouna
2019-01-09 15:43:14 +00:00
committed by Adam Bradley
parent 48ab42f8ad
commit 6d6472baf5
3 changed files with 81 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
core/src/components.d.ts vendored
View File

@ -828,75 +828,75 @@ export namespace Components {
interface IonCol {
/**
* The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
*/
'offset'?: string;
/**
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetLg'?: string;
/**
* The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetMd'?: string;
/**
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetSm'?: string;
/**
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetXl'?: string;
/**
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetXs'?: string;
/**
* The amount to pull the column, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
*/
'pull'?: string;
/**
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullLg'?: string;
/**
* The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullMd'?: string;
/**
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullSm'?: string;
/**
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullXl'?: string;
/**
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullXs'?: string;
/**
* The amount to push the column, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column, in terms of how many columns it should shift to the end of the total available.
*/
'push'?: string;
/**
* The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushLg'?: string;
/**
* The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushMd'?: string;
/**
* The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushSm'?: string;
/**
* The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushXl'?: string;
/**
* The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushXs'?: string;
/**
@ -926,75 +926,75 @@ export namespace Components {
}
interface IonColAttributes extends StencilHTMLAttributes {
/**
* The amount to offset the column, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column, in terms of how many columns it should shift to the end of the total available.
*/
'offset'?: string;
/**
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetLg'?: string;
/**
* The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetMd'?: string;
/**
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetSm'?: string;
/**
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetXl'?: string;
/**
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available.
* The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available.
*/
'offsetXs'?: string;
/**
* The amount to pull the column, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column, in terms of how many columns it should shift to the start of the total available.
*/
'pull'?: string;
/**
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullLg'?: string;
/**
* The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullMd'?: string;
/**
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullSm'?: string;
/**
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullXl'?: string;
/**
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available.
* The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available.
*/
'pullXs'?: string;
/**
* The amount to push the column, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column, in terms of how many columns it should shift to the end of the total available.
*/
'push'?: string;
/**
* The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushLg'?: string;
/**
* The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushMd'?: string;
/**
* The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushSm'?: string;
/**
* The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushXl'?: string;
/**
* The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available.
* The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available.
*/
'pushXs'?: string;
/**

48
core/src/components/col/col.tsx
View File

@ -17,106 +17,106 @@ export class Col implements ComponentInterface {
@Element() el!: HTMLStencilElement;
/**
* The amount to offset the column, in terms of how many columns it should shift to the right
* The amount to offset the column, in terms of how many columns it should shift to the end
* of the total available.
*/
@Prop() offset?: string;
/**
* The amount to offset the column for xs screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() offsetXs?: string;
/**
* The amount to offset the column for sm screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() offsetSm?: string;
/**
* The amount to offset the column for md screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() offsetMd?: string;
/**
* The amount to offset the column for lg screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() offsetLg?: string;
/**
* The amount to offset the column for xl screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() offsetXl?: string;
/**
* The amount to pull the column, in terms of how many columns it should shift to the left of
* The amount to pull the column, in terms of how many columns it should shift to the start of
* the total available.
*/
@Prop() pull?: string;
/**
* The amount to pull the column for xs screens, in terms of how many columns it should shift
* to the left of the total available.
* to the start of the total available.
*/
@Prop() pullXs?: string;
/**
* The amount to pull the column for sm screens, in terms of how many columns it should shift
* to the left of the total available.
* to the start of the total available.
*/
@Prop() pullSm?: string;
/**
* The amount to pull the column for md screens, in terms of how many columns it should shift
* to the left of the total available.
* to the start of the total available.
*/
@Prop() pullMd?: string;
/**
* The amount to pull the column for lg screens, in terms of how many columns it should shift
* to the left of the total available.
* to the start of the total available.
*/
@Prop() pullLg?: string;
/**
* The amount to pull the column for xl screens, in terms of how many columns it should shift
* to the left of the total available.
* to the start of the total available.
*/
@Prop() pullXl?: string;
/**
* The amount to push the column, in terms of how many columns it should shift to the right
* The amount to push the column, in terms of how many columns it should shift to the end
* of the total available.
*/
@Prop() push?: string;
/**
* The amount to push the column for xs screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() pushXs?: string;
/**
* The amount to push the column for sm screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() pushSm?: string;
/**
* The amount to push the column for md screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() pushMd?: string;
/**
* The amount to push the column for lg screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() pushLg?: string;
/**
* The amount to push the column for xl screens, in terms of how many columns it should shift
* to the right of the total available.
* to the end of the total available.
*/
@Prop() pushXl?: string;
@ -233,15 +233,21 @@ export class Col implements ComponentInterface {
}
private calculateOffset() {
return this.calculatePosition('offset', 'margin-left');
const isRTL = document.dir === 'rtl';
return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
}
private calculatePull() {
return this.calculatePosition('pull', 'right');
const isRTL = document.dir === 'rtl';
return this.calculatePosition('pull', isRTL ? 'left' : 'right');
}
private calculatePush() {
return this.calculatePosition('push', 'left');
const isRTL = document.dir === 'rtl';
return this.calculatePosition('push', isRTL ? 'right' : 'left');
}
hostData() {

36
core/src/components/col/readme.md
View File

@ -28,24 +28,24 @@ There are several attributes that can be added to a column to customize this beh
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- |
| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. | `string \| undefined` | `undefined` |
| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. | `string \| undefined` | `undefined` |
| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` |
| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` |
| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |
| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` |