microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Vertically center elements in TodoFooters

Browse Source
This commit is contained in:
Elizabeth Craig
2019-03-05 13:36:07 -08:00
parent 122ce81496
commit 5ce0dba5c4
6 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
step2-03/demo/src/components/TodoFooter.tsx
View File

@@ -11,7 +11,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>

2
step2-03/exercise/src/components/TodoFooter.tsx
View File

@@ -14,7 +14,7 @@ export const TodoFooter = (props: TodoFooterProps) => {
// - try it with an object: styles={{ ... }} // - try it with an object: styles={{ ... }}
// - try it with a function: styles={props => ({ ... })} // - try it with a function: styles={props => ({ ... })}
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>

2
step2-04/demo/src/components/TodoFooter.tsx
View File

@@ -7,7 +7,7 @@ export const TodoFooter = () => {
const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length; const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length;
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>

2
step2-04/exercise/src/components/TodoFooter.tsx
View File

@@ -11,7 +11,7 @@ export const TodoFooter = () => {
const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length; const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>

2
step2-06/demo/src/components/TodoFooter.tsx
View File

@@ -15,7 +15,7 @@ const TodoFooter = (props: TodoFooterProps) => {
const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length; const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>

2
step2-06/exercise/src/components/TodoFooter.tsx
View File

@@ -17,7 +17,7 @@ const TodoFooter = (props: TodoFooterProps) => {
const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length; const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
return ( return (
<Stack horizontal horizontalAlign="space-between"> <Stack horizontal horizontalAlign="space-between" verticalAlign="center">
<Text> <Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left {itemCount} item{itemCount === 1 ? '' : 's'} left
</Text> </Text>