javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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 { 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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; 'pushXs'?: string;
/** /**
@ -926,75 +926,75 @@ export namespace Components {
} }
interface IonColAttributes extends StencilHTMLAttributes { 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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; '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; 'pushXs'?: string;
/** /**

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

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