2.7 KiB
templateEngineOverride, layout, title, description, icon, toc
| templateEngineOverride | layout | title | description | icon | toc | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| njk | layouts/page.njk | CLI | Use the Basecoat CLI and template macros. | square-terminal |
|
{% from "macros/code_block.njk" import code_block %} {% from "tabs.njk" import tabs %}
Use the CLI
If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for complex components (e.g. Dialog). It will copy the JS and .html.jinja or .njk macros into your code.
For example, to add the Dialog component, run one of the following commands:
{% set code_npm_exec %}npx basecoat-cli add dialog{% endset %} {% set code_pnpm_exec %}pnpm dlx basecoat-cli add dialog{% endset %} {% set code_bun_exec %}bunx basecoat-cli add dialog{% endset %} {% set code_yarn_exec %}yarn dlx basecoat-cli add dialog{% endset %} {% set exec_tabsets = [ { tab: "npm", panel: code_block(code_npm_exec, class="") }, { tab: "pnpm", panel: code_block(code_pnpm_exec, class="") }, { tab: "bun", panel: code_block(code_bun_exec, class="") }, { tab: "yarn", panel: code_block(code_yarn_exec, class="") } ] %} {{ tabs(id="cli-execution", tabsets=exec_tabsets, label="Execute CLI commands to add components:") }}
You will be asked to confirm the template engine and destination directory for the JavaScript and macros.
Use Nunjucks or Jinja macros
For more complex components, you can use Nunjucks or Jinja macros to help generate the HTML and JavaScript code.
To install them, either copy them directly from the GitHub repository or use the CLI.
For example, here's how you could use the select() macro to generate the HTML and JavaScript code for a Select component:
{% set code %}{% raw %}{% call select() %}