d2-ui
Version:
126 lines (121 loc) • 3.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D2-UI Examples</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900" rel="stylesheet"
type="text/css">
<style>
html {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 300;
padding: 0;
margin: 0;
background: #f5f5f5;
}
body {
margin: 0;
padding: 8px;
}
a {
text-decoration: none;
color: #1E88E5;
}
section {
max-width: 1200px;
}
.card {
background: white;
padding: 16px;
display: inline-block;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.12);
border-radius: 2px;
margin: 16px;
min-width: 200px;
}
</style>
</head>
<body>
<h1>D2-UI Examples</h1>
<hr/>
<section>
<h2>Pure UI components</h2>
<div class="card">
<a href="expression-manager.html">Expression manager component</a>
</div>
<div class="card">
<a href="sidebar.html">SideBar component</a>
</div>
<div class="card">
<a href="tree-view.html">TreeView component</a>
</div>
<div class="card data">
<a href="icon-picker.html">IconPicker component</a>
</div>
<div class="card">
<a href="form-builder.html">FormBuilder component</a>
</div>
<div class="card">
<a href="period-picker.html">Period picker</a>
</div>
<div class="card">
<a href="button.html">Button component</a>
</div>
<div class="card">
<a href="text-field.html">TextField component</a>
</div>
<div class="card">
<a href="select-field.html">SelectField component</a>
</div>
<div class="card">
<a href="tabs.html">Tabs component</a>
</div>
<div class="card">
<a href="chip.html">Chip component</a>
</div>
<div class="card">
<a href="svg-icon.html">SvgIcon component</a>
</div>
<div class="card">
<a href="feedback-snackbar.html">FeedbackSnackbar component</a>
</div>
<div class="card">
<a href="layout.html">Layout components</a>
</div>
</section>
<section>
<h2>Data handling components</h2>
<div class="card">
<a href="header-bar.html">HeaderBar component</a>
</div>
<div class="card">
<a href="data-table.html">DataTable component</a>
</div>
<div class="card data">
<a href="org-unit-tree.html">OrgUnitTree component</a>
</div>
<div class="card data">
<a href="org-unit-select.html">OrgUnit Selection components</a>
</div>
<div class="card">
<a href="formula-editor.html">Formula Editor component</a>
</div>
<div class="card">
<a href="legend.html">Legend component</a>
</div>
<div class="card data">
<a href="groupeditor.html">GroupEditor component</a>
</div>
<div class="card data">
<a href="sharing.html">Sharing component</a>
</div>
<div class="card">
<a href="controlbar.html">Control Bar component</a>
</div>
<div class="card">
<a href="favorites-dialog.html">FavoritesDialog component</a>
</div>
</section>
</body>
</html>