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

adding some skeleton to the todo app

Browse Source
This commit is contained in:
Ken
2019-01-23 11:14:49 -08:00
parent 1c5b6cc9a7
commit 8b0a0f7569
14 changed files with 569 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
playground/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

20
playground/src/components/TodoApp.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { Stack, Text } from '@uifabric/experiments';
import { TodoList } from './TodoList';
import { TodoFooter } from './TodoFooter';
import { Pivot, PivotItem } from 'office-ui-fabric-react';
import { TodoHeader } from './TodoHeader';
export class TodoApp extends React.Component {
render() {
return (
<Stack horizontalAlign="center">
<Stack style={{ width: 650 }} verticalGap={25}>
<TodoHeader />
<TodoList />
<TodoFooter />
</Stack>
</Stack>
);
}
}

13
playground/src/components/TodoFooter.tsx Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import { Text, Stack } from '@uifabric/experiments';
import { Checkbox, Button, Pivot, PivotItem } from 'office-ui-fabric-react';
export interface TodoFooterProps {}
export const TodoFooter = (props: TodoFooterProps) => {
return (
<Stack horizontal horizontalAlign="center">
<Text>1 item left</Text>
</Stack>
);
};

23
playground/src/components/TodoHeader.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { Text, Stack } from '@uifabric/experiments';
import { Checkbox, Button, Pivot, PivotItem, TextField } from 'office-ui-fabric-react';
export interface TodoFooterProps {}
export const TodoHeader = (props: TodoFooterProps) => {
return (
<Stack>
<Stack horizontal horizontalAlign="center">
<Text variant="large">Yet Another To Do Example Application</Text>
</Stack>
<TextField placeholder="What needs to be done?" />
<Pivot>
<PivotItem headerText="all" />
<PivotItem headerText="active" />
<PivotItem headerText="completed" />
</Pivot>
</Stack>
);
};

17
playground/src/components/TodoList.tsx Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Stack } from '@uifabric/experiments';
import { TodoListItem } from './TodoListItem';
import { Pivot, PivotItem } from 'office-ui-fabric-react';
export class TodoList extends React.Component {
render() {
return (
<Stack verticalGap={10}>
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
<TodoListItem checked={false} label="nothing" />
</Stack>
);
}
}

16
playground/src/components/TodoListItem.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import { Text, Stack } from '@uifabric/experiments';
import { Checkbox } from 'office-ui-fabric-react';
export interface TodoListItemProps {
checked: boolean;
label: string;
}
export const TodoListItem = (props: TodoListItemProps) => {
return (
<Stack horizontal>
<Checkbox label={props.label} checked={props.checked} />
</Stack>
);
};

5
playground/src/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './components/TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));