зеркало из https://github.com/microsoft/fast.git
feat: add navigational items on the page, toolbar and menu (#3115)
This commit is contained in:
Jane Chu
GitHub
Родитель
5fa8b99fd2
Коммит
97254fdf67
|
|
@ -1,11 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
Placeholder
|
||||
</body>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<fast-design-system-provider use-defaults>
|
||||
<div class="main">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-logo">
|
||||
<fast-anchor
|
||||
href="/"
|
||||
appearance="lightweight"
|
||||
>
|
||||
FAST Tooling Examples
|
||||
</fast-anchor>
|
||||
</div>
|
||||
<div class="toolbar-links">
|
||||
<fast-anchor
|
||||
href="https://github.com/microsoft/fast-dna/tree/master/packages/tooling"
|
||||
appearance="lightweight"
|
||||
>
|
||||
GitHub
|
||||
</fast-anchor>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<fast-badge
|
||||
fill="primary"
|
||||
color="text"
|
||||
>
|
||||
ALPHA
|
||||
</fast-badge>
|
||||
<div>
|
||||
<h2 class="category-title">
|
||||
Tooling
|
||||
</h2>
|
||||
<!-- examples using @microsoft/fast-tooling -->
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="category-title">
|
||||
React Tooling
|
||||
</h2>
|
||||
<!-- examples using @microsoft/fast-tooling-react -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
Placeholder
|
||||
</div>
|
||||
</div>
|
||||
</fast-design-system-provider>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,4 +1,14 @@
|
|||
import {
|
||||
FASTAnchor,
|
||||
FASTBadge,
|
||||
FASTDesignSystemProvider,
|
||||
} from "@microsoft/fast-components";
|
||||
|
||||
/* eslint-disable-next-line @typescript-eslint/no-var-requires */
|
||||
const style = require("./style.css");
|
||||
|
||||
// prevent tree shaking
|
||||
style;
|
||||
FASTAnchor;
|
||||
FASTBadge;
|
||||
FASTDesignSystemProvider;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,68 @@
|
|||
/* This prevents a flash of unstyled components */
|
||||
:not(:defined) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
--badge-fill-primary: #FB356D;
|
||||
--badge-color-text: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 240px auto;
|
||||
grid-template-rows: 44px auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
.toolbar-logo {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 1;
|
||||
}
|
||||
|
||||
.toolbar-links {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.menu {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 1;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
border-inline-end: 1px solid #e1e1e1;
|
||||
}
|
||||
|
||||
/* This should be replaced at a later date once the typography styles are defined */
|
||||
.category-title {
|
||||
font-size: var(--type-ramp-plus-2-font-size);
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-column-start: 2;
|
||||
grid-column-end: 2;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 2;
|
||||
}
|
||||
|
||||
.toolbar-logo,
|
||||
.toolbar-links,
|
||||
.menu,
|
||||
.content {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
|
|
|||
Двоичные данные
sites/fast-tooling-examples/logo.png
Двоичные данные
sites/fast-tooling-examples/logo.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 23 KiB После Ширина: | Высота: | Размер: 35 KiB |
|
|
@ -45,6 +45,7 @@
|
|||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/fast-components": "^0.10.1",
|
||||
"@microsoft/fast-tooling": "^0.3.1",
|
||||
"@microsoft/fast-tooling-react": "^2.0.4"
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче