Comments (3)
Возможно моды mods
и attrs
не самые удачные и лучше использовать mode('button-attrs')
, mode('button-mods')
from bem-components.
Возможно стоит даже и базовый код button вынести в моду.
block('select').elem('button')(
mode('button-mods')(function() {
var mods = this.mods;
return {
size : mods.size,
theme : mods.theme,
view : mods.view,
focused : mods.focused,
disabled : mods.disabled,
checked : mods.mode !== 'radio' && !!this._checkedOptions.length
}
}),
mode('button-attrs')(function() {
var mods = this.mods;
return {
role : 'listbox',
'aria-owns' : this._optionIds.join(' '),
'aria-multiselectable' : mods.mode === 'check'? 'true' : undefined,
'aria-labelledby' : this._selectTextId
},
}),
mode('button')(function() {
var select = this._select,
mods = this.mods;
return {
block : 'button',
mix : { block : this.block, elem : this.elem },
mods : apply('button-mods'),
attrs : apply('button-attrs'),
id : select.id,
tabIndex : select.tabIndex,
content : [
apply('content'),
{ block : 'icon', mix : { block : 'select', elem : 'tick' } }
]
};
}),
replace()(function() {
return apply('button');
}),
def()(function() {
return applyNext({ _selectTextId : this.generateId() });
})
);
from bem-components.
Пример использования:
block('select').mod('prefixed')(
def()((node, ctx) => {
return applyNext({
_textPrefix : ctx.textPrefix
});
}),
elem('button')(
mode('button-mods')((node) => {
return node.extend(applyNext(), { prefixed : true });
}),
mode('button')((node) => {
return node.extend(applyNext(), { textPrefix : node._textPrefix });
})
)
);
from bem-components.
Related Issues (20)
- select: doesn't loose focus after hard-focused and click outside
- Release v6.0.1
- popup_autoclosable: Call base onInit()
- Move to eslint HOT 1
- select: An issue with long list on mobile
- 404 https://ru.bem.info/libs/bem-components/current/showcase/
- Drop cache execution error on Windows HOT 1
- Select {mode: check} – неправильная работа в мобильных браузерах. HOT 2
- Popup_target_anchor for fixed elements
- Fix tmpl specs
- attach: не корректный порядок deps для attach__button (неявный баг) HOT 1
- move lazyInit from js to bemhtml/bh in modifers
- Use a trap for focus inside modal
- Select problem on iPhone HOT 2
- Link in the project description is broken HOT 1
- modal_autoclosable: close on highlighting text HOT 1
- inaccuracy in the documentation HOT 1
- Неожиданное поведение метода setVal при доопределении input
- iPad Select bug HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bem-components.