mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-11 14:14:36 +08:00
Alex Rudenko
034db88ad6
This CL adds a list of grid elements to the Layout pane and synchronises the overlay state with adorners. The ability to navigate to an element or configure the colors will be done in follow-up CLs. Screenshot: https://i.imgur.com/y8bsLzk.png Bug: 1109177 Change-Id: I7700a37e1e8b03b48e3e4394f3e6c95a41d543f0 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352712 Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com> Reviewed-by: Changhao Han <changhaohan@chromium.org> Reviewed-by: Mathias Bynens <mathias@chromium.org> Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
77 lines
1.8 KiB
HTML
77 lines
1.8 KiB
HTML
<!--
|
|
Copyright 2020 The Chromium Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style license that can be
|
|
found in the LICENSE file.
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<title>Basic Layout Pane example</title>
|
|
<style>
|
|
#container {
|
|
width: 300px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
</div>
|
|
|
|
<script type="module">
|
|
import {LayoutPane} from '../../elements/LayoutPane.js';
|
|
|
|
const component = new LayoutPane();
|
|
|
|
document.getElementById('container').appendChild(component);
|
|
|
|
component.data = {
|
|
gridElements: [
|
|
{
|
|
id: 1,
|
|
name: 'div',
|
|
domId: 'foo',
|
|
enabled: false,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'div',
|
|
domClasses: ['for', 'bar', 'some-very-long-class-name-very-very-very-very-very-long'],
|
|
enabled: true,
|
|
}
|
|
],
|
|
settings: [
|
|
{
|
|
name: 'showGridTracks',
|
|
type: 'boolean',
|
|
value: false,
|
|
title: 'Show grid tracks',
|
|
options: [{
|
|
title: 'Show grid tracks',
|
|
value: true,
|
|
}, {
|
|
title: 'Do not show grid tracks',
|
|
value: false,
|
|
}]
|
|
},
|
|
{
|
|
name: 'showGridBorders',
|
|
type: 'enum',
|
|
value: "both",
|
|
title: 'Show grid borders',
|
|
options: [{
|
|
title: 'Show grid borders',
|
|
value: "both",
|
|
}, {
|
|
title: 'Do not show grid borders',
|
|
value: "none",
|
|
}]
|
|
}
|
|
],
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|