如何缩小Polymer 2.x中app-drawer-layout中抽屉与主要内容之间的差距？

Question

我有一个app-drawer-layout元素，在其中，我希望抽屉内容（蓝色）与主要内容（黄色）齐平，两者之间没有间隙（白色）。请注意，我已将--app-drawer-width更改为默认100px的{​​{1}}。这可能是导致差距的原因。这是一个错误吗？或者我编码错了吗？

Here is the JSBin. 注意：查看演示时，请确保输出窗格滑动到足以使抽屉可见。如果输出窗格太窄，则会隐藏抽屉。

应用程序抽屉布局

http://jsbin.com/lulenamavo/edit?html,output

256px

Answer 1

这不是错误。可能您错过了阅读documentation中的注意。

  

注意：*如果您使用并指定public class MainActivity extends AppCompatActivity implements PersonAdapter.PersonListListener{ private RecyclerView recyclerView; private PersonAdapter adapter; private Realm personRealm; private List<PersonModel> personObject; private RealmResults<PersonModel> dataResult; private static final String DIALOG_TAG = "EmployeeDialog"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.mycolleagues_layout); // Showing and Enabling clicks on the Home/Up button if (getSupportActionBar() != null) { getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowHomeEnabled(true); } personRealm = Realm.getDefaultInstance(); recyclerView = (RecyclerView) findViewById(R.id.person_recycler); setUpRecycler(); if (!Prefs.with(this).getPreLoad()) { setRealmData(); } showAllPersons(); } private void showAllPersons() { dataResult = personRealm.where(PersonModel.class).findAll(); setAdapter(dataResult); adapter.notifyDataSetChanged(); } private void setAdapter(RealmResults<PersonModel> results) { adapter = new PersonAdapter(this, results); recyclerView.setAdapter(adapter); adapter.notifyDataSetChanged(); } private void setUpRecycler() { // use this setting to improve performance if you know that changes // in content do not change the layout size of the RecyclerView recyclerView.setHasFixedSize(true); // use a linear layout manager since the cards are vertically scrollable final LinearLayoutManager layoutManager = new LinearLayoutManager(this); layoutManager.setOrientation(LinearLayoutManager.VERTICAL); recyclerView.setLayoutManager(layoutManager); } private void setRealmData(){ List<MyColleagueModel> colleague = new ArrayList<>(); MyColleagueModel model = new MyColleagueModel(); model.setId(1 + System.currentTimeMillis()); model.setName("Name1"); model.setCompany("Comapny1"); model.setTitle("Title1"); colleague.add(model); model = new MyColleagueModel(); model.setId(2 + System.currentTimeMillis()); model.setName("Name2"); model.setCompany("Comapny2"); model.setTitle("Title1"); colleague.add(model); model = new MyColleagueModel(); model.setId(3 + System.currentTimeMillis()); model.setName("Name3"); model.setCompany("Comapny3"); model.setTitle("Title3"); colleague.add(model); for (MyColleagueModel realmModel : colleague) { // Persist the colleague data colleagueRealm.beginTransaction(); colleagueRealm.copyToRealm(realmModel); colleagueRealm.commitTransaction(); } Prefs.with(this).setPreLoad(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.recycler_menu, menu); final MenuItem item = menu.findItem(R.id.search); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == android.R.id.home) { finish(); } //onOptionsItemSelected(MenuItem item) add will open dialog box, which allows user to fill required data if (id == R.id.addColleague) { showAlertDialog(); return true; } return super.onOptionsItemSelected(item); } private void showAlertDialog() { EditColleagueFragment dialog = new EditColleagueFragment(); //dialog.setPositiveButtonClickListener(this); dialog.show(getSupportFragmentManager(), DIALOG_TAG); //adapter.notifyDataSetChanged(); } @Override protected void onDestroy() { if (colleagueRealm!= null) colleagueRealm.close(); super.onDestroy(); } /*@Override public void onSaved() { dataResult = colleagueRealm.where(MyColleagueModel.class).findAll(); setAdapter(dataResult); adapter.notifyDataSetChanged(); }*/ @Override public void addPerson(MyColleagueModel colleagueModel) { } @Override public void editPerson(MyColleagueModel colleagueModel) { } } 的值，   两个元素都必须可以访问该值。这可以通过   定义包含--app-drawer-width的值（或:host，如果在...之外   影子根）：

     

html

在这种情况下，它将是：

:host { --app-drawer-width: 300px; }

Answer 2

For clarity, here is the fully coded solution demo.

http://jsbin.com/jodifafuqa/edit?html,output

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <base href="http://polygit.org/polymer+:master/components/">
  <link rel="import" href="polymer/polymer-element.html">
  <link rel="import" href="app-layout/app-layout.html">

</head>

<body>
  <dom-module id="my-el">
    <template>
      <style>
        :host {
          --app-drawer-width: 100px;
        }
        app-drawer {
          --app-drawer-content-container: {
            background-color: blue;
            color: white;
          }
        }
        #main-content {
          background-color: yellow;
          height: 100vh;
          width: 100vw; /* doesn't make content sections flush */
        }
      </style>
      <app-drawer-layout fullbleed>
        <app-drawer slot="drawer">
          drawer content
        </app-drawer>
        <div id="main-content">
          main content
        </div>
      </app-drawer-layout>
    </template>
    <script>
      class MyEl extends Polymer.Element {
        static get is() {
          return 'my-el'
        }
      }
      customElements.define(MyEl.is, MyEl);
    </script>
  </dom-module>

  <my-el></my-el>
</body>

</html>