mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
31ef2f7929
* remove side-effects, update React docs for cherry-picking * prettier * add PR # * prettier * fix react import paths * Update docs/pages/frameworks/react.md Co-authored-by: Cory LaViska <cory@abeautifulsite.net> * add colons to imports --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
1.4 KiB
1.4 KiB
meta, layout
| meta | layout | ||||
|---|---|---|---|---|---|
|
component |
<sl-menu style="max-width: 200px;">
<sl-menu-label>Fruits</sl-menu-label>
<sl-menu-item value="apple">Apple</sl-menu-item>
<sl-menu-item value="banana">Banana</sl-menu-item>
<sl-menu-item value="orange">Orange</sl-menu-item>
<sl-divider></sl-divider>
<sl-menu-label>Vegetables</sl-menu-label>
<sl-menu-item value="broccoli">Broccoli</sl-menu-item>
<sl-menu-item value="carrot">Carrot</sl-menu-item>
<sl-menu-item value="zucchini">Zucchini</sl-menu-item>
</sl-menu>
{% raw %}
import SlDivider from '@shoelace-style/shoelace/dist/react/sl-divider';
import SlMenu from '@shoelace-style/shoelace/dist/react/sl-menu';
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/sl-menu-label';
import SlMenuItem from '@shoelace-style/shoelace/dist/react/sl-menu-item';
const App = () => (
<SlMenu style={{ maxWidth: '200px' }}>
<SlMenuLabel>Fruits</SlMenuLabel>
<SlMenuItem value="apple">Apple</SlMenuItem>
<SlMenuItem value="banana">Banana</SlMenuItem>
<SlMenuItem value="orange">Orange</SlMenuItem>
<SlDivider />
<SlMenuLabel>Vegetables</SlMenuLabel>
<SlMenuItem value="broccoli">Broccoli</SlMenuItem>
<SlMenuItem value="carrot">Carrot</SlMenuItem>
<SlMenuItem value="zucchini">Zucchini</SlMenuItem>
</SlMenu>
);
{% endraw %}