mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
moved up to 5
This commit is contained in:
Ken
@@ -1,4 +1,4 @@
|
||||
# Step 2.3: Theming and styling with UI Fabric
|
||||
# Step 2.3: Theming and styling with UI Fabric (Demo)
|
||||
|
||||
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
|
||||
|
||||
@@ -146,64 +146,3 @@ const className = mergeStyles(blueBackgroundClassName, {
|
||||
|
||||
const myDiv = <div className={className}>I am a green div that turns red on hover!</div>;
|
||||
```
|
||||
|
||||
# Exercises
|
||||
|
||||
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 3 to see results.
|
||||
|
||||
## Fabric theming and styling
|
||||
|
||||
### Applying Fabric themes
|
||||
|
||||
Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
|
||||
|
||||
```ts
|
||||
import { FluentCustomizations } from '@uifabric/fluent-theme';
|
||||
```
|
||||
|
||||
with:
|
||||
|
||||
```ts
|
||||
import { TeamsCustomizations } from '@uifabric/theme-samples';
|
||||
```
|
||||
|
||||
### Applying customized themes
|
||||
|
||||
1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
|
||||
|
||||
2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
|
||||
|
||||
3. Paste in the generated theme code before the `TodoApp` component definition.
|
||||
|
||||
4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
|
||||
|
||||
### Customizing one Fabric control instance
|
||||
|
||||
1. Open `exercise/src/components/TodoFooter.tsx`
|
||||
|
||||
2. Find the `<DefaultButton>` and insert a `styles` prop
|
||||
|
||||
3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
|
||||
|
||||
4. Try to customize this with a styles function
|
||||
|
||||
## Advanced/non-Fabric component styling
|
||||
|
||||
### CSS-in-JS with `mergeStyles`
|
||||
|
||||
1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
|
||||
|
||||
```tsx
|
||||
import { mergeStyles } from 'office-ui-fabric-react';
|
||||
|
||||
const className = mergeStyles({
|
||||
backgroundColor: 'red',
|
||||
selectors: {
|
||||
':hover': {
|
||||
backgroundColor: 'blue'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
2. Try to give a few components extra padding
|
||||
@@ -4,7 +4,7 @@
|
||||
<link rel="stylesheet" href="../../assets/step.css" />
|
||||
</head>
|
||||
<body class="ms-Fabric">
|
||||
<div id="markdownReadme"></div>
|
||||
<div id="markdownReadme" data-src="./README.md"></div>
|
||||
<div id="app"></div>
|
||||
<script src="../../assets/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
64
step2-03/exercise/README.md
Normal file
64
step2-03/exercise/README.md
Normal file
@@ -0,0 +1,64 @@
|
||||
# Step 2.3: Theming and styling with UI Fabric (Exercise)
|
||||
|
||||
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
|
||||
|
||||
# Exercises
|
||||
|
||||
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "exercise" link under day 2 step 3 to see results.
|
||||
|
||||
## Fabric theming and styling
|
||||
|
||||
### Applying Fabric themes
|
||||
|
||||
Try applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:
|
||||
|
||||
```ts
|
||||
import { FluentCustomizations } from '@uifabric/fluent-theme';
|
||||
```
|
||||
|
||||
with:
|
||||
|
||||
```ts
|
||||
import { TeamsCustomizations } from '@uifabric/theme-samples';
|
||||
```
|
||||
|
||||
### Applying customized themes
|
||||
|
||||
1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.
|
||||
|
||||
2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.
|
||||
|
||||
3. Paste in the generated theme code before the `TodoApp` component definition.
|
||||
|
||||
4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.
|
||||
|
||||
### Customizing one Fabric control instance
|
||||
|
||||
1. Open `exercise/src/components/TodoFooter.tsx`
|
||||
|
||||
2. Find the `<DefaultButton>` and insert a `styles` prop
|
||||
|
||||
3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)
|
||||
|
||||
4. Try to customize this with a styles function
|
||||
|
||||
## Advanced/non-Fabric component styling
|
||||
|
||||
### CSS-in-JS with `mergeStyles`
|
||||
|
||||
1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`
|
||||
|
||||
```tsx
|
||||
import { mergeStyles } from 'office-ui-fabric-react';
|
||||
|
||||
const className = mergeStyles({
|
||||
backgroundColor: 'red',
|
||||
selectors: {
|
||||
':hover': {
|
||||
backgroundColor: 'blue'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
2. Try to give a few components extra padding
|
||||
@@ -4,7 +4,7 @@
|
||||
<link rel="stylesheet" href="../../assets/step.css" />
|
||||
</head>
|
||||
<body class="ms-Fabric">
|
||||
<div id="markdownReadme"></div>
|
||||
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
|
||||
<div id="app"></div>
|
||||
<script src="../../assets/scripts.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user