-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(tabs): tabs should update when tabs are added or removed #2014
Conversation
|
||
export type MdTabBodyOriginState = 'left' | 'right'; | ||
|
||
@Component({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add class comment explaining what this component is for and that it's internal-only.
state('left-origin-center', style({transform: 'translate3d(0, 0, 0)'})), | ||
state('right-origin-center', style({transform: 'translate3d(0, 0, 0)'})), | ||
state('center', style({transform: 'translate3d(0, 0, 0)'})), | ||
state('right', style({transform: 'translate3d(100%, 0, 0)'})), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you add a comment for what the different states represent and maybe a high-level explanation of the animations?
]) | ||
], | ||
host: { | ||
'md-tab-body-active': "'this._position == 'center'" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this meant to be '[class.md-tab-body-active]'
?
this._origin = 'left'; | ||
} else { | ||
this._origin = 'right'; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
More readable to add a variable for dir
:
let dir = this._getLayoutDirection();
if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {
|
||
/** The shifted index position of the tab body, where zero represents the active center tab. */ | ||
_position: MdTabBodyPositionState; | ||
@Input('md-tab-body-position') set position(position: number) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can omit the alias for all of these inputs. Just position
, origin
, are fine.
In general, only the selector for a directive has the md-
prefix, and we should prefer using camelCase properties for binding instead of the dash-case.
06e5e3b
to
9448117
Compare
Added comments to the MdTabBodyPositionState and MdTabBodyOriginState to hopefully clarify how they are used. Let me know if they're still too confusing/abstract. |
9448117
to
847ebfd
Compare
LGTM |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Closes #1692