Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@patternfly/pfe-select
Advanced tools
The select component provides a way to create list of options in a form.
There are 3 ways of providing options to your component:
<select>
element inside <pfe-select>
pfeOptions
setter functionaddOptions()
APINote: pfe-select component can also be used in places where dropdowns are needed but its more suitable for forms. For dropdowns, there will be a separate component.
With <select>
element:
<pfe-select>
<select>
<option disabled>Please select an option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</pfe-select>
Without <select>
element:
<pfe-select></pfe-select>
For custom options, use the pfeOptions
setter function to set the options as shown in snippet below:
let selectWithJSOptionsOnly = document.querySelector("pfe-select");
customElements.whenDefined("pfe-select").then(() => {
selectWithJSOptionsOnly.pfeOptions = [
{ text: "Please select an Option", value: "", selected: true },
{ text: 'One', value: '1', selected: false },
{ text: 'Two', value: '2', selected: false },
{ text: 'Three', value: '3', selected: false}
];
});
Place your <select>
element with or without <option>
s' here.
pfe-invalid
Changes the color and width of border-bottom of <pfe-select>
Value | Description |
---|---|
true | Sets the border-bottom-color to feedback--critical theme color and border-bottom-width to 2px |
false (default) | Sets the border-bottom-color to surface--darker theme color and border-bottom-width to default 1px |
Theme Var Hook | Description | Default |
---|---|---|
--pfe-select--BackgroundColor | Default <pfe-select> background color | $pfe-color--ui--lightest |
--pfe-select--BorderWidth | Default <pfe-select> border width | $pfe-var--ui--border-width |
--pfe-select--BorderBottomWidth | Default <pfe-select> border bottom width | $pfe-var--ui--border-width |
--pfe-select--BorderColor | Default <pfe-select> border color | $pfe-color--surface--lighter |
--pfe-select--BorderBottomColor | Default <pfe-select> border bottom color | $pfe-color--surface--darker |
--pfe-select--BorderBottomColor--hover | Border bottom color on <pfe-select> hover | $pfe-color--surface--ui-link |
--pfe-select--BorderBottomColor--error | Border bottom color on <pfe-select> error | $pfe-color--feedback--critical |
--pfe-select--BorderTop | Default <pfe-select> border top | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor |
--pfe-select--BorderLeft | Default <pfe-select> border left | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor |
--pfe-select--BorderRight | Default <pfe-select> border right | $pfe-var--pfe-select--BorderWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderColor |
--pfe-select--BorderBottom | Default <pfe-select> border bottom | $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor |
--pfe-select--BorderBottom--hover | Border bottom on <pfe-select> hover | $pfe-var--pfe-select--BorderBottomWidth $pfe-var--ui--border-style $pfe-var--pfe-select--BorderBottomColor--hover |
--pfe-select--BackgroundColor | Default <pfe-select> background color | $pfe-color--ui--lightest |
--pfe-select--Color | Default <pfe-select> color | $pfe-color--text |
Fires when an option is selected or deselected. The detail object contains the following
detail: {
value: String
}
npm run test
npm run build
From the PFElements root directory, run:
npm start
Select (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.
FAQs
Select element for PatternFly Elements
We found that @patternfly/pfe-select demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.